I am trying to display a list items's content (body column) when you click on the title in a modal dialog box. If I fill the modal function with nonsense text, it works fine (for example, title: "blahblah").When I try to make it pull based on the current item, I get an error. and the page looks like this. without the modal dialog, everything displays correctly on the page without the strange doubling of content and extra )">

I had some other issues with sharepoint styling in the past, and people on here were able to help me out a lot, so any further help would be greatly appreciated!

window.News = window.News || {};
window.News.LIST_NAME = "News";

(function () {
    // Ensure the core js class is loaded
    SP.SOD.executeOrDelayUntilScriptLoaded(function () {
        // CSR-override for MDS enabled site
        RegisterModuleInit(_spPageContextInfo.webServerRelativeUrl + "/SiteAssets/News/News.js", RegisterNewsCustomizations);
    }, 'sp.js');

    // Register the Customizations

// Register the JSLink List/View Customizations
function RegisterNewsCustomizations() {
        Templates: {
            Header: headerTemplate,
            Item: itemTemplate,
            Footer: footerTemplate
        }, ListTemplateType: 104

// The header
function headerTemplate(ctx) {
    if (ctx.ListTitle != window.News.LIST_NAME) { return RenderHeaderTemplate(ctx); }
    var container = "";
    return container;

//the footer
function footerTemplate(ctx) {
    if (ctx.ListTitle != window.News.LIST_NAME) { return RenderFooterTemplate(ctx); }
    var footer = "".concat("<div class = \"newsFooter\"><a class='newsApp-more' href='" + _spPageContextInfo.webServerRelativeUrl + "/Lists/News/AllItems.aspx#'>More news >></a></div>");
    return footer
//popup function
function popup(myTitle, myBody) {
    var options = {title: mytitle, html: "<p>"+myBody+"</p>" };

function itemTemplate(ctx) { 
    if (ctx.ListTitle != window.News.LIST_NAME) { return RenderItemTemplate(ctx); }
    //set all variables
    var titles = "<div><a class= \"newsApp-title\" href=\"#\" onclick=\"popup({{Title}},{{Body}})\">" + ctx.CurrentItem["Title"] + "</a><span>"+ctx.CurrentItem["Body"]+"</span></div>";
    var expires = "<div class=\"newsApp-date\">" + ctx.CurrentItem["Expires"] + "</div>";
    //replace parts in popup
    titles = titles.replace(/{{Title}}/g, ctx.CurrentItem["Title"]);
    titles = titles.replace(/{{Body}}/g, ctx.CurrentItem["Body"]);

    var myContent = titles + expires;
    return myContent;

1 Answer 1


It looks like you have some ill-formed html content, either tags not closed or quote mismatch. You should try creating an html dom object and append the html content to it. Then pass that html content into your popup() function. Here's a nice example explaining how to safe cast your html using the browser dom creation method. http://shebang.brandonmintern.com/foolproof-html-escaping-in-javascript/

  • I agree, it is HTML not formed correctly. You can use browser's developer tool investigate where it is breaking and apply required fix. Commented Feb 18, 2016 at 11:01
  • you are correct. It seems SharePoint inject a class around my item, which breaks it. It looks like this: ` "<div class="ExternalClassF13D31784EFA43BA89316110B33AB038"><p>​myBody</p></div>"` Does anyone have any ideas on how to either stop this or make it so it doesn't break everything? Commented Feb 23, 2016 at 16:10

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.