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.

Answer 1

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);
        }
 });

Answer 2

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);
    }

});