Having Trouble Dynamically setting innerHTML data to update TDs

Page 1 of 1

5 Replies - 774 Views - Last Post: 06 November 2014 - 05:33 PM

#1 zukeru   User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 163
  • Joined: 25-December 09

Having Trouble Dynamically setting innerHTML data to update TDs

Posted 05 November 2014 - 06:00 PM

Hello,

Im trying to dynamically update <td> tags based on dynamically assigned ID's. I know my ajax will return a change in powerstate because of the output log. In the console.log it only displays status messages no error and the status messages show as it fires. However even though it will output a specific status message for a vm I'm using as a test and the powerstate will change the image for the powerstate does not change and it remains displaying off.

<script type="text/javascript">
        $(document).ready(function() {
            $("#submit").click(function() {
                    $.ajax({
                        url : "/vmstatus/", 
                        type : "POST",
                        dataType: "json", 
                        data : {
                            selected_customer : $("#selected_customer").val(),
                            csrfmiddlewaretoken: '{{ csrf_token }}'
                            },
                            success : function(json) {
                            	setInterval(update, 5000);  
                                var on = '<img src={% static "icons/on2.jpg" %}>'
                                var off = '<img src={% static "icons/off.jpg" %}>'
                            	console.log('Good');
								$('#table_name').append("<table class='sortable table' id='table-repeat-data'><thead><tr><th align='center' data-toggle='tooltip' data-placement='left' title=''> <b>VM Name</b></th><th align='center' data-toggle='tooltip' data-placement='left' title=''><b>PowerState </b> </th><th align='center' data-toggle='tooltip' data-placement='left' title='N'><b>Commands </b></th></tr></thead><tbody>");

								for (var index = 0; index < json.vmlist.length; index++) {
									if(json.vmlist[index][1] == 'poweredOn'){
										$('#table-repeat-data').append ('<tr><td id="' + json.vmlist[index][0] + '">' + json.vmlist[index][0] + '</td><td id="' + json.vmlist[index][1] + '">' + on + '</td><td id="' + json.vmlist[index][2] + '">' + json.vmlist[index][2] + '</td></tr>');
									}else{
										$('#table-repeat-data').append ('<tr><td id="' + json.vmlist[index][0] + '">' + json.vmlist[index][0] + '</td><td id="' + json.vmlist[index][1] + '">' + off + '</td><td id="' + json.vmlist[index][2] + '">' + json.vmlist[index][2] + '</td></tr>');
									}
								}

                            },
                            error : function(xhr,errmsg,err) {
                            	console.log('Bad');
                                console.log(xhr.status + ": " + xhr.responseText);
                            }
                    });
                    return false;
            });
        });
function update(){
                    $.ajax({
                        url : "/vmstatus/", 
                        type : "POST",
                        dataType: "json", 
                        data : {
                            selected_customer : $("#selected_customer").val(),
                            csrfmiddlewaretoken: '{{ csrf_token }}'
                            },
                            success : function(json) {
                                var on = '<img src={% static "icons/on2.jpg" %}>'
                                var off = '<img src={% static "icons/off.jpg" %}>'
                            	console.log('Good');
								for (var index = 0; index < json.vmlist.length; index++) {
									if(json.vmlist[index][1] == 'poweredOn'){		
										if(json.vmlist[index][0] ==	'ENKI-STR-PDNS1-TEST'){
											console.log(json.vmlist[index][1]);
										}		
										document.getElementById(json.vmlist[index][0]).innerHTML = json.vmlist[index][0];
										document.getElementById(json.vmlist[index][1]).innerHTML = on;
										document.getElementById(json.vmlist[index][2]).innerHTML = json.vmlist[index][2];
										
									}else{
										if(json.vmlist[index][0] ==	'ENKI-STR-PDNS1-TEST'){
											console.log(json.vmlist[index][1]);
										}									
										document.getElementById(json.vmlist[index][0]).innerHTML = json.vmlist[index][0];
										document.getElementById(json.vmlist[index][1]).innerHTML = off;
										document.getElementById(json.vmlist[index][2]).innerHTML = json.vmlist[index][2];
									}
								}

                                console.log( 'update!');
                            },
                            error : function(xhr,errmsg,err) {
                            	console.log('Bad');
                                console.log(xhr.status + ": " + xhr.responseText);
                            }
                    });

}        
        
</script>


Is This A Good Question/Topic? 0
  • +

Replies To: Having Trouble Dynamically setting innerHTML data to update TDs

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4303
  • View blog
  • Posts: 13,677
  • Joined: 08-June 10

Re: Having Trouble Dynamically setting innerHTML data to update TDs

Posted 06 November 2014 - 04:22 AM

some browser versions do not allow a table to be modified using .innerHTML. first you should check if that’s the case for you.
Was This Post Helpful? 0
  • +
  • -

#3 zukeru   User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 163
  • Joined: 25-December 09

Re: Having Trouble Dynamically setting innerHTML data to update TDs

Posted 06 November 2014 - 08:58 AM

I know its not the case because I was doing it before, thats why im not sure why its not working.
Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 3134
  • View blog
  • Posts: 8,931
  • Joined: 15-January 14

Re: Having Trouble Dynamically setting innerHTML data to update TDs

Posted 06 November 2014 - 11:01 AM

I'm not sure I understand the problem. The ajax response indicates that something should be updated, but it doesn't get updated?
Was This Post Helpful? 0
  • +
  • -

#5 zukeru   User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 163
  • Joined: 25-December 09

