{"id":1452,"date":"2022-08-30T15:16:39","date_gmt":"2022-08-30T15:16:39","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/19\/getting-a-hyperlink-field-column-to-display-data-as-a-hyperlink-from-a-sharepoint-list-using-javascript-and-jquery-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:16:39","modified_gmt":"2022-08-30T15:16:39","slug":"getting-a-hyperlink-field-column-to-display-data-as-a-hyperlink-from-a-sharepoint-list-using-javascript-and-jquery-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/getting-a-hyperlink-field-column-to-display-data-as-a-hyperlink-from-a-sharepoint-list-using-javascript-and-jquery-collection-of-common-programming-errors\/","title":{"rendered":"Getting a hyperlink field\/column to display data as a hyperlink from a SharePoint List, using JavaScript and jQuery-Collection of common programming errors"},"content":{"rendered":"

I have what I think should be a simple issue to resolve, but it has taken me way too long to figure out.<\/p>\n

The background on this is thus: basically what I have is a SharePoint List that contains task items. We have created a .js file and published it to the Site Assets section along with some jQuery files. These files serve to pull data from that task list and use it in a new task list (for testing) using a CAML query.<\/p>\n

Basically, what all this does is: using a webpart, allow us in a test segment of the SP site to take that test task list and re-sort it using drag and drop (we select any row and drag it to where we want it to be in the list and it drops right there).<\/p>\n

So with all that, my actual problem is very simple. On this drag and drop list, one of the columns is an Edit column. It pulls a hyperlink field from the source task list. In my test list, I cannot for the life of me get that link to display as a hyperlink, it will only display as text! I am pretty new to integrating all this JavaScript, SharePoint, jQuery, etc so am probably missing something obvious. I would be very grateful for any assistance and thank you in advance. Here is the code I am using, followed by a little more explanation. Everything works, except the link!<\/p>\n

Here is the CAML query, looking at the data from the list:<\/strong><\/p>\n

function loadPrioritizedList() {\n    $(\"#tasksUL\").empty();\n\/\/ TDs below have to be 3 more width than the headers \n    $().SPServices({\n        operation: \"GetListItems\",    \n        webURL: myURL,\n        listName: targetListName,\n        CAMLViewFields: \"\",\n        CAMLQuery: '' +\n        '' +\n        '' +\n        '' +\n        '', \n        CAMLRowLimit: listrowlimit,  \n<\/code><\/pre>\n
And here is where I am using the data:<\/strong><\/p>\n
     CAMLRowLimit: listrowlimit,  \n            completefunc: function (xData, Status) {\n                $(xData.responseXML).SPFilterNode(\"z:row\").each(function() {\n                    var tdHtml = \"<\/code><\/pre>\n\n\" + PriorityFormat($(this).attr(\"ows_Priority_x0020_Number\")); + \"<\/code><\/td>\n” + ($(this).attr(“ows_Edit_x0020_Link”)).split(“, “)[1] + “<\/td>\n” + $(this).attr(“ows_Priority”) + “<\/td>\n” + TopItem($(this).attr(“ows_Top_x0020_Item_x003f_”)) + “<\/td>\n” + StringChk($(this).attr(“ows_Purpose”)) + “<\/td>\n” + StringChk($(this).attr(“ows_Work_x002d_Task_x0020_Order”)) + “<\/td>\n” + StringChk($(this).attr(“ows_Work_x0020_Status”)) + “<\/td>\n” + FormatDate($(this).attr(“ows_DueDate”)) + “<\/td>\n” + StringChk($(this).attr(“ows_Task_x0020_Type”)) + “<\/td>\n<\/tr>\n
“; $(“#tasksUL”).append(tdHtml);<\/p>\n
The data element that needs to be a hyperlink is:<\/strong><\/p>\n
I was thinking I would have to format as a link here:<\/p>\n
tdHtml = tdHtml + \"<\/code><\/pre>\n\" + ($(this).attr(\"ows_Edit_x0020_Link\")).split(\", \")[1] + \"<\/code><\/td>\n
\";<\/code><\/p>\n
The data from the source table is a URL, followed by “, Edit” which in the source displays “Edit” as the link – if a user clicks that link, it opens the row (task) item to be able to edit it. I am trying to replicate that here (hence the “.split”), but again, am only getting text back. Same thing happens if I split for the URL instead of “Edit”.<\/p>\n
Here is the full code from the whole .js file:<\/strong><\/p>\n
\n\n    #tasksUL {\n        PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px\n    }\n    #tasksUL LI {\n        PADDING-BOTTOM: 0.4em; MARGIN: 0px 3px 3px; PADDING-LEFT: 1.5em; PADDING-RIGHT: 0.4em; HEIGHT: 10px; FONT-SIZE: 1.4em; CURSOR: pointer; PADDING-TOP: 0.4em\n    }\n    #tasksUL LI SPAN {\n        POSITION: absolute; MARGIN-LEFT: -1.3em\n    }\n    .listtable {\n        font-size:10px;\n        color:#333333;\n        border-width: 1px;\n        border-color: #729ea5;\n        border-collapse: collapse !important;\n        position: relative;\noverflow-y:auto;\nfloat:left !important; \n    }\n    .listtable_hdr th {\n        font-size:10px;\n        background-color:#acc8cc;\n        border-width: 1px;\n        padding: 4px;\n        border-style: solid;border-color: #729ea5;\n        text-align:left;\n    }\n    .listtable tr {\n        background-color:#d4e3e5;\n    }\n    .listtable td {\n        font-size:10px;\n        border-width: 1px;\n        padding: 4px;\n        border-style: solid;\n        border-color: #729ea5;\n        vertical-align:center;\nborder-collapse: collapse;\n    }\n    .listtable_hdr\n    {   \/* this div used as a fixed column header above the porfolio table, so we set bkgrnd color here *\/\n        position: static;    float: left;                        \n    }\n\n\n\n\n\n\n\n\n    \/\/CONFIGURATION VARIABLES\n    \/\/Assumes that this list is on the same site as the WebPart\n    var targetListName = \"AI Test List\";\n    var myURL = \"https:\/\/myteam.navair.navy.mil\/air\/68cbo\/Sandbox\"\n    var updatecount = 100;\n    var listrowlimit = 50;\n    var tablewidth = 975;\n\n    var fixHelperModified = function(e, tr) {\n\n        var $originals = tr.children();\n        var $helper = tr;\n\n        $helper.children().each(function(index) {\n            $(this).width($originals.eq(index).width())\n        });\n    $helper.width(tablewidth);\n\n        $helper.css('background-color', '#d3e324');\n\n        return $helper;\n    };\n\n    function PriorityFormat(item) {\n        if (typeof item === 'undefined')\n            return 0;\n        else\n            return parseInt(item);\n    }\n\n    function TopItem(item) {\n        if (item == \"1\")\n            return \"Yes\";\n        else \n            return \"No\";\n    }\n\n    function StringChk(item) {\n        if (typeof item === 'undefined')\n            return \" \";\n        else\n            return item;\n    }\n\n    function FormatDate(item) {\n        if (typeof item === 'undefined')\n            return \" \";\n        else {\n            var d = $.datepicker.parseDate(\"yy-mm-dd\",  item);\n            var dt_to = $.datepicker.formatDate('dd\/mm\/yy', d);\n            return dt_to;\n        }\n    }\n\n    function loadPrioritizedList() {\n        $(\"#tasksUL\").empty();\n    \/\/ TDs below have to be 3 more width than the headers \n        $().SPServices({\n            operation: \"GetListItems\",    \n            webURL: myURL,\n            listName: targetListName,\n            CAMLViewFields: \"\",\n            CAMLQuery: '' +\n            '' +\n            '' +\n            '' +\n            '', \n            CAMLRowLimit: listrowlimit,  \n            completefunc: function (xData, Status) {\n                $(xData.responseXML).SPFilterNode(\"z:row\").each(function() {\n                    var tdHtml = \"<\/code><\/pre>\n\n\" + PriorityFormat($(this).attr(\"ows_Priority_x0020_Number\")); + \"<\/code><\/td>\n” + ($(this).attr(“ows_Edit_x0020_Link”)).split(“, “)[1] + “<\/td>\n” + $(this).attr(“ows_Priority”) + “<\/td>\n” + TopItem($(this).attr(“ows_Top_x0020_Item_x003f_”)) + “<\/td>\n” + StringChk($(this).attr(“ows_Purpose”)) + “<\/td>\n” + StringChk($(this).attr(“ows_Work_x002d_Task_x0020_Order”)) + “<\/td>\n” + StringChk($(this).attr(“ows_Work_x0020_Status”)) + “<\/td>\n” + FormatDate($(this).attr(“ows_DueDate”)) + “<\/td>\n” + StringChk($(this).attr(“ows_Task_x0020_Type”)) + “<\/td>\n<\/tr>\n
“; $(“#tasksUL”).append(tdHtml); }); } }); $(“#tasksUL”).sortable({ containment: “#scroll2”, helper: fixHelperModified, scroll: true, axis: “y”, cursor: “move” }).disableSelection(); } \/\/Beginning to save items function saveListOrder() { $(“#Dialog”).dialog({ width: 200, height: 100, title: “Saving…”, resizable: false, closeOnEscape: false, modal: true }); alert(‘Saving new list order.’); var total = 0; var itemcnt = 0; var msgstart = “”; var msgend = “”; var updatestart = “”; var updateend = “”; \/\/ process each var updatemsg = updatestart; $(‘#tasksUL tr’).each(function(index) { \/\/ here we want to do ‘updatecount’ at a time to the list itemcnt = itemcnt + 1; total = total + 1; \/\/ create the update method for this item updatemsg = updatemsg + msgstart; updatemsg = updatemsg + “” + total + “”; var itemId = $(this).attr(“id”); updatemsg = updatemsg + “” + itemId + “”; updatemsg = updatemsg + msgend; \/\/ if we hit 100 then save to list and reset counter if (itemcnt == 100) { itemcnt = 0; updatemsg = updatemsg + updateend; SaveItem(updatemsg, total); updatemsg = updatestart; } }); \/\/ Now we need to update the last items if (itemcnt > 0) { updatemsg = updatemsg + updateend; SaveItem(updatemsg, total); } alert(‘List items saved. Reloading list.’); $(“#saveid”).html(“”); loadPrioritizedList(); $(“#Dialog”).dialog(‘close’); } function SaveItem(updatemsg, total) { $().SPServices({ operation: “UpdateListItems”, debug:false, async: false, batchCmd: “Update”, listName: targetListName, updates: updatemsg, completefunc: function(xData, Status) { $(“#saveid”).html(“Updated ” + total + ” list items”); } }); } $(document).ready(function() { \/\/alert(“jQuery”); \/\/alert($().SPServices.SPGetCurrentSite()); \/\/$(‘.listtable’).css(‘cursor’, ‘pointer’); $(“#Dialog”).dialog({ width: 200, height: 100, title: “Loading…”, resizable: false, closeOnEscape: false, modal: true }); $(“#msgid”).html(“Drag list items to save priority.”); loadPrioritizedList(); $(“#Dialog”).dialog(‘close’); }); Drag rows to new position to change List Order.
\nSave List Order<\/p>\n\n\n
List Order<\/th>\nEdit<\/th>\nPriority<\/th>\nTop Item?<\/th>\nEffort\/Purpose<\/th>\nContract-Task Order<\/th>\nWork Status<\/th>\nAction Need Date<\/th>\nAction Type<\/th>\n<\/tr>\n<\/table>\n<\/table>\n
<\/p>\n
Thanks again for any help!<\/p>\n
    \n
  1. \n
    Not sure i understand the problem, but, Did you try this:<\/p>\n
    tdHtml = tdHtml + '<\/code><\/pre>\n
    ‘;<\/p>\n
    Khalil.<\/p>\n
\n\n
‘+ ($(this).attr(“ows_Edit_x0020_Link”)).split(“, “)[1] +’<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<\/ol>\n
Originally posted 2013-11-19 13:17:21. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
I have what I think should be a simple issue to resolve, but it has taken me way too long to figure out. The background on this is thus: basically what I have is a SharePoint List that contains task items. We have created a .js file and published it to the Site Assets section […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1452","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1452","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1452"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1452\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1452"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}