CODEWITHSUNDEEP
ajaxjquery
RyanP13
RyanP13

Reputation: 7743

jQuery filtering AJAX data and then replaceWith data

I am calling pages via AJAX in jQuery.

The content of these pages needs to be filtered so that i only grab a certain DIV class. In this instance 'Section1'.

This filtered data needs to replace the same data on the current page in the DIV of the same class.

I currently have this but it is not really working for me:

$("#dialog_select").live('change', function() {

    //set the select value
    var $optionVal = $(this).val();

    //$(this).log($optionVal);

    $.ajax({
        type: "GET",
        url: $optionVal,
        dataType: "html",
        cache: false,
        success: function(data) {

            var $filteredData = $(data).filter('.Section1');

            $('.Section1').replaceWith($filteredData);
        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    });

});

Upvotes: 2

Views: 3402

Answers (2)

tbranyen
tbranyen

Reputation: 8577

This is a tricky thing to do and I would recommend placing the data into something like a DOMParser or document.implementation.createDocument or MSXML.

if (window.DOMParser) {
    parser=new DOMParser();
    xmlDoc=parser.parseFromString(text,"text/xml");
}
else {
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async="false";
    xmlDoc.loadXML(text); 
}

is a basic code example. jQuery itself can filter on a selector with the load function. http://api.jquery.com/load/ This however has several limitations such as not being able to filter on html, head, or body tags. This is why the above method is safer.

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630429

I think your problem is likely here:

var $filteredData = $(data).find('.Section1');
$('.Section1').replaceWith($filteredData);

.filter() would only find top level elements in the response (if it's a page, that's <html>, and wouldn't have any results). .find() looks for decendant elements. Also keep in mind that if you have multiple .Section1 elements, this won't behave as expected and will have some duplication going on.

Upvotes: 2

Related Questions