Re: Having Trouble Dynamically setting innerHTML data to update TDs

Posted 06 November 2014 - 01:27 PM

Yes my console output shows the change in state but the image doesnt change to the on variable


                                        var on = '<img src={% static "icons/on2.jpg" %}>' //these are the images that get displayed for the on and off status.
	                                var off = '<img src={% static "icons/off.jpg" %}>' 
                                     
                                        for (var index = 0; index < json.vmlist.length; index++) {
	                                    if(json.vmlist[index][1] == 'poweredOn'){    //this checks to see if it is powered on, and decides what image var to change to based on that. Only the image is not changing but the console output log will update to the correct state.
                                            if(json.vmlist[index][0] == 'ENKI-STR-PDNS1-TEST'){
	                                            console.log(json.vmlist[index][1]);
	                                        }      
	                                        document.getElementById(json.vmlist[index][0]).innerHTML = json.vmlist[index][0];
	                                        document.getElementById(json.vmlist[index][1]).innerHTML = on;
	                                        document.getElementById(json.vmlist[index][2]).innerHTML = json.vmlist[index][2];
	                                         
	                                    }else{
	                                        if(json.vmlist[index][0] == 'ENKI-STR-PDNS1-TEST'){
	                                            console.log(json.vmlist[index][1]); 
	                                        }                                  
	                                        document.getElementById(json.vmlist[index][0]).innerHTML = json.vmlist[index][0];
	                                        document.getElementById(json.vmlist[index][1]).innerHTML = off;
	                                        document.getElementById(json.vmlist[index][2]).innerHTML = json.vmlist[index][2];
	                                    }
                                         }

Was This Post Helpful? 0
  • +
  • -

#6 zukeru   User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 163
  • Joined: 25-December 09

Re: Having Trouble Dynamically setting innerHTML data to update TDs

Posted 06 November 2014 - 05:33 PM

SOLVED******

I needed to assign the vm_id to the id tag and put a distinct character that I could reference so it could find them all. This is the working code.

<script type="text/javascript">
        $(document).ready(function() {
            $("#submit").click(function() {
                    $.ajax({
                        url : "/vmstatus/", 
                        type : "POST",
                        dataType: "json", 
                        data : {
                            selected_customer : $("#selected_customer").val(),
                            csrfmiddlewaretoken: '{{ csrf_token }}'
                            },
                            success : function(json) {
                            	$('#table-repeat-data').remove();
                            	setInterval(update, 5000);  
                                var on = '<img src={% static "icons/on2.jpg" %}>'
                                var off = '<img src={% static "icons/off.jpg" %}>'
								$('#table_name').append("<table class='table' id='table-repeat-data'><thead><tr><th align='center' data-toggle='tooltip' data-placement='left' title=''> <b>VM Name</b></th><th align='center' data-toggle='tooltip' data-placement='left' title=''><b>PowerState </b> </th><th align='center' data-toggle='tooltip' data-placement='left' title='N'><b>Commands </b></th></tr></thead><tbody>");

								for (var index = 0; index < json.vmlist.length; index++) {
									if(json.vmlist[index][1] == 'poweredOn'){
										$('#table-repeat-data').append ('<tr><td id="' + json.vmlist[index][0] + '">' + json.vmlist[index][0] + '</td><td id="' + json.vmlist[index][2] + '1">' + on + '</td><td id="' + json.vmlist[index][2] + '">' + json.vmlist[index][2] + '</td></tr>');
									}else{
										$('#table-repeat-data').append ('<tr><td id="' + json.vmlist[index][0] + '">' + json.vmlist[index][0] + '</td><td id="' + json.vmlist[index][2] + '1">' + off + '</td><td id="' + json.vmlist[index][2] + '">' + json.vmlist[index][2] + '</td></tr>');
									}
								}
								var dataTable;
								dataTable = document.querySelector('#table-repeat-data');
								Sortable.initTable(dataTable);

                            },
                            error : function(xhr,errmsg,err) {
                                console.log(xhr.status + ": " + xhr.responseText);
                            }
                    });
                    return false;
            });
        });
function update(){
                    $.ajax({
                        url : "/vmstatus/", 
                        type : "POST",
                        dataType: "json", 
                        data : {
                            selected_customer : $("#selected_customer").val(),
                            csrfmiddlewaretoken: '{{ csrf_token }}'
                            },
                            success : function(json) {
                                var on = '<img src={% static "icons/on2.jpg" %}>'
                                var off = '<img src={% static "icons/off.jpg" %}>'
								for (var index = 0; index < json.vmlist.length; index++) {
									if(json.vmlist[index][1] == 'poweredOn'){			
										var get_element_id = json.vmlist[index][2] + '1';
										document.getElementById(json.vmlist[index][0]).innerHTML = json.vmlist[index][0];
										document.getElementById(get_element_id).innerHTML = on;
										document.getElementById(json.vmlist[index][2]).innerHTML = json.vmlist[index][2];
									}else{
										var get_element_id = json.vmlist[index][2] + '1';									
										document.getElementById(json.vmlist[index][0]).innerHTML = json.vmlist[index][0];
										document.getElementById(get_element_id).innerHTML = off;
										document.getElementById(json.vmlist[index][2]).innerHTML = json.vmlist[index][2];
									}
								}

                            },
                            error : function(xhr,errmsg,err) {
                            	console.log('Bad');
                                console.log(xhr.status + ": " + xhr.responseText);
                            }
                    });

}        
        
</script>

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1