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.

Community · Accepted Answer · 2017-05-23 12:06:24Z

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, 2017 at 12:06

CommunityBot

11 silver badge

answered Mar 5, 2015 at 9:30

hlh3406

1,3986 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Simpleacc Over a year ago

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

hlh3406 Over a year ago

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 <div id = "content">

Simpleacc Over a year ago

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)

hlh3406 Over a year ago

You can set the target by putting $ajax({ target: '#content' }); You might want to put a success condition on there as well.

hlh3406 Over a year ago

Added in a success example to the answer.

|

Praveen · Accepted Answer · 2015-03-05 09:57:31Z

0

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..

answered Mar 5, 2015 at 9:57

Praveen

861 silver badge10 bronze badges

Collectives™ on Stack Overflow

Update div content using PHP and Javascript variables

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related