Trying to open a SharePoint List item in Modal Dialog in Sharepoint 2013 Office 365 (online)

Question

Sorry for the long post. This has been killing me. I had this script working perfectly fine in SharePoint 2010 (online) and basically i have a source custom list (list A) with a hyperlink column and a Destination List with say title and my name.

Source List (list A) looks like this with these 2 columns

Each of these links link to the actual list item in the destination list, so for example, link 1 is /sites/2013DevSite/Lists/Destination%20List/EditForm.aspx?ID=1

So basically i want anytime the Link are clicked that point to another list's item to open in a modal dialog and the script below worked perfectly fine in SharePoint 2010 (online)

All it does is find the href tags for that particular value Editform.aspx and the pop modal works in SP 2010 online. So the site page is designed in such a way there is a content editor web part with the reference to this javascript file and the sharepoint list is right beneath it and this worked perfectly opening in modal windows in SP 2010.

Since migration to 2013, this is what exactly happens

1.) when you come to the site page, the modal works, 2.) If you filter or sort on say the Title or Test Link column in Source list (lets say you select the Value A), the script does not fire at all, if i hover over the hyperlink, the who hyperlink is shown and does not open the hyperlink in the modal pop up.

Could someone please let me know what am i doing wrong and thanks for all the help.

Once again i am trying to open a sharepoint list item from another list using Jquery

Answer 1

Thanks to you folks for trying to help. really appreciate that. i got a final script from microsoft where they relaized this was an issue with SP 2013 and wanted to post the modified code that works

<script type="text/javascript" src="/test/shared documents/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

    $(function ()
    {
        function initialize()
        {
            for (var vid in g_ViewIdToViewCounterMap)
            {
                var ctx = window["ctx" + g_ViewIdToViewCounterMap[vid]];
                var temp = ctx.onViewReRenderCompleted;
                ctx.onViewReRenderCompleted = onViewReRenderCompleted;

                modifyLinksToPopups(ctx);
            }
        }

        function onViewReRenderCompleted(ctx)
        {
            modifyLinksToPopups(ctx);

            // wire another 'onViewReRenderCompleted' event as the API nulls it out after every invocation
            setTimeout(function ()
            {
                ctx.onViewReRenderCompleted = onViewReRenderCompleted;
            }, 10);
        }

        function modifyLinksToPopups(ctx)
        {
            if (ctx.clvp && ctx.clvp.wpq)
            {
                var webParId = ctx.clvp.wpq;
                var linkLookup = 'a[href*="EditForm.aspx"]';

                $('#' + webParId).find(linkLookup).each(function (i, link)
                {
                    var href = link.href;
                    link.href = '#'; // use hash to avoid seeing javascript in status bar

                    link.onclick = function ()
                    {
                        showInModal(href, 'Edit Item'); // title = 'Edit Item'

                        // always return false when '#' is used as href.
                        return false;
                    };
                });
            }
        };

        function showInModal(href, title)
        {
            SP.UI.ModalDialog.showModalDialog({ title: title, url: href });
        };

        initialize();
    });


</script>

One spot where it does not work however is if the items are grouped in the view...if i can find a solution for that will post as well

Answer 2

Robert is right, its an async issue. You could probably fix it by adding a setTimeout or something.

In SP2013 you have JSLink, and it will fix your problem.

Here is an example for your scenario:

var SharePointStackExchange = SharePointStackExchange || {};

SharePointStackExchange.CustomizeFieldRendering = function () {
    var overrideCtx = {
        Templates: {
          Fields: {
            'Test_x0020_Link': { 
              'View' : SharePointStackExchange.ChangeHyperLink
            }
          }
        }
      };


    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
}

SharePointStackExchange.ChangeHyperLink = function (ctx) {
  var output = [];

  var onClick = "javascript:SharePointStackExchange.ShowInModal('" + ctx.CurrentItem.Test_x0020_Link +"');";

  output.push('<a href="javascript:void(0);" onclick="'+ onClick +'" >' + ctx.CurrentItem["Test_x0020_Link.desc"] +'</a>');

  return output.join('');
}


SharePointStackExchange.ShowInModal = function (href) {
    SP.UI.ModalDialog.showModalDialog({title:"Edit Item",url:href});
};

SharePointStackExchange.CustomizeFieldRendering();

You'll have to add some check for EditForm in .ChangeHyperLink etc.