Got most of this code from various tutorials and examples, and
customized it for my needs. Everything is working great, except for
the content replacement function I'm using. We have four
DIV's...#menu, #content, #side, and #footer. Any link that is clicked
in #menu is setup to hide the #content, load() in the new content from
an external file, and then show #content. This is working great,
except when the process is all done I have two #content DIV's...looks
like the original one is emptied, and then the new one (From the
external file) is placed inside the old, empty #content DIV. So when
it's all said and done I have one inside the other. For a long time
this wasn't an issue, I didn't even see it, but then some funky
formatting started happening.
I've tried replacing the load() with replaceWith() but that never
seems to work...maybe I have the syntax wrong?
Here is the code:
$(".loadContent").click(function(){
var loadURL=$(this).attr("href");
$("#content,#side").hide("normal",loadContent);
function loadContent(){$("#content").load(loadURL+"
#content","")}{$
("#side").load(loadURL+" #side","")}{showContent()}
function
showContent(){$("#content,#side").show("normal");}
return false;
});
As you can see I also apply the same function/technique to the #side
DIV as well, and it too has the duplicate DIV's when it's all
done...#side inside #side.
Any thoughts? Ideas? I tried to see if I could hunt down and remove
the parent DIV and just let child one takes it place but that never
yielded any positive results either. Thanx in advance!!!
