How to select a div from Ajax Response using Prototype JS

Question

I am trying the following code, but still I didn't get any success.

var myAjax = new Ajax.Request(
    url,
    {
        method: 'post',
        onException: function (xhr, e)
        {
            alert('Exception : ' + e);
        },
        onComplete: function (xhr)
        {
            var myHtml = xhr.responseText;

            // alert(myHtml);

            var myContent = $(myHtml).select("div#product-options-wrapper");

            alert(myContent);
        }
 });

Please help. Thanks in Advance.

does the var myHtml already contain a '.' or a '#' at the beginning of the string? Could you provide a jsfiddle example? — Mark Rijsmus, May 15 '14 at 11:36
The var myHtml contains whole page as response. From where I need to extract a div with id **#product-options-wrapper**. — aforankur, May 15 '14 at 11:43

score 2 · Accepted Answer · answered May 15 '14 at 15:14

because the HTML is a string - like others have mentioned try adding it to a container div and then getting the elements you want out of it. FYI the select() will return an array of elements that match the selector so if you only want the specific <div> use the down() method which will return the first one.

var myAjax = new Ajax.Request(
    url,
    {
        method: 'post',
        onException: function (xhr, e)
        {
            alert('Exception : ' + e);
        },
        onComplete: function (xhr)
        {
            var myHtml = xhr.responseText;

            // alert(myHtml);

            var myContent = new Element('div').update(myHtml);

            myContent = myContent.down("div#product-options-wrapper");

            alert(myContent);
        }
 });

score -2 · Answer 2 · answered May 15 '14 at 12:23

myHtml is still a string object ... I guess you should add it to the DOM then you can select whatever

var myAjax = new Ajax.Request(
url,
{
    method: 'post',
    onException: function (xhr, e)
    {
        alert('Exception : ' + e);
    },
    onComplete: function (xhr)
    {
        var myHtml = xhr.responseText;

        // alert(myHtml);

        /***** append your html to any container in the document ***/

        var myContent = $(myHtml).select("div#product-options-wrapper");

        alert(myContent);
    }

});

How to select a div from Ajax Response using Prototype JS

2 Answers2