JQuery- Change href of anchor tag using value in Div

Question

I am having an issue with changing the href value in anchor tag. Basically, I want to use a cluetip which opens a tooltip page based on the employee ID of the user who has logged in.

Cluetip Code:

    $(document).ready
    (
      function () {

          $('#sticky').cluetip({ sticky: true, closePosition: 'title', arrows: true });
          $('a.jt:eq(0)').cluetip({
              cluetipClass: 'jtip',
              arrows: true,
              dropShadow: false,
              hoverIntent: false,
              sticky: true,
              mouseOutClose: true,
              closePosition: 'title',
              closeText: '<img src="Images/cross.png" alt="close"/>'
          });

}

Now, the anchor tag is seen:

     <a class="jt" style="color: #FFFFFF;" id="Anchor_work"  runat="server" href='WorkExp.aspx?Emplid=12345'>Previous Work Experience</a>

I am trying to change the href link to point to the correct employee ID using jquery.So, I thought of storing the value of employee ID in DIV.

    <div id="Workexp_div" runat="server"/>

JQuery to change the href using DIV tag:

      $(document).ready
    (
      function () {

          $('#sticky').cluetip({ sticky: true, closePosition: 'title', arrows: true });
          $('a.jt:eq(0)').cluetip({
              cluetipClass: 'jtip',
              arrows: true,
              dropShadow: false,
              hoverIntent: false,
              sticky: true,
              mouseOutClose: true,
              closePosition: 'title',
              closeText: '<img src="Images/cross.png" alt="close"/>'
          });

          function showDivText() {

              //divObj = document.getElementById('Workexp_Div'); 
              divObj = document.getElementById("#<%= Workexp_Div.ClientID %>");
              if (divObj) {
                  if (divObj.textContent) { // FF
                      alert(divObj.textContent);
                  } else {  // IE           
                      alert(divObj.innerText);  //alert ( divObj.innerHTML );
                  }
              }
          }
          //var new_href = "WorkExp.aspx?Emplid=" + $('#ctl00_ContentPlaceHolder1_Workexp_div').InnerText;
          var new_href = "WorkExp.aspx?Emplid=" + showDivText();
          $("#Anchor_work").attr("href", new_href);
          //= 'WorkExp.aspx?Emplid='+ $('#ctl00_ContentPlaceHolder1_Workexp_div').InnerText;           


      }


    );

The above code gives me an error saying WorkExp_div does not exist in the current context. I tried by removing the Client ID by doing divObj = document.getElementById('Workexp_Div'); but then the object is returned as null.

Could anyone please let me know how to retrieve the value of div tag and change the value of href in tag?

Thanks a lot

Answer 1

If you replace:

      function showDivText() {

          //divObj = document.getElementById('Workexp_Div'); 
          divObj = document.getElementById("#<%= Workexp_Div.ClientID %>");
          if (divObj) {
              if (divObj.textContent) { // FF
                  alert(divObj.textContent);
              } else {  // IE           
                  alert(divObj.innerText);  //alert ( divObj.innerHTML );
              }
          }
      }

with:

function showDivText() {
    var divObj = $("#<%= Workexp_Div.ClientID %>");
    alert(divObj.text());
    return divObj.text();
}

does that alert and return the proper value?

IF so, then you could remove that and do:

var new_href = "WorkExp.aspx?Emplid=" +  $("#<%= Workexp_Div.ClientID %>").text();