jQuery filtering html elements after .load()

Question

I am loading up the contents of a php generated page which returns a list of user assets each with html structure like this:

updated to include all the dynamic generated html.

<div id='list'>
    <div id='asset12345' class='asset'>
        <div class='assetName'>Someform of asset</div>
    </div>
    // repeat .asset block as many times as needed.
</div>

What i want to be able to do once the page has displayed to the user is to filter the items when the user types into an input box.

I have this working if i just make a list in the same document but as soon as i try it on any loaded data it fails.

here is the the complete code i have so far. I have probably made a hash of it.

(function ($) {
    jQuery.expr[':'].Contains = function(a,i,m){
        return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
    };

    function listFilter(filter, list) {
                    // creates the input element.
        var form = $("<form>").attr({"class":"filterform","action":"#"}),
            input = $("<input>").attr({"class":"filterinput centered","type":"text","value":"Type To Filter"}),
        $(form).append(input).appendTo(filter);

                    // checking for the user typing
        $(input)
            .change( function () {
                var filter = $(this).val();
                if(filter) {
                    $(list).find(".assetName:not(:Contains(" + filter + "))").parent().slideUp('fast');
                    $(list).find(".assetName:Contains(" + filter + ")").parent().slideDown('fast');
                } else {
                    $(list).find(".asset").slideDown();
                }
            return false;
            })
            .keyup( function () {
                $(this).change();
        });
    }
    $(function () {
        listFilter($("#filter"), $("#list"));
    });

            // display a link for the user.
    $(".asset")
        .click( function() {
        var assid = $(this).id();
            if (assid.length > 5) { 
            var wish = "&wish=true";
        }
        $("#link_display").load("getuser.php?ass_id=" + assid + wish);
    });
}(jQuery));

$(document).ready(function(){
            // loading up the initial page
    $("#wrap").load("getuser.php");

            // just removing initial value from the input on focus
    $(".centered").focus(function(){
        if(this.value == 'Type To Filter') {
            this.value = '';
        }
    });
});

Is the #list element already present in the page, or is it loaded asynchronously? — JB Nizet
– JB Nizet, Commented Aug 24, 2013 at 11:35
it is loaded from the php file, #wrap is already on the page which it is loaded into. — CodingInTheUK
– CodingInTheUK, Commented Aug 24, 2013 at 12:08

JB Nizet · Accepted Answer · 2013-08-24 12:15:13Z

1

When the page is loaded, listFilter($("#filter"), $("#list")) is called. At this time, the #list element is not in the page yet. So, the code inside listFilter registers a change listener on the input field which will try to filter this non-existing element:

$(input).change( function () {
    var filter = $(this).val();
    if (filter) {
        $(list).find(...);
    ...

which is equivalent to

$(input).change( function () {
    var filter = $(this).val();
    if (filter) {
        list.find(...);
    ...

Instead, each time the listener is called, it should try to find the #list element in the page:

$(function () {
    // pass the ID of the element, and not the non-existing element itself
    listFilter($("#filter"), "list");
});

...

function listFilter(filter, listId) {
    $(input).change( function () {
        var filter = $(this).val();
        if (filter) {
            $('#' + listId).find(".assetName:not(:Contains(" + filter + "))").parent().slideUp('fast');
    ...

answered Aug 24, 2013 at 12:15

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

2 Comments

CodingInTheUK Over a year ago

Thank you very much, all is working again. How do i give rep?

JB Nizet Over a year ago

By upvoting the useful answers. You upvote by clicking the up triangle at the left of the answer.

Collectives™ on Stack Overflow

jQuery filtering html elements after .load()

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related