0

I am using a jQuery data table to display a Sharepoint list.

I have the title column hyperlinked to each item's display form. But I would like for this to open in the modal.

Below is my code for the list:

    <!-- jQuery -->
<script type="text/javascript" charset="utf8" 
src="https://uconnect.cbpnet.cbp.dhs.gov/sites/OIT/bems/bi/SiteAssets/TEST2/jquery-1.8.2.min.js"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css"
href="https://uconnect.cbpnet.cbp.dhs.gov/sites/OIT/bems/bi/SiteAssets/TEST2/jquery.dataTables.css">
<!-- DataTables -->
<script type="text/javascript" charset="utf8"
src="https://uconnect.cbpnet.cbp.dhs.gov/sites/OIT/bems/bi/SiteAssets/TEST2/jquery.dataTables.min.js"></script>


<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead><th>Parent System Name</th><th>System Name</th><th>Description</th></thead>
</table>


<script type="text/javascript">

function LoadZipCodes(state)
{
        var call = $.ajax({
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('All BEMS Applications')/items?"+
"$select=Title,System_x0020_Name,ID,Description&$top=5000",
            type: "GET",
            dataType: "json",
            headers: {
                Accept: "application/json;odata=verbose"
            }

        });

        call.done(function (data,textStatus, jqXHR){
                    $('#example').dataTable({
                "bDestroy": true,
                "bProcessing": true,
                "aaData": data.d.results,
                "aoColumns": [
                    { "mData": "Title",
                      "mRender" : function ( data, type, full ){ 
        return "<a href='https://uconnect.cbpnet.cbp.dhs.gov/sites/OIT/bems/bi/Lists/AllBEMSApps/DispForm.aspx?ID=" + full['ID'] + "' >" +full['Title']+"</a>"
        } 
          },
                    { "mData": "System_x0020_Name"},

                    { "mData": "Description"}
}
                ]
              });

              });


        call.fail(function (jqXHR,textStatus,errorThrown){
            alert("Error retrieving Tasks: " + jqXHR.responseText);
        });
}

window.onload = LoadZipCodes;

</script>

I tried adding:

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

And then modifying the link in the list as so:

return "<a href="#" onclick="openDialog ('https://uconnect.cbpnet.cbp.dhs.gov/sites/OIT/bems/bi/Lists/AllBEMSApps/DispForm.aspx?ID=" + full['ID'] + "');">" +full['Title']+"</a>"

But this did not work.

Is there another way to achieve this?

Thank you for any help you can provide.

0

I think that you are mixing single and double quotation marks.

Try to modify the link like this:

function openDialog(itemId) { 
    var pageUrl = "https://uconnect.cbpnet.cbp.dhs.gov/sites/OIT/bems/bi/Lists/AllBEMSApps/DispForm.aspx?ID=" + itemId;
    var options = {
        url: pageUrl,
        title: '',
        allowMaximize: false,
        showClose: true,
        width: 800,
        height: 700
    };
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);       
}

return "<a href='#' onclick='openDialog(" + full['ID'] + ");' >" +full['Title'] + "</a>";

I would put that as a comment, but my reputation is too low.

  • This worked like a charm, thank you so much! – Brandon Aug 27 '18 at 14:02

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.