How can I filter 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>

Up to this the script is running perfectly. Now I just want to filter the returned HTML from the above function again.

For implementing this I have tried this line of code:

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

under the function with the result parameter, but it is not working.

So how can the returned HTML code be filtered?

Cottony

Answer 1

You probably need find() instead of filter as you need to get the descendant whereas filter "Reduce the set of matched elements to those that match the selector or pass the function's test"

Live Demo

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

If the #se is added in DOM then you can directly use the id selector

se = $('#se2');

I made another demo (as I am still waiting for your demo that is not working) to further elaborate how a string containing the html you have could be passed to jQuery function $() to search elements within 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 further check the code working in the example above by using find wont work by using filter over this jsfiddle example

St

Why not just $('#se')? – Percent

Yes it could be used. – St

Thanx fr ur suggestion, i hv tried find() instead of filter bt still is not working the way i want.....i hv one que. that for finding any text in returned html , is there any need of event to be fired like onclick event or onkeyup....?? – Cottony

Please check demo over here or make a fiddle? – St

Data returned from jquery is in table format.....i just want way so that i can again filter or find any text in that data table....returned from jquery and php.... – Cottony

Can you make a fiddle? – St

Answer 2

The issue

You are successfully adding the result to #s-results:

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

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

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

It didn't work because you didn't get it from the dom added in the second step.

Actually, it is creating a new unattached dom with the same result variable.

---

The solution

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

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

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

$('#se2');

These possibilities will work, because now it is referencing something attached to dom, which will search into the same elements you added in the first step.

Pontius

Answer 3

You can try to use ajax for this as 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 each time it will call the get_report1.php file and retrieve the data base on the text-box value that you have passed. I assume that in ge_report1.php file you are using the tex-box value like: $_POST['name'] and you are fetching the data using MySQL search query.

Insectivorous

Answer 4

You can use JQuery find instead of filter.

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

Then add to your variable like this

var your_element = $('#se2');

Vermilion