Open hyperlink in modal dialog on sitepage

Question

I'm having trouble opening hyperlinks in modal dialog on a sitepage. My list contains a column with hyperlinks.

I have tried everything, but can't seem to make it work.

On the actual page of the list itself, if I add a script editor and paste the code below, it works perfectly fine. However, when i display that list (as a webpart) on a sitepage, and add a script editor like before, the hyperlinks don't open in modal dialog anymore. How do I fix this?

Any help is greatly appreciated! Thank you

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){
     //In SharePoint OOTB list view, all 'td' will have this class 'ms-cellstyle'
     $("td.ms-cellstyle a").click(function () {   
         var currentURL = $(this).attr('href'); 
         var onclickVal = $(this).attr('onclick') || '';
         if(onclickVal == '') {
            currentURL = "javascript:ModalDailog('"+currentURL+"')";           
            $(this).attr('onclick', 'empty');     
            $(this).attr('href', currentURL);        
         }
     });
 });

 //Function to open url in Modal Dailog
 function ModalDailog(urlvalue) {    
     var options = {
         url: urlvalue,              
         allowMaximize: true,
         showClose: true,     
         dialogReturnValueCallback: silentCallback
     };
     SP.UI.ModalDialog.showModalDialog(options).autoSize();
 }
 function silentCallback(dialogResult, returnValue) {
 }
 function refreshCallback(dialogResult, returnValue) {
     SP.UI.Notify.addNotification('Operation Successful!');
     SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);

 }
 </script>

Answer 1

Try calling the script after the initial HTML document has been completely load.

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed.

<script>
document.addEventListener('DOMContentLoaded', function() {
   //do something;
}, false);
</script>

Debug:

Update:

I have reproduced it when using Group.

To work around this issue, set “show groupings” to “Expanded” for the view settings. Otherwise, the script won’t work in grouping view.