2010-09-26 83 views
1

我有一個用HTML製作的菜單,使用一個帶有大量LI的簡單UL。每個項目都包含與「主」類相關的鏈接。當列表項(列表項中的任何位置 - 不僅僅是文本)被點擊時,jquery檢查項目是否包含類「primary」的鏈接,如果是,則將指定的頁面加載到隱藏的div中儘管其實際上不是臨時的,但是仍然稱爲臨時的),然後提取新頁面的某些部分以設置爲可見頁面的部分的html。例如,它需要「.temp。內容」並將其放在「.content」中。它基本上提取html,將「.temp」的html設置爲空(否則行$(「。content」)。html(newhtml);將在臨時div中設置「.content」的html),然後將原始內容div的html設置爲newhtml。JQuery .html()問題

但是我有一個小問題。它似乎有時會讓div變爲空白,有時需要兩次點擊來加載頁面,有時我可以點擊項目1,然後點擊項目2,它立即加載項目1中的內容(即內容中顯示的內容按項目1加載的頁面的div)。

其實我可以做一個 「產業鏈」 - 點擊項目1,2,3,4,然後1和2再次和我看到的空白,對,4個項目1,2,3和1

內容

有沒有人有任何線索,這是怎麼回事?

非常感謝提前。

問候,

理查德

在回答彼得Ajtai(我曾試圖縮短儘可能 - 它實際上是比這要複雜得多,因爲我有一個3欄佈局和修復,使所有3列陰影,以相同的高度 - 但我認爲所有的基本的東西在這裏)...

頁的基本結構:

<!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> 
+2

你能提供pertinenent HTML和jQuery?這樣調試會更簡單。 -----------你應該確保做的一件事只是將頁面加載到'div'中一次。之後,簡單地切換包含頁面的'div'的可見性。 – 2010-09-26 04:40:04

+0

我已將我的代碼添加到問題中... – ClarkeyBoy 2010-09-26 05:00:09

回答

2

我認爲你應該在你的成功處理函數中捕獲ajax響應,並將它放在第一次需要的地方。爲相同的內容做多個DOM插入是:

a)緩慢和笨重,並且
b)可能是您的問題來自何處。

很有可能(沒有看到你的代碼)你在某個元素上有一些重複的id。

如果您需要將從服務器返回的內容插入到文檔中的不同位置,請考慮將您的服務器響應更改爲JSON,並將這兩個HTML字符串放入不同的數組元素中。

UPDATE
從你的例子,它看起來像你只是將內容加載到.main-col如果是的話你可以做,只有具有該主山坳裏屬於內容提供了一個視圖的新服務器的方法,然後做到這一點:

$("li").click(function() { 
     var url = $(this).find("a.primary").attr("href"); 
     if (url != "" && url != null) { 
      $(".main-col").load(url); 
     } 
    }); 
+0

嗯似乎我可能會在這裏越來越深 - 我對jQuery的經驗非常有限...我認爲這將是一個簡單的加載頁面,然後更改各種元素的內容。我想我可以在查詢字符串中添加一個數字(使用$(「。temp」).load(url + loadcount);;並且每次加載頁面時都會增加loadcount,這可以附加到每個元素的ID中新頁面 - 使每個ID都是獨一無二的,但我不知道這個效率會有多高,但它可能會解決這個問題 – ClarkeyBoy 2010-09-26 04:59:13

+0

這個評論是關於你發佈的更新(我沒有意識到它到目前爲止)grr stupid enter =在textarea函數上提交... anywho所以你所說的是在查詢字符串上標記一些東西,然後服務器讀取並認爲(或者確切地說)它是一個需要的部分頁面,然後只發送需要的信息..?聽起來很簡單 – ClarkeyBoy 2010-09-28 23:28:25

+0

準確地說,或者爲部分頁面編寫一個新的服務器方法,然後你只需要插入你需要的DOM到 – Stephen 2010-09-29 11:39:52