How can I filter the data returned from jQuery?

Question

JQuery Code:

$(document).ready(function() { $('#s-results').load('get_report1.php').show(); $('#search-btn').click(function(){ showValues(); }); $(function() { $('form').bind('submit', function() { showValues(); return false; }); }); function showValues() { $.post('get_report1.php', { name: form.name.value }, function(result) { $('#s-results').html(result).show(); } ); } }); 

HTML:

 <form name = "form"> <div>Enter name</div> <input type="text" name="name" id="fn" /> <input type="submit" value="Search" id="search-btn" /> <div> <input type="text" id="se2" name="search22"> </div> </form> <div id = "s-results" style="height:50px;"> </div> 

Prior to this, the script works fine. Now I just want to filter the returned HTML from the above function again.

To implement this, I tried this line of code:

 $(result).filter('#se2'); 

in a function with parameter result , but it does not work.

So how can you filter the returned HTML?

Answer 1

You probably need find() instead of filter , since you need to get a descendant, while the filter "Reduce the set of matched elements to those that match the selector or pass a function test"

Live demo

 $(result).find('#se2'); 

If #se added to the DOM , you can directly use the id selector

 se = $('#se2'); 

I did another demo (since I'm still waiting for your demo to work) to describe in more detail how the string containing the html you could pass in jQuery function $() to search for elements inside it using find.

Live demo

 html = '<form name = "form"> \ <div>Enter name</div> \ <input type="text" name="name" id="fn" /> \ <input type="submit" value="Search" id="search-btn" /> \ <div> \ <input type="text" id="se2" name="search22" value="se2"/> \ </div> \ </form>\ <div id = "s-results" style="height:50px;"> \ </div> '; alert($(html).find('#se2').val()); 

Note You can additionally check the code working in the above example, using find does not work , using filter on this jsfiddle example

Answer 2

Problem

You successfully add result to #s-results :

 $('#s-results').html(result).show(); 

And then tried to select #se2 from the added results , like this, without success:

 $(result).filter('#se2'); 

This did not work because you did not get it from the dom added in the second step.

In fact, it creates a new untethered dom with the same result variable.

---

Decision

To select #se2 from the added result content, try the following:

 $('#s-results').filter('#se2'); 

Or, as @zerkms suggested, you can select it directly through:

 $('#se2'); 

These features will work, because now it refers to what is bound to dom, which will look for the same elements that you added in the first step.

Answer 3

You can use ajax for this, as shown below:

 $(document).ready(function () { $('#s-results').load('get_report1.php').show(); $('#search-btn').click(function () { $.ajax({ type: "POST", url: "get_report1.php", data: { name: $("#fn").val() }, beforeSend: function () { //do stuff like show loading image until you get response }, success: function (result) { $('#s-results').html(result).show(); }, error: function (e) { alert("Error in ajax call " + e); } }); }); }); 

Note. . When you click on search-btn every time it calls get_report1.php and retrieves the database into the passed text field value. I assume that in the ge_report1.php file you use the tex-box value, for example: $_POST['name'] , and you retrieve the data using a MySQL search query.

Answer 4

Instead of a filter, you can use JQuery find .

 $(result).find('#se2'); 

Then add to your variable as

 var your_element = $('#se2');