How to refresh a Div every 10 seconds without refreshing the entire page?

Question

I'm working on a website platform that doesn't allow for any server sided scripting, so jquery and javascript are pretty much all I have to work with. I am trying to create a script to work with the site that will update a div that contains an inbox message count every 10 seconds. I've been successful with making the div refresh every ten seconds, but the trouble lies in the page views count. My script is refreshing the whole page and counting for a page view, but I only want to refresh just the one div. An example of the trouble my script causes is when viewing anything on the site that has a page view counter (forum posts, blog posts, ect...), the page views go crazy because of the script refreshing. I'm pretty new to Javascript, so I'm not entirely sure there is a way around this.

What I'm working with is below:

    <div id="msgalert" style="display: none"; "width: 100px !important">
<a href=""> You have $inbox_msg_count new messages.</a>
</div>

$inbox_msg_count is a call that grabs the message count, and provided by the platform the site is on. It displays the message count automatically when used.

Then the script that does all the work is this:

    <script>
 setInterval(function(facepop){
  var x= document.getElementById("SUI-WelcomeLine-InboxNum");
var z = x.innerText;
 if(x.textContent.length > 0)
$("#msgalert").show('slow');
}, 1000);
facepop();
</script>
<script>
setInterval(function() {  
$("#msgalert").load(location.href+" #msgalert>*","");  
}, 1000); // seconds to wait, miliseconds
</script>

I realize I've probably not done the best job of explaining this, but that's because I'm pretty confused in it myself. Like I mentioned previously, this code function just how I want it, but I don't want it to refresh the entire page and rack up the page views. Any help is much appreciated.

Answer 1

You might try to look into iframe and use that as a way to update/refresh your content (div). First setup an iframe, and give it an id, then with JS grab the object and call refresh on it.

Answer 2

well your prob seems a little diff so i think submitting a from within the div might help you so ...

$(document).ready(function() 
{
            // bind 'myForm' and provide a simple callback function
               $("#tempForm").ajaxForm({
               url:'../member/uploadTempImage',//serverURL
               type:'post',
               beforeSend:function()
               {
                   alert(" if any operation needed before the ajax call like setting the value or retrieving data from the div ");
               },
               success:function(e){
                alert("this is the response data simply set it inside the div ");
               }
        });
        });

Answer 3

I think this could probably be done without a form, and definitely without iframes ( shudder )..

Maybe something like this?

$(document).ready(function()
{
  setInterval(function(facepop)
     {
        var x= document.getElementById("SUI-WelcomeLine-InboxNum");
        var z = x.innerText;

        if(x.textContent.length > 0)
           $("#msgalert").show('slow');

        $.ajax({
            type: "POST",
            url: location.href,
            success: function(msg)
             {
                $("#msgalert").html(msg);
             }
        });

     },1000);

It's not entirely clear exactly what you're trying to do (or it may just be that I'm ultra tired (it is midnight...)), but the $.ajax() call in the above is the main thing I would suggest.

Encapsulating both functions in a single setInterval() makes things easier to read, and will extinguish the 1 second gap between showing the msgalert element, and "re-loading" it.