Load innerHtml of loaded ajax div
I have a div that loads content via ajax.load ("ajaxcontent.php").
Inside this div, we create many other divs. I want to get the content of one of these divs.
I've tried var insidecontent = $ ('# topdiv'). html (); but it returns null.
Is there a trick for getting these values?
index.html
<div id="news"></div>
ajaxcontent.php
<div id="topdiv">Hello World</div>
<div id="middiv">This is the mid div</div>
<div id="botdiv">This is the bottom</div>
JavaScript:
$("#news").load("ajaxcontent.php");
$(document).delegate("#total", "keyup", function (e) {
if(e.which!=13){
var insidecontent=$('#topdiv').html();
}
});
source to share
Accessing Content After Completing the Download Function?
$("#firstDiv").load("serverpage.aspx",function(){
// Now access the content
var insideContent=$("#topDiv").html();
});
EDIT: after op posted his code
wrap a delegate delegation inside document.ready like this
$(function(){
$(document).delegate("#total", "keyup", function (e) {
if(e.which!=13){
var insidecontent=$('#topdiv').html();
}
});
});
source to share
You just need to make sure you call $('#topdiv')
after topdiv
attached to the DOM. load
execute a callback at http://api.jquery.com/load/
$('#someDiv').load('ajaxcontent.php', function() {
var insidecontent=$('#innerDiv').html();
//Do something with it.
});
source to share
Since you only showed .load("ajaxcontent.php")
, I assume you are trying to do this
jQuery("#foo").load("ajaxcontent.php")
var insidecontent=$('#topdiv').html()
You need to use a callback since the download is asynchronous.
function finishProcessing() {
var insidecontent=$('#topdiv').html();
alert( insidecontent );
}
jQuery("#foo").load("ajaxcontent.php", finishProcessing)
Check api for jQuery loading
source to share