reload an specific div without refresh whole page-CodePudding

I want to reload just an specific div. I searched and read some similar questions too. What I made is below. What is wrong with my code that does not refresh the div ?

<html>
    <body>
        <div id="reloadable">
            <?php include 'rand.php'; ?>
        </div>
        <button  onclick="refreshDiv();"> refresh </button>
        
        <script type="text/javacript">
            function refreshDiv()
            {
                $('#reloadable').load(location.href   ' #reloadable');
            }
        </script>
    </body>
</html>

<?php

$a= rand(0,10);
echo $a;

?>

CodePudding user response：

The problem is that you're returning an entire HTML document when you use location.href as the URL. The documentation warns:

jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as <html>, <title>, or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.

Since you're returning the <html> element, this is being filtered out, so there's nothing to insert into #reloadable.

Instead, you could load directly from rand.php:

function refreshDiv()
{
    $('#reloadable').load('rand.php');
}

CodePudding user response：

Please use Barmar's suggested way to do it, but make sure you have included jquery.js in your page.

Hence, for the calling page (e.g. testSO13Feb2022.php)

<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>

<html>
    <body>

<div id="reloadable"><?php include "rand.php"; ?></div>
<button  onclick="javascript:refreshDiv();"> refresh </button>
        
<script>
function refreshDiv() {
$('#reloadable').load("rand.php");
}

</script>

    </body>
</html>

and for the rand.php (same as your original code):

<?php

$a= rand(0,10);
echo $a;

?>

You may visit the following page to see a fully working page:

http://www.createchhk.com/SO/testSO13Feb2022.php

Please try again, and if you solved your problem, please mark Barmar's answer as CORRECT. Thanks

CodePudding user response：

With the pure respect to all friends that helped me specially Barmar and Ken lee, I can not accept Barmar's answer as correct answer. Because Barmar said $('#reloadable').load(location.href ' #reloadable'); can not run properly and mentioned some reasons. But I added

<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>

from Ken lee's answer and also added onclick="javascript:refreshDiv() to my original code attached to main question and it worked. So the following code is working

<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>

<html>
    <body>

        <div id="reloadable"><?php include "rand.php"; ?></div>
        <button  onclick="javascript:refreshDiv();"> refresh </button>
        
        <script>
            function refreshDiv() {
            $('#reloadable').load(location.href   ' #reloadable');
            }
        </script>

    </body>
</html>