I am trying to create a a page that pulls in some content via AJAX.
Here are the details:
The base page has a bulleted list which is clickable.
This list is inside a content element which itself is in a parent
element (<div id="parent_container"><div id="base_content"><ul
id="the_list">...</ul></div></div>)
On clicking a list item, the content_container is hidden, and the new
content is retrieved via AJAX as html (also tried it as text) and is
added to the parent_container. An additional element is added
containing a button to "return" to the base page.
As long as the new content does not contain javascript, everything
works; if javascript is present, the page hangs and sometimes crashes
the browser (FF3).
What am I missing, so I can stop banging my head against the wall???
function GetContent(cid) {
var pgcontent = new String("");
var lbpg = 'content_'+cid+'.htm';
$.ajax({async: false,cache: false,type: "GET",dataType: "html",
contentType: "application/x-www-form-
urlencoded;charset=ISO-8859-15",
url: lbpg,
success: function(html) { pgcontent = html; }
});
return pgcontent;
}
$("li").click(function(){
var lbcontent = GetContent($(this).attr('id'));
if (lbcontent != "" && lbcontent.length > 0) {
$("#base_content").hide();
// add the return button && and our new content
$("#parent_container").prepend('<div
class="button_return"><a
onClick="lbreturn();">'
+ '<img src=".\/images\/sys\/lb_return.png"
\/><\/a><\/div>\n\n'
+ lbcontent);
}
});
Thanks!
Mitch