I’m unable to load plain HTML into a dynamically created DIV element. My script looks as follows:
$("button").click(function () {
var divElem = $('<div />').load('@Url.Action("MyFunkyPartialView", "Home")');
});
MyFunkyPartialView action method returns a partial view that looks as follows:
Where does your newly created DIV element go?
When you create an HTML element (i.e. $('<div/>')), that's not automatically inserted into the document, so you can't see it on the screen yet. You'll have to specify where you want to put it.
It is, however, already in memory, so you can already manipulate it and do stuff to it, including adding content to it as you're doing. Nothing wrong with your call to .load().
Long story short then, is that you're doing nothing wrong --- you're just missing a step in your workflow.
The only thing you have to do, then, is to insert the DIV to your document. You can do that using something like:
var divElem = $('<div/>').load('@Url.Action("MyFunkyPartialView", "Home")');
// ...
divElem.appendTo('#main');
This adds the DIV element inside the #main element, after all it's original content.
When accessing the DIV's contents, we have to make sure that the .load() call has had a chance to complete first. Normally this is best achieved through the complete callback.
var divElem = $('<div/>')
.load('@Url.Action("MyFunkyPartialView", "Home")', function () {
// this function executes after the load AJAX call completes,
// so this is the best place to access the contents of the div.
alert(divElem.html());
});
.load()ed HTML into your placeholder, and (correct) retrieve that using .html() and slap that onto another container/placeholder somewhere in your document. My question now, however, is why not just put the HTML into it's final resting place from the get-go? Why use a dynamic placeholder?var x = $('<div/>').load(); $('#container').html(x.html()); x.remove(), why not jump the gun and just do $('#container').load()? So there shouldn't be a dummy div per se. To answer your question though, that may be because you're accessing (alerting) the div element before the AJAX call has had a chance to complete. Editing my answer to make that more apparent.
.load()loads the data into the selected element.$('')selects nothing