Getting a hyperlink field/column to display data as a hyperlink from a SharePoint List, using JavaScript and jQuery-Collection of common programming errors
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 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.
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).
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!
Here is the CAML query, looking at the data from the list:
function loadPrioritizedList() {
$("#tasksUL").empty();
// TDs below have to be 3 more width than the headers
$().SPServices({
operation: "GetListItems",
webURL: myURL,
listName: targetListName,
CAMLViewFields: "",
CAMLQuery: '' +
'' +
'' +
'' +
'',
CAMLRowLimit: listrowlimit,
And here is where I am using the data:
CAMLRowLimit: listrowlimit,
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var tdHtml = "" + PriorityFormat($(this).attr("ows_Priority_x0020_Number")); + "“; $(“#tasksUL”).append(tdHtml);
The data element that needs to be a hyperlink is:
I was thinking I would have to format as a link here:
tdHtml = tdHtml + "" + ($(this).attr("ows_Edit_x0020_Link")).split(", ")[1] + "";
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”.
Here is the full code from the whole .js file:
#tasksUL {
PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
#tasksUL LI {
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
}
#tasksUL LI SPAN {
POSITION: absolute; MARGIN-LEFT: -1.3em
}
.listtable {
font-size:10px;
color:#333333;
border-width: 1px;
border-color: #729ea5;
border-collapse: collapse !important;
position: relative;
overflow-y:auto;
float:left !important;
}
.listtable_hdr th {
font-size:10px;
background-color:#acc8cc;
border-width: 1px;
padding: 4px;
border-style: solid;border-color: #729ea5;
text-align:left;
}
.listtable tr {
background-color:#d4e3e5;
}
.listtable td {
font-size:10px;
border-width: 1px;
padding: 4px;
border-style: solid;
border-color: #729ea5;
vertical-align:center;
border-collapse: collapse;
}
.listtable_hdr
{ /* this div used as a fixed column header above the porfolio table, so we set bkgrnd color here */
position: static; float: left;
}
//CONFIGURATION VARIABLES
//Assumes that this list is on the same site as the WebPart
var targetListName = "AI Test List";
var myURL = "https://myteam.navair.navy.mil/air/68cbo/Sandbox"
var updatecount = 100;
var listrowlimit = 50;
var tablewidth = 975;
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr;
$helper.children().each(function(index) {
$(this).width($originals.eq(index).width())
});
$helper.width(tablewidth);
$helper.css('background-color', '#d3e324');
return $helper;
};
function PriorityFormat(item) {
if (typeof item === 'undefined')
return 0;
else
return parseInt(item);
}
function TopItem(item) {
if (item == "1")
return "Yes";
else
return "No";
}
function StringChk(item) {
if (typeof item === 'undefined')
return " ";
else
return item;
}
function FormatDate(item) {
if (typeof item === 'undefined')
return " ";
else {
var d = $.datepicker.parseDate("yy-mm-dd", item);
var dt_to = $.datepicker.formatDate('dd/mm/yy', d);
return dt_to;
}
}
function loadPrioritizedList() {
$("#tasksUL").empty();
// TDs below have to be 3 more width than the headers
$().SPServices({
operation: "GetListItems",
webURL: myURL,
listName: targetListName,
CAMLViewFields: "",
CAMLQuery: '' +
'' +
'' +
'' +
'',
CAMLRowLimit: listrowlimit,
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var tdHtml = "" + PriorityFormat($(this).attr("ows_Priority_x0020_Number")); + "“; $(“#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.
Save List Order
| List Order | Edit | Priority | Top Item? | Effort/Purpose | Contract-Task Order | Work Status | Action Need Date | Action Type |
|---|
Thanks again for any help!
-
Not sure i understand the problem, but, Did you try this:
tdHtml = tdHtml + '‘;
Khalil.
‘+ ($(this).attr(“ows_Edit_x0020_Link”)).split(“, “)[1] +’
Originally posted 2013-11-19 13:17:21.