CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Shawn31313
Shawn31313

Reputation: 6052

Reloading a Page (or part of a page) using JavaScript

The client I am working for is trying to make it so that his page never has to reload. Instead he just wants to use AJAX. Now I realize that the way im doing it is not a very efficient way to do it but it is the easiest and you would understand why if you would see his site..

I'm trying to get it to work so that AJAX will refresh only parts of the page or the whole page.

My code is:

<!doctype html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
        <script>
            function refresh (update) {
                $.get(location.href, function (data) {
                    console.log(data);
                    var EL = $(data).find(update);
                    var HTML = $('<div>').append(EL.clone()).html()
                    alert(HTML);
                    $(update).replaceWith(HTML);
                });
            }
        </script>
    </head>
    <body>
        <div style="font-size: 64px;">The current timestamp is <b class="time"><?php echo rand(999, 9999999); ?></b></div>
        <br><br>
        <button onclick="refresh('.time')">Refresh Time</button>
    </body>
</html>

When you first load the page PHP generates a random number. Hitting the refresh button is suppose to refresh this number. However, the same number stays there. The request returns the exact same page instead of return a page with a new number.

And again, people note that I know this is not a very efficient way to do this, but its the way i'm trying to get it to work

Am I doing something wrong? (besides requesting the whole page when only actually using part)

EDIT

You can try it out here: http://methods.x10.mx/projects/refreshPageParts.php

Upvotes: 0

Views: 916

Answers (2)

kasper Taeymans
kasper Taeymans

Reputation: 7026

I tested your example on my local wamp stack and it is working fine!

btw: you forgot semicolon after the following line (It is not necessary though) 

var HTML = $('<div>').append(EL.clone()).html();

EDIT: your code is working... also on the url you provided. The strange thing is you have to wait a few minutes before it is working. So when you visit the page and press the button, the time won't be updated... however if you wait few minutes it will... only once then you have to wait again. I bet your server is caching the page. So your problem is server side... disable the cache and it will work!!

EDIT: you also could try to make the get url dynamic with a dummy parameter like so

http://methods.x10.mx/projects/refreshPageParts.php?v=dummy

maybe you don't have to make dummy dynamic, it might work with a static variable also. i'm curious, let me know ;-)

Upvotes: -1

000
000

Reputation: 27247

Change your call to this, to break the caching:

function refresh (update) {
    $.ajax({
        type: "get",
        cache: false,
        url: location.href,
        success: function (data) {
            $(update).replaceWith($(data).find(update));
        }
    });
}

See the notes on caching in the documentation: http://api.jquery.com/jQuery.ajax/

By default, requests are always issued, but the browser may serve results out of its cache. To disallow use of the cached results, set cache to false. To cause the request to report failure if the asset has not been modified since the last request, set ifModified to true.

Upvotes: 2

Related Questions