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">

     //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
 function silentCallback(dialogResult, returnValue) {
 function refreshCallback(dialogResult, returnValue) {
     SP.UI.Notify.addNotification('Operation Successful!');

  • Check in the browsers developer window(console), is there any error? Also check if your getting all the td's of links by the selector $("td.ms-cellstyle a") or not. Oct 16, 2018 at 2:16
  • Thanks for your answer. The page loads with the same td class, but the jquery event does not get attached to the list webpart when i use it on a page. I have tried with different classes(.ms-vb2 and ms-cellstyle.ms-vb2, but nothing works
    – D.I
    Oct 16, 2018 at 7:08

1 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.

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


enter image description here


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.

enter image description here

  • Thank you for the answer. I tried it, but it still doesn't work.
    – D.I
    Oct 16, 2018 at 7:09
  • Please use F12 Debugger, see if the function is trigger when clicking the link. Oct 16, 2018 at 7:17
  • I checked it. The function it not triggered when clicking. I found the reason for the problem. The view i have is a grouped view (collapsed on load). If i change the view to not grouped, then the script works on the sitepage as well. So the question is, how to make the script work on grouped view? Thank you very much for your time and help!
    – D.I
    Oct 16, 2018 at 7:51
  • Ok, I will check the group view. Oct 16, 2018 at 7:54
  • I have reproduced that. To work around this issue, set “show groupings” to “Expanded” for the view settings. Otherwise, the script won’t work in grouping view. Oct 16, 2018 at 8:01

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.