0

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>
Improve this question
2
  • 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. – Ganesh Sanap Oct 16 '18 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 '18 at 7:08
0

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:

enter image description here

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.

enter image description here

Improve this answer
6
  • Thank you for the answer. I tried it, but it still doesn't work. – D.I Oct 16 '18 at 7:09
  • Please use F12 Debugger, see if the function is trigger when clicking the link. – JoannaW_MSFT Oct 16 '18 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 '18 at 7:51
  • Ok, I will check the group view. – JoannaW_MSFT Oct 16 '18 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. – JoannaW_MSFT Oct 16 '18 at 8:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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