how to load html from server and use jquery selectors

Question

I have a div on .aspx page:

<div id="container"></div>

and I am loading some html from server using jQuery .load() method as below:

$(function() {
    $('#container').load('web/testpage');
});

where web/testpage is mvc partial view:

<div id='partialView'>
   blah blah
</div>

This loads correctly and I see the expected mark-up in the firebug

<div id="container">
   <div id='partialView'>
      blah blah
   </div>
</div>

but the problem is I am not able to select the inner div from jQuery

$(function() {
   console.log($('#partialView')); // this is empty
});

any idea where I am going wrong?

Answer 1

You have to wait until the div is loaded, you can use the callback from .load for this:

$('#container').load('web/testpage', function() {
    console.log($('#partialView'));
});

Answer 2

You can't select #partialView on DOMReady, because it has not been loaded in to the page until the load() function completes.

If you need to perform logic on this element, you would need to use the callback parameter of load():

$(function() {
    $('#container').load('web/testpage', function() {
        console.log($('#partialView')); // "[Object object]"
    });
});

Answer 3

You can do this using the load method Callback Function like:

$(function () {
    $('#container').load('web/testpage', function (response) {
        console.log($('#partialView'));
    });
});

Answer 4

You code is right but I think your "console.log(....)" function is invoking before loading the partial view. so you are getting nothing.