如何重新加载div

Question

I have a little problem with reloading div content. I have a form which is split in 4 steps. On the second step people are able to add items (giftcards or checks) When someone adds a new item this item is added to an array which is stored in a session. After adding the item I would like to show the item to the customer so I wanted to refresh / reload the div with the PHP function that shows the data.

<div class="kosten" id="kosten">
                <?php
                    if($session->exists('stap2')) {
                        echo $lijst->output();
                    }
                ?>
</div>

The function exists is to check if a sessions has been set. The function output is a function to output html with session data.

So what have I tried so far: First I tried to do something like:

$('#kosten').load('index.php');

This however resulted in showing me the index.php but I was back at step 1. I also tried to add some JavaScript / jQuery to show step 2 again but this also didn't help

Second thing I tried:

setInterval(function() {
                    $('#kosten').text();
                }, 3000);

Which resulted in showing me a half blank page. It wouldn't reload the bottom half of the page. And with an interval you will also see that the div is being reloaded.

Third thing I have tried is to do another post to PHP. It would than echo $lijst->output() as a return. But this gave me an array instead of html

So what I would like to do is reload the div so not the page after a button of "add item" is clicked. Is there any other way of doing this?

Thanks in advance

Answer 1

jQuery has the option of adding a selector to do what you look for:

$('#kosten').load('index.php #kosten');

Answer 2

I don't know what index.php contains, but you can try to add index.php page url instead of 'index.php' only.

$('#kosten').load('url of index.php');

Answer 3

I solved my problem with adding another $.post. There I echoed the required function

echo $lijst->output();

After that I could use that as the answer of the function which I then could use for

$('.kosten').html(answer);

Doing this solved my problem.