Javascript .innerHTML

[imchivaa]

Hi,

I have a simple problem here but i have no idea how i can do it with javascript.
I have a php script which will grab data from database from time to time (Server Sent Events) and i use ajax to display those data without refreshing the page.

I also use ajax to write it to a div container but the problem is, when there is 1 new data inserted into the db, the javascript will print

data1 : this is data 1

and when there is another data came in after few seconds, it will display it like this :

data1 : this is data 1
data2 : this is data 2

what i want is to show the data2 first and then follow up by data 1. I want the new data to shwo first, is like how we do in sql ORDER BY something DESC

Is this posible?
Thanks in advance! If wanna see my code, do ask me as i will provide it here. Thanks again. :)

[diafol]

Yes it's possible. SHow your code - please just the relevant stuff, we don't need all the html and css/styling. So the js code and the db retrieval code

[imchivaa]

Hi diafol,

Thanks for your interest, this is the Server Sent Event :

if(typeof(EventSource)!=="undefined") {
  //create an object, passing it the name and location of the server side script
  var eSource = new EventSource("db_polling");
  //detect message receipt
  eSource.onmessage = function(event) {
    //write the received data to the page
    document.getElementById("serverData").innerHTML += "<li class='child'>" + event.data + "</li>";

  };
}
else {
  document.getElementById("serverData").innerHTML="Whoops! Your browser doesn't receive server-sent events.";
}

As you see, it will retrieve the data which will be shown in the 'serverData' div by this "db_polling" where it map to a php file. So now when we already retrieve 1 data from the db_polling and if the user doesn't reload the page and there is another new data, it will send it in as well but it will be below the previos data as i mentioned above. I want the new data to be write above the old data. I am using CodeIgniter framework by the way. If anyone need any more codes, i can provide it here. Hope i provide enough info for you to help me, thanks :)

[urtrivedi]

try to get jquery. append function, it wil add to exiting content

[imchivaa]

According to W3Schools's tutorial on Jquery append Click Here, when you click append list item, you can see the new item is added at the end of the list? I am also having the same thing working on my site right now. Instead of adding it at the end of the list, is there anyway to add them on top of the list?

Thanks

[urtrivedi]

you can swap i think,change syntax accordingly pls

var savevalue=document.getElementById("serverData").innerHTML;


document.getElementById("serverData").innerHTML = newvalue;

document.getElementById("serverData").append(savevalue);

[imchivaa]

Alright, i get the concept, so basically have to take the previous data and then display the new data follow by append the previous data so it will be at below the new data? Right?

[urtrivedi]

yes

[imchivaa]

hi urtrivedi,

Thanks for your reply and yeah, i get the concept right, below is my code and i got it working fine :)

eSource.onmessage = function(event) {
    //write the received data to the page
    var previous_message = document.getElementById("serverData").innerHTML;

    document.getElementById("serverData").innerHTML = "";
    document.getElementById("serverData").innerHTML += "<li class='child'>" + event.data + "</li>" + previous_message;
  };

Thanks a lot for the concept. :D