Home/ Questions/Q 9233877
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T06:39:22+00:00

I was doing some test with JQuery find , I have an html response

  • 0

I was doing some test with JQuery find , I have an html response coming from an AJAX request, so initially the result would be this.

<!DOCTYPE html>
<html>
<body>   
      <div id="dashboard">
        <div id="dash2">
            <h1>Hi</h1>
        </div>
    </div>
</body>
</html>

In My Ajax Success code is this..

success : function(response,status) {                       
    console.log( $(response).find('#dashboard').html() );
}

Upon printing it on the console that gives me an undefined.

However when I modify the response page(I created a nesting div) to this

<!DOCTYPE html>
<html>
<body>
        <div id="div1">
            <div id="dashboard">
                <div id="dash2">
                    <h1>Hi</h1>
                </div>
            </div>
        </div>
</body>
</html>

The line from my Ajax Success code returned console.log( $(response).find('#dashboard').html() ); returned the 

<div id="dash2">
    <h1>Hi</h1>
</div>

My Question, How come on the first HTML when doing the console.log( $(response).find('#dashboard').html() ); it gave me an undefined, however on the second HTML(the one nested in the div) gave me the the contents of #dashboard(which the one I am expecting to get.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As far as I know it is a browser dependent behavior to which tags to drop as a measure of sanitation, e.g. <head/>.

    The reason for not finding #dashboard while executing 

    $(response).find('#dashboard')

    is most probably because #dashboard has become the root element after the sanitation, and .find() matches against the descendant elements not on the root itself.

    I normally to avoid this problem do this over an empty <div>.

    $("<div/>").html(response).find('#dashboard')
    • 0