2

I have created a datagrid using javascript. In that I am displaying top 4 items of my sharepoint list. Now I want to open hyperlink list item in modal dialog box on the click of that hyperlink. Please suggest javascript or jquery approach.

Ruchi
  • 21
  • 1
  • 1
  • 2

3 Answers3

7

To open the view item form you need to open DispForm.aspx page for the List Item in a Modal Dialog. The URL for the list item will be something like http://server/Lists/ListName/DispForm.aspx?ID=1 where ID is the list item ID. To open it in a modal dialog use the following code snippet.

function openDialog(pageUrl) {  
   SP.UI.ModalDialog.showModalDialog(   
     {  
       url: pageUrl,
       width: 500,  
       height: 500,  
       title: "Title of the Dialog"  
     }  
  );  
}

The above snippet has been taken from here.

You can also look at these:

Community
  • 1
Naveen
  • 1,902
  • 3
  • 35
  • 64
  • Thnks Naveen. But I want to open modal dialog on the click of the list item hyperlink which is already getting displayed on page load. When and how should I called this function that u have written ? – Ruchi Mar 10 '15 at 09:20
  • @Ruchi: You would be requried to call the openDialog from <a> tag. You can do this via href="javascript:openDialog()" or onclick="openDialog()". You will have to contruct the URL based by supplying server name, list name and ID of the list item. – Naveen Mar 10 '15 at 09:35
  • Naveen here is my code that adds list items on the datagrid function AddRowToTable1(name, modified, ID) { 
            var url = "http://synpunspd0177:23598/Lists/Broadcasts/DispForm.aspx?ID=" + ID;

        $("#BroadcastsdataTable").append('<tr>' +
                                                '<td class="tablenews"> <a href= ' + url + '>' + name + '</a>  ' + modified + ' </td>' +
                                                '</tr>');

    How to open list items that are displaying in datagrid as modal popup when clicked

     – Ruchi Mar 10 '15 at 09:42
  • @Ruchi: You will have to write something like "<a href=\"javascript:openDialog('" + url + "')\>". – Naveen Mar 10 '15 at 09:59
  • it is not working. Please suggest any other way.. – Ruchi Mar 10 '15 at 10:46
1

You need to ensure that the relevant file (SP.UI.Dialog.js) has been loaded first. 

function openDialog(pageUrl) { 
var options = {
    url: pageUrl,
    title: 'Title of the Dialog',
    allowMaximize: false,
    showClose: true,
    width: 500,
    height: 500
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);       
}

Here is a posting with some additional useful details: Tips & Tricks: SharePoint 2013 Modal Dialogs

Phil Greer
  • 2,287
  • 9
  • 21
  • 23
Tracy
  • 667
  • 6
  • 19
1

This JavaScript should inject the PopUp code in your page, affecting all link tags:

var links=getElementByTitle("a","linkTitle");
var origin=links;
var temp="javascript:OpenPopUpPage('" + origin + "', null, 640, 480)";
links.href=temp;

function getElementByTitle(tagName,elementTitle){
    var elementTag;
    var els=document.getElementsByTagName(tagName);
    var elsLen=els.length;
    var pattern=new RegExp("(^|\\s)" + elementTitle + "(\\s|$)");
    for (var i=j=0; i < els.length; i++){
        if (elementTitle.toUpperCase()==els[i].title.toUpperCase()){
        elementTag=els[i];
        j++;
    }}
 return elementTag;
}
Etienne Samii
  • 23
  • 7