Question

I have a page, in which there are a couple of Option elements whose Value point to external pages. My aim is to use Ajax to extract the chosen Option’s Value & use that to load content from external pages. E.g. When a user chooses Volleyball, I will get the ‘volleyball.html’ value, use Ajax to retrieve that page and load its #catalog content into the current page. Here’s my code:

$("select").change(function(){
var selectedURL=$("option:selected",this).val();
if(selectedURL!=="Select One"){
    $("#center").html("<p class='processing'></p>");    
    $.get(selectedURL,function(data){
    var extractedContent=$("#catalog",data);
    console.log(extractedContent); //Firebug says extractedContent is '[]'
    $("#center").html(extractedContent); //Nothing is inserted inside div#content
    },"html");
}

I’m not good at jQuery, and have kind of mixed and matched code from a few posts here to derive at the above. Now I’m not sure what went wrong, but nothing is loaded – the #center div block that is supposed to hold the extracted content is empty.

Can someone please help me spot just what’s wrong with my code above? Many thanks in advance.

Answer 1

The load() method is perfect for this:

$('select').change(function () {
    var selectedURL = $('option:selected', this).val();

    if (selectedURL !== 'Select One') {
        $('#center').html('<p class="processing"></p>').load(selectedURL + ' #catalog');
    }
});

It can take only a URL, or it can take a URL followed by a selector which will only load the contents of the matched element (#catalog) into the element it is called on (#center).