1

I'm trying to get a SP.UI.ModalDialog to work if a user clicks on a link on a site collection. I'm implementing the code in my item display template. Unfortunately, clicking on the link does not pop up a modal dialog window. Nothing happens and I'm not getting an error message or anything.

The relevant display template code looks like this:

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"> 
<head>
<title>News_TableItem</title>

<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt="string">Displays a result tailored for a person.</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">; #SearchResults;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:CrawlerXSLFile msdt:dt="string"></mso:CrawlerXSLFile>
<mso:ManagedPropertyMapping msdt:dt="string">Title:Title, Path:Path, EditorOWSUSER:EditorOWSUSER, LastModifiedTime:LastModifiedTime, BlogArtikeldatum:BlogArtikeldatum, BlogLeadtext:BlogLeadtext, BlogKommentare:BlogKommentare, BlogLikes:BlogLikes, ParentLink:ParentLink, FileType:FileType, IsContainer:IsContainer, SecondaryFileExtension:SecondaryFileExtension</mso:ManagedPropertyMapping><mso:HtmlDesignPreviewUrl msdt:dt="string"></mso:HtmlDesignPreviewUrl>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">[...]NewsCenter.html, Konvertierung erfolgreich.</mso:HtmlDesignStatusAndPreview>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
<div id="Item_WebPage">
<!--#_

if (!$isNull(ctx.CurrentItem) && !$isNull(ctx.ClientControl)) {

function GetFormattedDate() {
var articleDate = new Date(ctx.CurrentItem.BlogArtikeldatum);           
var day = ("0" + format(articleDate.getDate())).slice(-2);
var month = ("0" + format(articleDate.getMonth() + 1)).slice(-2);
var year = articleDate.getFullYear();
return day + "." + month + "." + year;
}

//Check if LikeCount is 0
var likecount = 0
if (ctx.CurrentItem.BlogLikes != null) {
likecount = ctx.CurrentItem.BlogLikes;
}

function modalArticle() {
var options = SP.UI.$create_DialogOptions();

options.width = 1200;
options.height = 1200;
options.allowMaximize = true;
options.url = ctx.CurrentItem.Path + '&IsDlg=1';

SP.UI.ModalDialog.showModalDialog(options);
}

ctx.currentItem_modalArticle = modalArticle();

_#-->

<div class='news center clearfix overview'>
<div class='newsContent'>
<div class='newsHeadline'>
<h4><a>_#= ctx.CurrentItem.Title =#_</a> <span class='super'> _#= GetFormattedDate() =#_ | <i class="fa fa-thumbs-up"></i> _#= likecount =#_ </span> </h4>
</div>

<div class="leadtext">
_#= ctx.CurrentItem.BlogLeadtext =#_
</div>
</div>
</div>
<!--#_
}
_#-->
</div>
</body>
</html>

For the line where I'm calling the code I also tried:

<h4><a onclick="SP.UI.ModalDialog.showModalDialog(modalArticle());" href="javascript:void(0)">_#= ctx.CurrentItem.Title =#_</a></h4>

<h4><a onclick="SP.UI.ModalDialog.showModalDialog(modalArticle())" href="javascript:void(0)">_#= ctx.CurrentItem.Title =#_</a></h4>

<h4><a onclick=" =#_ SP.UI.ModalDialog.showModalDialog(modalArticle()) =#_ " href="javascript:void(0)">_#= ctx.CurrentItem.Title =#_</a></h4>

The last version is the only one that actually does something. It opens all links that exist on the page at once which is about 30 on that page. I'm assumung that wrapping the function in #= =# effetively disables the .onclick() event and executes the function for all links.

Any idea why it's not opening or how I could debug this?

Thanks a lot!

Improve this question

2 Answers 2

Reset to default
0

Your onClick should simply be this:

onclick="javascript:modalArticle();"
Improve this answer
1
  • Thanks. This approach does not "auto-show" the modals but does not do anything upon the click event. No modal dialog pops up when I click the link.
    – colonel_claypoo
    Commented May 16, 2019 at 13:50
0

Your approach is calling SP.UI.ModalDialog.showModalDialog twice. Once on the anchor tag and a second time inside the 'modalArticle' function. Once modalArticle is called, it doesn't know what ctx.CurrentItem.Path is, so you'll have to pass that specific path into the function when being called. See the code snippet below. 

<!--#_

        function modalArticle(path) {
            var options = SP.UI.$create_DialogOptions();

            options.width = 1200;
            options.height = 1200;
            options.allowMaximize = true;
            options.url = path + '&IsDlg=1';

            SP.UI.ModalDialog.showModalDialog(options);
        }

    _#-->

<h4><a onclick=" =#_ modalArticle(ctx.CurrentItem.Path) =#_ " href="javascript:void(0)">_#= ctx.CurrentItem.Title =#_</a></h4>
Improve this answer
4
  • Thanks. So what's happening now is that the modals are not opened twice (60x) but tey're still opening as soon as the page is loading without any click interaction. So it's basically like calling the function for each item and the .onclick() is still ignored. Do you need the full display template code?
    – colonel_claypoo
    Commented May 16, 2019 at 13:50
  • Yes please, the full display template would help see what's going on that could be triggering it. I'm looking over my display templates right now to see how I handled an onclick event.
    – BigRaj
    Commented May 16, 2019 at 15:10
  • After taking a look at the Item_Default.html file, it looks like the JS code is attaching the function to a property on the ctx.currentItem, and then pulling it into the html that way. there's a line ctx.currentItem_ShowHOverPanelCallback = Srch.U.getShowHoverPanelCallback(itemId, hoverId, hoverUrl) and it is pulled into the html as onmouseover="_#= ctx.currentItem_ShowHoverPanelCallback =#_"
    – BigRaj
    Commented May 16, 2019 at 15:23
  • Thanks, I updated my initial post with the full display template code. I also tried to play around adhering to the way it's implemented with the hoverPanel but the issue is the same. It opens all items as soon as the page is rendering.
    – colonel_claypoo
    Commented May 17, 2019 at 7:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.