How to check for existing .class in a response text in jquery

Question

Hi Guys,

I have got below JQuery where I am performing the .load function.

$(".load-fragment").each(function()         
        {          
            var $objThis = $(this);
            var fname = $objThis.attr("href"); //Getting the href of the element
            var dynDivID = "divContent"+ $objThis.attr("id");  //Name of the dynamic div ID
            var newDiv = $("<div>").attr("id",dynDivID)
            .load(fname+ " #tab-container", {pupdate:"true"},function(response, status, xhr) 
            {
                if ( $(response+".formContainer").length) 
                {
                    $objThis.removeClass('load-fragment');                                                    
                }     
                if (status == "error") 
                {               
                    newDiv.removeClass('dynDiv');
                    newDiv.addClass('errorDiv');
                }
            })//Loading page fragment from the given link
            .hide()//Hiding all the newly created DIVs
            .addClass('dynDiv')//Adding CSS to newly created Dynamic Divs
            .append($('<img/>').attr({ src: '/system/Images/ajax-loader-circle-thickbox.gif', alt: '', style:'margin:50px 0px 50px 185px' }));//Adding the loading.gif file
            $("#container-4").append(newDiv);//adding new div in div column2
        }); 

In a .load function above, I am trying to load page fragment from the linked page. I am getting the response in a below html format.

<div class="tabs-container" id="tab-container">
    <div class="contentContainer">
        <div class="contentContainer">
            <p>
                Book your New Delhi flights with Emirates and experience our award-winning service
                flying direct to Australia's most iconic city.</p>
        </div>
    </div>
    <div class="formContainer">
        <p>Testing</p>
    </div>
</div>

Now I want to check in response text whether there formContainer class exists inside the response or not and then perform certain work. Below is the code I am trying but it is not working for me.

 .load(fname+ " #tab-container", {pupdate:"true"},function(response, status, xhr) 
                {
                    if ( $(response+".formContainer").length) 
                    {
                        $objThis.removeClass('load-fragment');                                                    
                    }     
                    if (status == "error") 
                    {               
                        newDiv.removeClass('dynDiv');
                        newDiv.addClass('errorDiv');
                    }
                })

Please suggest!

Answer 1

You can just wrap that HTML snippet into a jQuery object and use it's DOM methods.

if( $(response).filter('#tab-container').find('.formContainer').length ) {
   // class .formContainer was found
}

Here I'm using the .filter() method to grab the #tab-container div. You can't use .find() unless you wrap that complete snippet into another self-created div for instance. In this particular case, you could even use $(response).first().find()..., but .filter() is more reliable there.

Another way (which is faster, but not recommendable unless to know exactly what you do & transfer) is to use a plain Javascript .indexOf() on your response.

if( response.indexOf('class="formContainer"') > -1 ) {
   // class .formContainer was found
}

Reference: $(), .find(), .filter()