title: Getting a hyperlink field/column to display data as a hyperlink from a SharePoint List, using JavaScript and jQuery
body: <p>I have what I think should be a simple issue to resolve, but it has taken me way too long to figure out.</p>
  
  <p>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>
  
  <p>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>
  
  <p>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>
  
  <p><strong>Here is the CAML query, looking at the data from the list:</strong></p>
  
  <pre><code>function loadPrioritizedList() {
      $("#tasksUL").empty();
  // TDs below have to be 3 more width than the headers 
      $().SPServices({
          operation: "GetListItems",    
          webURL: myURL,
          listName: targetListName,
          CAMLViewFields: "&lt;ViewFields&gt;&lt;FieldRef Name='Priority_x0020_Number' /&gt;&lt;FieldRef Name='Edit_x0020_Link' /&gt;&lt;FieldRef Name='Priority' /&gt;&lt;FieldRef Name='Top_x0020_Item_x003f_' /&gt;&lt;FieldRef Name='Purpose' /&gt;&lt;FieldRef Name='Work_x002d_Task_x0020_Order' /&gt;&lt;FieldRef Name='Work_x0020_Status' /&gt;&lt;FieldRef Name='DueDate' /&gt;&lt;FieldRef Name='Task_x0020_Type' /&gt;&lt;/ViewFields&gt;",
          CAMLQuery: '&lt;Query&gt;' +
          '&lt;OrderBy&gt;' +
          '&lt;FieldRef Name="Priority_x0020_Number" /&gt;' +
          '&lt;/OrderBy&gt;' +
          '&lt;/Query&gt;', 
          CAMLRowLimit: listrowlimit,  
  </code></pre>
  
  <p><strong>And here is where I am using the data:</strong>  </p>
  
  <pre><code>     CAMLRowLimit: listrowlimit,  
              completefunc: function (xData, Status) {
                  $(xData.responseXML).SPFilterNode("z:row").each(function() {
                      var tdHtml = "&lt;tr class='sortable_row' id=" + $(this).attr("ows_ID") + "&gt;";
                      tdHtml = tdHtml + "&lt;td style=\"width:40px;\"&gt;" + PriorityFormat($(this).attr("ows_Priority_x0020_Number"));  + "&lt;/td&gt;";
  tdHtml = tdHtml + "&lt;td style=\"width:40px;\"&gt;" + ($(this).attr("ows_Edit_x0020_Link")).split(", ")[1] + "&lt;/td&gt;"; 
   tdHtml = tdHtml + "&lt;td style=\"width:46px;\"&gt;" + $(this).attr("ows_Priority") + "&lt;/td&gt;";
  tdHtml = tdHtml + "&lt;td style=\"width:40px;\"&gt;" + TopItem($(this).attr("ows_Top_x0020_Item_x003f_")) + "&lt;/td&gt;";
  tdHtml = tdHtml + "&lt;td style=\"width:300px;\"&gt;" + StringChk($(this).attr("ows_Purpose")) + "&lt;/td&gt;";
   tdHtml = tdHtml + "&lt;td style=\"width:125px;\"&gt;" + StringChk($(this).attr("ows_Work_x002d_Task_x0020_Order")) + "&lt;/td&gt;";    
  tdHtml = tdHtml + "&lt;td style=\"width:150px;\"&gt;" + StringChk($(this).attr("ows_Work_x0020_Status")) + "&lt;/td&gt;";
  tdHtml = tdHtml + "&lt;td style=\"width:100px;\"&gt;" + FormatDate($(this).attr("ows_DueDate")) + "&lt;/td&gt;";
  tdHtml = tdHtml + "&lt;td style=\"width:75px;\"&gt;" + StringChk($(this).attr("ows_Task_x0020_Type")) + "&lt;/td&gt;";
   tdHtml = tdHtml + "&lt;/tr&gt;";
                      $("#tasksUL").append(tdHtml);
  </code></pre>
  
  <p><strong>The data element that needs to be a hyperlink is:</strong>   <code>&lt;FieldRef Name='Edit_x0020_Link' /&gt;</code> </p>
  
  <p>I was thinking I would have to format as a link here: </p>
  
  <pre><code>tdHtml = tdHtml + "&lt;td style=\"width:40px;\"&gt;" + ($(this).attr("ows_Edit_x0020_Link")).split(", ")[1] + "&lt;/td&gt;"; 
  </code></pre>
  
  <p>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>
  
  <p><strong>Here is the full code from the whole .js file:</strong></p>
  
  <pre><code>&lt;link href="../SiteAssets/jquery-ui.custom.css" rel="stylesheet" type="text/css"/&gt;
  &lt;style type="text/css"&gt;
      #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;                        
      }
  &lt;/style&gt;
  &lt;script language="javascript" src="../SiteAssets/jquery-1.8.3.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script language="javascript" src="../SiteAssets/jquery-ui-1.9.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script language="javascript" src="../SiteAssets/jquery.SPServices.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  
  &lt;script language="javascript" type="text/javascript"&gt;
  
      //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 "&amp;nbsp;";
          else
              return item;
      }
  
      function FormatDate(item) {
          if (typeof item === 'undefined')
              return "&amp;nbsp;";
          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: "&lt;ViewFields&gt;&lt;FieldRef Name='Priority_x0020_Number' /&gt;&lt;FieldRef Name='Edit_x0020_Link' /&gt;&lt;FieldRef Name='Priority' /&gt;&lt;FieldRef Name='Top_x0020_Item_x003f_' /&gt;&lt;FieldRef Name='Purpose' /&gt;&lt;FieldRef Name='Work_x002d_Task_x0020_Order' /&gt;&lt;FieldRef Name='Work_x0020_Status' /&gt;&lt;FieldRef Name='DueDate' /&gt;&lt;FieldRef Name='Task_x0020_Type' /&gt;&lt;/ViewFields&gt;",
              CAMLQuery: '&lt;Query&gt;' +
              '&lt;OrderBy&gt;' +
              '&lt;FieldRef Name="Priority_x0020_Number" /&gt;' +
              '&lt;/OrderBy&gt;' +
              '&lt;/Query&gt;', 
              CAMLRowLimit: listrowlimit,  
              completefunc: function (xData, Status) {
                  $(xData.responseXML).SPFilterNode("z:row").each(function() {
                      var tdHtml = "&lt;tr class='sortable_row' id=" + $(this).attr("ows_ID") + "&gt;";
                      tdHtml = tdHtml + "&lt;td style=\"width:40px;\"&gt;" + PriorityFormat($(this).attr("ows_Priority_x0020_Number"));  + "&lt;/td&gt;";
  tdHtml = tdHtml + "&lt;td style=\"width:40px;\"&gt;" + ($(this).attr("ows_Edit_x0020_Link")).split(", ")[1] + "&lt;/td&gt;"; 
   tdHtml = tdHtml + "&lt;td style=\"width:46px;\"&gt;" + $(this).attr("ows_Priority") + "&lt;/td&gt;";
  tdHtml = tdHtml + "&lt;td style=\"width:40px;\"&gt;" + TopItem($(this).attr("ows_Top_x0020_Item_x003f_")) + "&lt;/td&gt;";
  tdHtml = tdHtml + "&lt;td style=\"width:300px;\"&gt;" + StringChk($(this).attr("ows_Purpose")) + "&lt;/td&gt;";
   tdHtml = tdHtml + "&lt;td style=\"width:125px;\"&gt;" + StringChk($(this).attr("ows_Work_x002d_Task_x0020_Order")) + "&lt;/td&gt;";    
  tdHtml = tdHtml + "&lt;td style=\"width:150px;\"&gt;" + StringChk($(this).attr("ows_Work_x0020_Status")) + "&lt;/td&gt;";
  tdHtml = tdHtml + "&lt;td style=\"width:100px;\"&gt;" + FormatDate($(this).attr("ows_DueDate")) + "&lt;/td&gt;";
  tdHtml = tdHtml + "&lt;td style=\"width:75px;\"&gt;" + StringChk($(this).attr("ows_Task_x0020_Type")) + "&lt;/td&gt;";
   tdHtml = tdHtml + "&lt;/tr&gt;";
                      $("#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 = "&lt;Method ID='1' Cmd='Update'&gt;";
          var msgend = "&lt;/Method&gt;";
          var updatestart = "&lt;Batch OnError='Continue'&gt;";
          var updateend = "&lt;/Batch&gt;";
          // 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 + "&lt;Field Name='Priority_x0020_Number'&gt;" + total + "&lt;/Field&gt;";
              var itemId = $(this).attr("id");
              updatemsg = updatemsg + "&lt;Field Name='ID'&gt;" + itemId + "&lt;/Field&gt;";
              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 &gt; 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');
      });
  &lt;/script&gt;
  
  &lt;div id="msgid"&gt;Drag rows to new position to change List Order.&lt;/div&gt;
  &lt;br/&gt;&lt;a id="saveLink" onclick="saveListOrder();" href="#"&gt;Save List Order&lt;/a&gt; &lt;br/&gt;
  &lt;br/&gt;
  
  &lt;!-- Make the widths 3 pixels smaller than the column widths because of styling --&gt;
  &lt;div id="scroll2"&gt;
  &lt;div class="listtable_hdr" width="100%"&gt;
  &lt;table width="975px"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class="contents_header" style="width:37px;"&gt;List Order&lt;/th&gt;
              &lt;th class="contents_header" style="width:42px;"&gt;Edit&lt;/th&gt;
              &lt;th class="contents_header" style="width:42px;"&gt;Priority&lt;/th&gt;
              &lt;th class="contents_header" style="width:37px;"&gt;Top Item?&lt;/th&gt;
              &lt;th class="contents_header" style="width:297px;"&gt;Effort/Purpose&lt;/th&gt;
              &lt;th class="contents_header" style="width:122px;"&gt;Contract-Task Order&lt;/th&gt;
              &lt;th class="contents_header" style="width:147px;"&gt;Work Status&lt;/th&gt;
              &lt;th class="contents_header" style="width:97px;"&gt;Action Need Date&lt;/th&gt;
              &lt;th class="contents_header" style="width:72px;"&gt;Action Type&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;div id="scrolldiv" class="listtable" style="height:500px;width:995px;"&gt;
  &lt;table width="975px" &gt;
      &lt;tbody id="tasksUL" &gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="savemsg"&gt;&lt;/div&gt;
  &lt;div id="Dialog" title="Loading..." style="display:none;text-align:center;padding-top:20px;"&gt;&lt;img src="../SiteAssets//LoadingAnimationBlue.gif" /&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Thanks again for any help!</p>