Currently, I am utilizing a script that fetches data from another page and imports it into the current page by using the .load() ajax function. Here is the important line of code: $('#content').load(toLoad,'',showNewContent())
The issue arises when I end up with an additional set of div tags surrounding my original content. This happens because the text, along with the HTML tags, are brought in from the other page and placed inside my existing div tags. Consequently, this leads to a problem as the duplicate nesting of divs disrupts the layout of my page due to conflicting margins. While I understand that the .load() function is designed for this purpose, it seems like I may be doing something incorrectly.
Instead of asking how one can remove HTML tags from an ajax load, I am curious if this behavior is standard. If it's normal, then indeed, how can I strip away HTML tags from an ajax load before importing the content? Additionally, I have noticed that an inline style='display:block' is added to the parent div. Although this doesn't present a significant issue, I would prefer if it did not include this styling. Thank you~
If you'd like to review the entire script, here it is:
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});