Rendered Anchor Tag

zgoforth

Hello,

I have a file link I am pulling through a REST call, and in the response it is called LinkgUri within the File Object within the array of objects. It populates correctly to the table, but when I click on the link it is appending as an anchor, I get the following redirect: "The page you're looking for doesn't exist."

It is querying the url onto the current url, when instead I am trying to have it open in a new tab with the _blank target, but it stills me /undefinedtarget="_blank".

When I use the link that is in the response, it works fine and I am able to go to the document, but I cannot use it when it's appended to the column.. Why is this?

Here is my response:

{
   "d":{
      "results":[
         {
            "File":{
               "LinkingUri":"https://google.com"
            },
            "Title":"Document Link",
            "KpiDescription":"This is an example text for the description",
            "Team":"Team 1"
         }
      ]
   }
}
         

Here is my table:

var table = $('#documentTable').DataTable({
    responsive: true,
    "columns": [
        {
            "data": "Team"
        },
        {
            "data" : "File.Title",
            render: function ( data, type, row, meta ) {
            return '<a href=' + File.LinkingUri + 'target="_blank">'+ data +'</a>';
            }
        },
        {
            "data" : "File.LinkingUri", visible: false
        },
        {
            "data": "KpiDescription"
        }
    ],
    order: [[0, 'asc'], [1, 'asc']]
});

kthorngren

<a href=' + File.LinkingUri + ...

That doesn't exist which is why you are getting undefined as part of the URL. Your code snippet is a bit confusing. Does "data" : "File.Title", give you na error?

Does "data" : "File.LinkingUri", visible: false show the correct url? Remove visible: false``to see. If this works then use<a href=' + row.File.LinkingUri + ...`.

Kevin

zgoforth

File.Title exists, I must have accidentally removed it from the response I posted.

I just tried the other responses they work, it is an error on SharePoint side. Apparently they do not attach a LinkingUri to PDFs, not sure why.

It does append a server relative url, is it possible to run a condition to check the current file type for that row, and if it is any sort of word doc, excel, powerpoint, etc to what I currently have, and if not to apply the serverrelativeurl to the current url

zgoforth

UPDATE:

So I created a conditional column render, the microsoft files still work, but when I try to open a PDF it is appending the correct url on the end of the current url???

        {
            "data" : "File.Title",
            render: function ( data, type, row, meta ) {
            if(row.File_x0020_Type === "docx" || row.File_x0020_Type === "xlsx" || row.File_x0020_Type === "pptx"){
            return '<a href=' + row.File.LinkingUri + 'target="_blank">'+ data +'</a>';
            } else if (row.File_x0020_Type === "pdf"){
                let url = window.location;
                let domain = new URL(url);
                domain = domain.hostname;
                //console.log(domain);
                let pdfUrl = domain + row.File.ServerRelativeUrl;
                //console.log(pdfUrl);
            return '<a href=' + pdfUrl + 'target="_blank">'+ data +'</a>';   
            }
            }
        }

UPDATE:

I figured out it was because of the spaces were getting cut out so I did this,

 let pdfUrl = "https://" + domain + row.File.ServerRelativeUrl.replace(/ /g, '%20');

and the console log under it prints out the perfect url I can click on it and it opens it from my console. But it still doesn't work on click in the table, is it because I am missing row.?

kthorngren

But it still doesn't work on click in the table, is it because I am missing row.?

Datatables doesn't control whether you can click a link or not. What troubleshooting steps have you taken?

Do you get errors when clicking the link?

If you right click and copy the url can you paste it into the browser?

Kevin

zgoforth

The blank target was causing it to act up, once I removed that it worked fine. I had to move it from the following layout and it works fine:

return '<a target="_blank" href=' + pdfUrl +'target="_blank"'+ '>'+ data +'</a>';
//to
return '<a target="_blank" href=' + pdfUrl +'>'+ data +'</a>';