Question about the AJAX Get Function

[programmer12]

I have a question about the AJAX Get Function: How do we use the AJAX get function to call a php script every ten seconds and place the information on the website and it can still be copied and paste without refreshing.

I created a script that calls the php page, the php page contains script that have input boxes but everytime I try to write in those input boxes the message goes away every ten seconds.

Is there a way to have the ajax call the script but place the text on the page permanently instead of refreshing to grab new data?

Thanks (Let me know if more information needs to be provided)

[Taywin]

Hmm... Have you implemented an ajax call yet? I mean just one ajax call to replace certain data on the page. If you could do it even once, then it is easy to implement the auto-call using setTimeout() at the end of the success call portion. An example of ajax with php can be found here.

[programmer12]

Yes, I have the codes created. Example below:

Javascript

<script type="text/javascript">
    $(document).ready(function()
    {

        function update_div()
        {
            $('#loadingDiv')
                .hide()  // hide it initially
                .ajaxStart(function() {
                    $(this).show();
                })
                .ajaxStop(function() {
                    $(this).hide();
                });


    var refreshId = setInterval( function() 
    {
        var r = (-0.5)+(Math.random()*(1000.99));
        $('#newer').load('ajax-refresh.php?'+r);
        $('#newer').fadeIn('slow');
        $('#older').load('ajax-refresh-old.php?'+r);


    }, 1000);
        }
        update_div();

        function notifications()
        {
            var notify = setInterval( function() 
            {
                //Keep from caching
                var rand = (-0.5)+(Math.random()*(1000.99));
                $('.notify').fadeIn('slow').load('status-update.php?'+rand);
                $('.notify').delay(5000).fadeOut('slow');
                $('.notify').delay(2000)
            }, 1000);

        }

        notifications();

    });
</script>

HTML

<div class="notify">

</div>
<div id="loadingDiv">
<img height="15" src="ajax-loader.gif" />
</div>

<div id="newer">

</div>
<div id="older">

</div>

But the problem that I am having is it loads the contents from the external page but it refreshes the contents every second, I would like for it to just place the newest update but do a sort of append. Where the text is new but it stays put.

Because at the moment, when the older news comes in and i try to type in the input box my information that I had typed in the input is gone every second or ten seconds =/

How do I fix that problem?

[Taywin]

Lines 25 & 38, you set the time to be 1,000 milliseconds which is equal to 1 second.

I believe you can customize the load() function of JQuery by passing another function inside (look at the 2nd argument from the complete). You should be able to do the before(), after(), or append() the new content to a specific element you want from there.

[programmer12]

Ok cool. I just created an test page to see how the append works. It seems to work good but the only problem I have now is that my timeago script isnt refreshing (TimeAgo - 1 second ago, 3 minitues ago...etc).

Also another issue that I ran into is, the append is multiplying rather than posting once.

Question: Is there a way to get the timeago only part to refresh?

[programmer12]

Okay I was able to find a script to keep the TimeAgo working and updating. Thanks for all your help. =)

[programmer12]

I went ahead and used .after to append all data from external file right above each other in descending order. Thanks again Taywin!