Update div content using PHP and Javascript variables

Question

I'm new to Ajax and need some help with this.

The idea is simple, I have a list of directories within the div 'list' and when I click on one of the directories, the div 'content' must list the content of this directory with a php function.

This is my html code:

<div id="list">
    <ul>
        <li id="directory_1" class="test">directory_1</li>
        <li id="directory_2" class="test">directory_2</li>
        <li id="directory_3" class="test">directory_3</li>
        <li id="directory_4" class="test">directory_4</li>
    </ul>
</div>
<div id="content">
    <!-- Here you can see the folder content-->
</div>

This my jQuery + Ajax:

$(".test").click(function(){
    var name = $(this).attr("id");

     $.ajax({
            url: 'list.php',
            type: "POST",
            data: ({folder: name}),
        }); 
});

It works, I arrive to list.php. And on PHP I have a function that lists directory content.

So how can I refresh 'content div' with the php function?

So if I click on directory_1 it will show /var/www/pg/directory_1 folders, and then if I click on directory_2 it will clear the 'content' div and will then list out the directory_2 folders.

Here is a jsfidde without the PHP code:

http://jsfiddle.net/e5v1dgpc/

Sorry for my English, if someone has a question I will try to clarify.

score 1 · Accepted Answer · edited May 23 '17 at 12:06

1

You could do something like this:

jQuery('#content').html('');

Which will just set everything inside the html to be blank.

Or I think you could use .empty() - http://api.jquery.com/empty/

If you called it at the start of your function then it should clear the div before repopulating it.

$(".test").click(function(){
    var name = $(this).attr("id");
    $( "#content" ).empty();
    $.ajax({
        url: 'list.php',
        type: "POST",
        data: ({folder: name}),
    }); 
});

In order to set the target of your ajax you could do something like this with a success condition. You'd need to change it to display whatever content you want.

$.ajax({
    url: 'list.php',
    type: 'POST',
    success: function(html) {
        var divSuccess = $('#content', $(html)).addClass('updated');
        $('#content').html(divSuccess);
    }
});

This link might also be useful to you - jquery ajax load certain div

edited May 23 '17 at 12:06

Community

1
1

answered Mar 05 '15 at 09:30

hlh3406

1,382
5
29
46

The empty clear #content div, but the ajax code will use "#content" as target? On my php function (list.php) only have
with the content of the directory.

Simpleacc

Mar 05 '15 at 09:35

The code above won't alter the ajax code, the .empty is before the ajax call surely? I thought that you wanted to clear everything inside of the

– hlh3406 Mar 05 '15 at 09:38

Yes, I want to clear #content, and empty() will do it :D but... How can I execute Ajax query on #content div? (As 'target' tag) – Simpleacc Mar 05 '15 at 09:41

You can set the target by putting $ajax({ target: '#content' }); You might want to put a success condition on there as well. – hlh3406 Mar 05 '15 at 09:47

Added in a success example to the answer. – hlh3406 Mar 05 '15 at 09:53

Okay, I'll try when I back to home and comment you. Thanks – Simpleacc Mar 05 '15 at 10:39

score 0 · Answer 2 · answered Mar 05 '15 at 09:57

Instead of Emptying the 'content' div initially, you can empty it
OnSuccess of the Ajax post, as below:

$(".test").click(function(){  

    var name = $(this).attr("id");    

    $.ajax({  
    url: 'list.php',  
    type: "POST",  
    data: ({folder: name}),  
    success: function(){
              $( "#content" ).empty();
             }
    });   
});

Hope this is what you are looking for..

Update div content using PHP and Javascript variables

2 Answers2