How to do live update on section of page?

Question

I need to refresh sections of my page to update when there is new data! what do i do? use jquery?

examples:

Answer 1

jQuery is usually not needed for basic AJAX. A simple example could be as follows:

liveSection = document.getElementById('latest-news');
request = new XMLHttpRequest;
request.open('GET', '/news-ajax', true);
request.send(null);
request.addEventListener('readystatechange', function() {
  if (request.readyState == 4 && request.status == 200)
    liveSection.innerHTML = request.responseText;
}, false);

Answer 2

Yes, jQuery's great for this. Look into these methods: http://api.jquery.com/category/ajax/

Answer 3

If you're using Asp.NET, why not use an UpdatePanel? It's simple and reliable.

Edit

I just re-read your question and it looks (based on how you worded it) that you want to update a user's web page when the data changes on the server. I just want to make sure you understand that in a web app, the server can't trigger the browser to do anything. The server can only respond to browser requests, so you'll need to have the browser poll the server periodically.

Answer 4

I've created a simple example (using jQuery) to help you understand the breakdown of the things that will need to happen, which are:

1 - Periodically polling the server (via ajax) using Javascript's setTimeout to check that what is loaded into the browser is the latest content. We can achieve this by fetching the latest item ID or whatever and comparing it to a variable, which was initialised when the page first loaded.

2 - If the item ID does not match (a bit of an oversimplification) then we can assume that there has been an update, so we replace the content of some element with some content from some page.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<script>
    function getLatestStuff() {

        // fetch the output from a context which gives us the latest id
        $.get("isthereanupdate.aspx", function(response) {

            // we have the response, now compare to the stored value
            if(resp != lastItemId) {

                // it's different, so update the variable and grab the latest content
                lastItemId = response;
                $("#latestStuffDiv").load("updates.aspx");
            }
        });
    }

    $(document).ready(function() {

        // the value which initializes this comes from the server
        var lastItemId = 7; 
        setTimeout(getLatestStuff, 10000);
    });
</script>

Answer 5

If you want to update when there is new data, you should look into comet or pubsubhubbub. jQuery can help you display the data in a pretty way, but you'll need to write stuff on the serverside to send the data.