Hey,
I have a menu made with HTML, using a simple UL with lots of LIs. Each item contains a link with class "primary". When a list item (anywhere in a list item - not just the text) is clicked, jquery checks to see if the item contains a link with class "primary", and if so it loads the specified page into a hidden div (which I refer to as temporary, even though its not actually temporary...) and then extracts certain parts of the new page to set as the html for parts of the visible page. For example it takes ".temp .content" and places that in ".content". It basically extracts the html, sets the html of ".temp" to nothing (otherwise the line $(".content").html(newhtml); will set the html of the ".content" within the temporary div) and then sets the html of the original content div to newhtml.
I have a slight problem however. It seems that it sometimes makes the div go blank, sometimes it takes two clicks to load a page and sometimes I can click item 1, then click item 2 and it instantly loads the content from item 1 (i.e. that which is displayed in the content div of the page which is loaded by item 1).
In fact I can make a "chain" - click items 1, 2, 3, 4 and then 1 and 2 again and I see blank, content for items 1, 2, 3, 4 and 1.
Does anyone have any clue as to whats going on here?
Many thanks in advance.
Regards,
Richard
In reply to Peter Ajtai (I have tried to shorten it as much as possible - it is actually much much more complex than this as I have a 3 col layout and a fix to make all 3 columns shaded to the same height - but I think all the essential stuff is here)...
Basic structure of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
//jquery includes
$("li").click(function () {
var url = $(this).find("a.primary").attr("href");
if (url != "" && url != null) {
$(".temp").load(url);
var newhtml = $(".temp .content").html();
$(".temp").html("");
$(".main-col").html(newhtml);
}
});
</head>
<body>
<div class="wrapper">
<div class="leftmenu">//left menu stuff here, in the following format:
<ul>
<li class="header">Content Management List</li>
<li><a class="primary" href="/Administration/List.aspx?subitem=range">Ranges</a></li>
<li><a class="primary" href="/Administration/List.aspx?subitem=collection">Collections</a></li>
</ul>
</div>
<div class="content"></div>
<div class="temp"></div>
</wrapper>
</body>
</html>