JQuery .html() question
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", 开发者_如何学Goand 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>
I think you should just catch the ajax response in your success handler function and put it where it needs to go the first time around. Doing multiple DOM inserts for the same content is
a) slow and cumbersome, and
b) probably where your issue is coming from.
Most likely (without seeing your code) you've got some duplicate id on some element somewhere.
If you need to insert content returned from the server into separate locations in the document, consider changing your server response to JSON and put the two HTML strings in different array elements.
UPDATE
From your example it looks like you are just loading content into .main-col if so you could make a new server method that only serves up a view with content that belongs inside main-col, and then do this:
$("li").click(function () {
var url = $(this).find("a.primary").attr("href");
if (url != "" && url != null) {
$(".main-col").load(url);
}
});
加载中,请稍侯......
精彩评论