javascript - How can I filter data returned from jQuery? - Stack Overflow

admin管理员组

文章数量:1291148

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?

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?

• javascript
• jquery
• html
• scope
• jquery-traversing

Share Improve this question Follow edited Aug 19, 2014 at 0:02 falsarella 12.4k1010 gold badges7474 silver badges118118 bronze badges asked Jul 27, 2014 at 6:31 Ankit SharmaAnkit Sharma 39622 gold badges77 silver badges2020 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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

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.

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.

You can use JQuery find instead of filter.

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

Then add to your variable like this

var your_element = $('#se2');

本文标签： javascriptHow can I filter data returned from jQueryStack Overflow