Question

I make some script, that have modal window on fancybox and on load it’s fills by some content from other files. And i have some quetions:

I want to load content via ajax to my container (#dialog-analogy). But not full page – only one div with id (#get-cats). I dont know, how to get a content of id from ajax page. Thi is draft script:

function FillCats(catid) {
    $.ajax({
        url: "catalogue.php?cat="+catid+"&size=1",
            cache: false,  
            success: function(html){  
                    var getcat = $('#get-cats').html(html); // wrong
            $("#dialog-analogy").html(getcat);
            }  
    });
}

Answer 1

You’ll be glad to know that jQuery’s load function has exactly the functionality you want. You just append a selector to the end of the URL.

function FillCats(catid) {
    $("#dialog-analogy").load("catalogue.php?cat="+catid+"&size=1 #get-cats");
}

See the Loading Page Fragments section of the load documentation.

Live example using load

---

If for some reason you can’t use load, you can emulate it easily by building up the structure of what you’ve received via $() and then extracting the element(s) you want:

function FillCats(catid) {
    $.ajax({
        url: "catalogue.php?cat="+catid+"&size=1",
        cache: false,
        success: function(data) {
            $("#dialog-analogy").html($(data).find("#get-cats"));
        }
    });
}

Live example emulating load using ajax