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

score 1 · Accepted Answer · answered Mar 06 '13 at 23:14

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();

answered Mar 06 '13 at 23:14

Mark Schultheiss

32,614
12
69
100

Thanks. I tried this. But, it throws me an error that Workexp_Div does not exist in current context, even though it exists. – user728148 Mar 07 '13 at 16:24
I was making an error with jquery syntax. I did this instead and it gave me the value. function showDivText() { var divObj = $("#ctl00_ContentPlaceHolder1_Workexp_div"); alert(divObj.text()); return divObj.text(); } However, now I am unable to change the href value, by using $("#ctl00_ContentPlaceHolder1_Anchor_work").attr("href", new_href); – user728148 Mar 07 '13 at 16:40
so, it seems `<%= Workexp_Div.ClientID %>` might not be returning the client id? - what about `alert($("#<%= Workexp_Div.ClientID %>").attr('id'));` - note that would need to exist in the page code not external file to get the replacement server side. – Mark Schultheiss Mar 07 '13 at 16:41
Thanks again. It is still not working. For now, I am fine by using the $("#ctl00_ContentPlaceHolder1_Workexp_div") reference. Now the href is also getting changed. However, the cluetip is not working. That is, the value does not show up when I hover over it :( :( – user728148 Mar 07 '13 at 16:57
I don't know anything about the cluetip - but that seems like another quesiton. – Mark Schultheiss Mar 07 '13 at 17:02
Thanks.. I am marking your answer, as you resolved the href piece of it :) – user728148 Mar 07 '13 at 17:14

JQuery- Change href of anchor tag using value in Div

1 Answers1