How to get innerHTML of a div.id using jQuery, which is updated dynamically

Question

var obj = {
  "Ethernet": "Up",
  "Ethernet": "Down",
  "USB_Dongle": "Down",
  "USB_Dongle": "Down",
  "X_BROADCOM_COM_PPTPAC": "Down",
  "wanLink": "Up"
}

function renderStatusWanLink(obj) {
  var tmp = jQuery('#WAN_Line').html();
  console.log(tmp);

  if (obj !== false) {
    jQuery('#WAN_Line').html(obj.wanLink);
  }
}

renderStatusWanLink(obj);
renderStatusWanLink(obj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table class="az-table az-table-status table table-condensed table-hover table-striped">
  <tbody>
    <tr>
      <td>WAN Status</td>
      <td>:</td>
      <td id="WAN_Line" width="49%"></td>
    </tr>
  </tbody>
</table>

I am trying to get the html/text content first from inside the div #WAN_Line. initially it will be empty. but then next time it should return me some value as it been updated. but it always returns empty.

HTML: (this is inside one table)

<tr>
    <td>WAN Status</td>
    <td>:</td>
    <td id="WAN_Line" width="49%"></td>
</tr>

Javascript:

function renderStatusWanLink(obj)
{
    var tmp = jQuery('#WAN_Line').html();
    console.log(tmp);

    if (obj !== false) {

        jQuery('#WAN_Line').html(obj.wanLink);            
    }
}

obj =

{"Ethernet":"Up",
"Ethernet":"Down",
"USB_Dongle":"Down",
"USB_Dongle":"Down",
"X_BROADCOM_COM_PPTPAC":"Down",
"wanLink":"Up"}

Can you also put your html code and function of updation of div here.? — Jekin Kalariya
– Jekin Kalariya, Commented Aug 16, 2016 at 10:20
Please also put how you try to update td value,by calling renderStatusWanLink — Jekin Kalariya
– Jekin Kalariya, Commented Aug 16, 2016 at 10:24
@JekinKalariya please assume that obj.wanLink has some data in it. as it is being populated and can be seen on browser. the obj is json format value returned from ajax call and passed to this function. — Amit Shah
– Amit Shah, Commented Aug 16, 2016 at 10:34

Jekin Kalariya · Accepted Answer · 2016-08-16 10:45:21Z

1

If all thing goes right it should work.with your given object and code , below code work perfectly for me. In below code spinet click button to change td html

<html>
<head>
<script src="js/jquery-1.7.1.min.js"></script>


<script type="text/javascript">

var obj={"Ethernet":"Up",
        "Ethernet":"Down",
        "USB_Dongle":"Down",
        "USB_Dongle":"Down",
        "X_BROADCOM_COM_PPTPAC":"Down",
        "wanLink":"Up"};
    function removeLine() {

        var tmp = jQuery('#WAN_Line').html();
        console.log(tmp);

        $('#WAN_Line').html("updated code");
    }


    function renderStatusWanLink()
    {
        var tmp = jQuery('#WAN_Line').html();
        console.log(tmp);

        if (obj !== false) {

            jQuery('#WAN_Line').html(obj.wanLink);            
        }
    }
</script>



</head>
<body>
    <div >

        <table>

            <tr>
                <td>WAN Status</td>

                <td id="WAN_Line" width="49%"></td>
            </tr>
        </table>
    </div>
    <button onclick="renderStatusWanLink()">click to change text</button>

</body>
</html>

answered Aug 16, 2016 at 10:45

Jekin Kalariya

3,5072 gold badges22 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Amit Shah Over a year ago

yes even for me in this code snippet. but not in real application. let me come back with printing obj in console.

Jekin Kalariya Over a year ago

just try to debug your object while network call and put exact value here whatever is comming from network

Amit Shah Over a year ago

found the issue, i think some id name conflict with global html elements, changing it to #WAN_Line1 works. very silly reason. .

Collectives™ on Stack Overflow

How to get innerHTML of a div.id using jQuery, which is updated dynamically

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related