I'm using REST API to bring items back from my SharePoint list and then building a table with that link as I loop though each item. In the last column of the table, the item is a link that is supposed to pop open a modal window when clicked. The problem that I am having is passing the ID to the modal. Any ideas how to accomplish this? What I have does not even bring up the modal.

function getProjectContracts() {
   //Using REST to retrieve data    


function contractComplete(data) {
    var contractHtml="";
    var typeArray = [];
    var headingName = "";
    for(var i =0; i < data.d.results.length; i++) 
        headingName = data.d.results[i].ContractType;

        if (typeArray.indexOf(headingName) === -1){

            contractHeadHtml = "<tr><td colspan='14' id='" + headingName + "' style='background-color:#eeeeee'><b>" + headingName + "</b></td></tr>";
            contractHtml = "<tr>"+
            "<td style='text-align:center'><a href="+_spPageContextInfo.webAbsoluteUrl+"/Lists/Project%20Contracts/Item/displayifs.aspx?List=a20a6951%2Dced3%2D4faf%2Db920%2D3702c532a2af&ID="+data.d.results[i].ID+"&Source=../SitePages/ProjectSummary.aspx?id="+getUrlVars()["id"]+"&ContentTypeId=0x01006633A0266D59004FB176A06FF9491281><img src='../images1/edit-notessp.png'></a></td>"+
            "<td><a href=../SitePages/contractMod.aspx?id="+checkForNull(data.d.results[i].ContractNumber)+"  id=editMod>"+anyLetter(data.d.results[i].ContractNumber)+"</a></td>"+       
            console.log("page context::::: "+_spPageContextInfo.webAbsoluteUrl);                                                                               "</tr>";                                


var modLink = document.getElementById("editMod");

modLink.addEventListener("click", openInDialog)  //<-- not sure how to pass "data.d.results[i].ContractNumber"

function openInDialog()
    var urlValue =getUrlVars()["id"];
    setTimeout(function(){ alert("wait for a few seconds"); }, 50000);
    var pageUrl = pageUrl=_spPageContextInfo.webAbsoluteUrl+"/SitePages/departmentalGSF.aspx?id="+urlValue;
    var dlgWidth = 800;
    var dlgHeight = 600;
    var dlgAllowMaximize = true;
    var dlgShowClose = true;
    var needCallBackFunction = false;
    var options = {
        url: pageUrl,
        width: dlgWidth,
        height: dlgHeight,
        allowMaximize: dlgAllowMaximize,
        showClose: dlgShowClose,
        dialogReturnValueCallback: CloseDialogCallback


        options.dialogReturnValueCallback = Function.createDelegate(null, CloseDialogCallback);
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);

function anyLetter(cNumber) {
    if (cNumber.match(/[a-z]/i)) {
                    return "View/Edit";

When your function is called from the eventListener, you should have this already bound to it. You can find more detail here. Pass over whichever function from the web side (code not given above for the link coming in) and access it with this.(your variable/parameter here). Once you have that value, pass it to your modal function as a parameter.

  • I'm not sure how that would work. Here's a mock-up of what I'm trying to do. Click the 'Edit' link. jsfiddle.net/isogunro/516t2966/3 – JustMe Jul 31 '17 at 22:14
  • You have a link that has both an href and an onclick, which is triggering two actions (navigate and function), which aren't going to work together. A button may be more appropriate for what you're doing. Also, you're building HTML code in javascript. You should probably consider moving to a solution like Angular for handling that more easily. – Graham Aug 2 '17 at 15:42

Why not simply pass the id to the function

<a href='...' onclick='javascript:openInDialog(id); return false'>Add/Edit</a>
  • I can't get it to work. Here's a jsfiddle mock-up jsfiddle.net/isogunro/516t2966/3 – JustMe Jul 31 '17 at 22:14
  • In JSFiddle, you'd need to set the load type to body for the functions to register. See updated fiddle: jsfiddle.net/516t2966/12 – Aveenav Aug 1 '17 at 13:37
  • What exactly did you change besides adding "return false;"? – JustMe Aug 1 '17 at 15:56
  • JavaScript settings on JSFiddle (click on the settings gear icon) - changed load type. – Aveenav Aug 2 '17 at 15:51

You already pass the id into the URL of your modal: var pageUrl = pageUrl=_spPageContextInfo.webAbsoluteUrl+"/SitePages/departmentalGSF.aspx?id="+urlValue;

So you can get it from the URL...

If your departmentalGSF.aspx loads the regular Sharepoint libraries, then you can call GetUrlKeyValue('id') into the departmentalGSF.aspx page. Otherwise you have to parse your URL.

Attention: I've noticed that Sharepoint returns an error when we try to call a page with a parameter ID. So I usually use another name, like ?ref=1 (instead of ?ID=1), and then I use GetUrlKeyValue('ref') to get my ID.

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.