How to send post to PHP by AJAX and load specific div

Question

I am building a filter function in ajax and php (I am new to ajax). I have an html input like this:

<form>
    <input type="text" placeholder="Search" onkeyup="getListSearch(this.value)" name="search_filter">
</form>

The current function getListSearch looks like this

function getListSearch(filter) {    
    $.ajax({
        method  : "POST",
        url     : "www.example.com/includes/content.php",
        data    : {
            search_filter: filter
        },
        success : function(result) {
            $("#list_content").html(result);
        }
    });
}

This works but loads the whole result, I only want to show the div with class .list_content from content.php. I tried the below codes

$("#list_content").html($(result).find('.list_content'));
// Tried below also
$("#list_content").load(result + " .list_content");

But no success. Any help would be appreciated.

Does this answer your question? [jQuery Ajax POST example with PHP](https://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php) — UfguFugullu, Jul 23 '20 at 06:53
Can you share response (result) of ajax? is it json or plain text? — RahulN, Jul 23 '20 at 06:53
depends on the server response, if the response of the server is a complete html markup including the data inside, then you could just `.html(response)` it outright, if it's a json response, then you need to create the markup (if needed), parse the data inside the success block, then use `.html()` — Kevin, Jul 23 '20 at 06:56
@RahulN I don't know, I suppose it's plain text but I don't know how to check. — soliver, Jul 23 '20 at 06:57
You can console log it. ``` function getListSearch(filter) { $.ajax({ method : "POST", url : "www.example.com/includes/content.php", data : { search_filter: filter }, success : function(result) { console.log(result); $("#list_content").html(result); } }); } ``` — RahulN, Jul 23 '20 at 07:00
please show your `www.example.com/includes/content.php` code. — KUMAR, Jul 23 '20 at 07:19

score 0 · Answer 1 · answered Jul 23 '20 at 07:11

0

function getListSearch(filter) {    
    $.ajax({
        method  : "POST",
        url     : "www.example.com/includes/content.php",
        data    : {
            search_filter: filter
        },
        success : function(result) {
            var dom_nodes = $($.parseHTML(result));
            $("#list_content").html(dom_nodes.find('.list_content').html());
        }
    });
}

answered Jul 23 '20 at 07:11

RahulN

218
1
5

what is `dom_nodes`? – KUMAR Jul 23 '20 at 07:22
It's just variable, document object model nodes. – RahulN Jul 23 '20 at 10:27

score 0 · Answer 2 · answered Jul 23 '20 at 08:52

Thanks for the response, this worked for me:

        function getListSearch(filter) {

        $('#list_content').load('www.example.com/includes/content.php #list_content', {
            search_filter: filter //Post for content.php
        });

    }

How to send post to PHP by AJAX and load specific div

2 Answers2