How do I refresh a div with AJAX without refreshing the whole page?

Question

I am trying with this JS:

        function refresh () { 
        $.ajax({
            url: window.location.href,
            success: function(data) {
                $('.torefreshdiv').html(data);
            }
        });
    }

But this is loading the whole page inside the div, but i would like to refresh only the '.torefreshdiv'.
I thank everyone who helps me in advance.

Your `success` function *will* update only that class -- when you get valid data returned. Right now you have no data, and the `url` is the current page, so nothing is happening except refreshing the page. — wazz, Sep 14 '19 at 20:32
use [load()](https://api.jquery.com/load/) or parse out the element from data `$('.torefreshdiv').html($(data).find('.torefreshdiv').html());` etc — Lawrence Cherone, Sep 14 '19 at 20:34
@RobMac since code shown is working then it is clearly a class — charlietfl, Sep 14 '19 at 20:45
Possible duplicate of [Reload a DIV without reloading the whole page](https://stackoverflow.com/questions/18799579/reload-a-div-without-reloading-the-whole-page) — b4hkid, Sep 14 '19 at 20:58
@charlietfl that is the assumption, but what if it’s an ID and that’s the issue? Always good to clarify — RobMac, Sep 19 '19 at 18:24

score 0 · Accepted Answer · answered Sep 14 '19 at 20:55

You can create another resource for the content of the <div> to refresh (that can be another php script if using PHP, or the same script as the whole page but with some params...). Then:

function refresh () {
  $.ajax({
    url: '/div/to/refresh.php',
    success: function(data) {
      $('.torefreshdiv').html(data);
    }
  });
}

How do I refresh a div with AJAX without refreshing the whole page?

1 Answers1