2010-07-21 51 views
2

需要使用JQuery和AJAX的基本幫助。我有一個UL基本的JQuery幫助

<div id="topics"> 

<h1><a href="index.html">JQuery</a></h1> 
    <h3>A Working Primer</h3> 

<ul> 
    <li><a href="articles/includingJQuery.html">Including JQuery</a></li> 
    <li><a href="articles/tools.html">Tools of the Trade</a></li> 
</ul> 
    </div> 

的空div我喜歡那裏的Ajax內容被加載到與上面相同的頁面上:

<div id="articles"> 
    </div> 

和我的腳本

$(document).ready(function(){ 
    $("#topics ul li a").click(function(){ 
$('#articles').load(''); 

return false; 
    }); 
}); 

不完全確定要在負載中放入什麼,以確保其動態。任何幫助表示讚賞:)

回答

4

如果該內容位於href屬性的位置,那麼你就需要獲得該屬性的值:

$('#articles').load(this.href); 

那麼試試這個:

$(document).ready(function(){ 
    $("#topics ul li a").click(function() { 
       // use the content of the href attribute 
       //  for the load parameter 
     $('#articles').load(this.href); 
     return false; 
    }); 
}); 
+0

謝謝帕特里克:)我喜歡從午餐回來,並有5個答案等着我,尤其是當他們幾乎都是正確的。 – mdgrech 2010-07-21 16:50:35

+0

@mdgrech - 不客氣。 :O) – user113716 2010-07-21 16:51:54

0
$('#articles').load($(this).attr('href')); 

試一下....

0

使用

$('#articles').load($(this).attr('href')); 

會隱約起作用,但最終會導致加載的整個遠程文檔,包括重複的頭部/主體標籤。要獲得更復雜的結果,可以在.load()中指定一個回調函數,並使用它讀取返回的內容,只收集<body>元素的子元素,然後將這些子元素插入到#articles元素中。

0

這有點聽起來像你在找什麼...以下函數調用ASP.Net Webservice。然後,我使用從Web服務返回的JSON數據將html附加到我的元素。我想你可以從這個例子中看到我在做什麼並將它應用到你自己的代碼中。讓我知道你是否需要我澄清任何事情。

$(function() { 
    $.ajax({ 
     type: "POST", 
     data: "{}", 
     datatype: "json", 
     url: "../webServices/myTestWS.asmx/testMethodTV", 
     contentType: "application/json; charset-utf-8", 
     success: function (msg) { 
      var len = msg.d.rows.length; 
      $('#sidetree').append('<ul id="treeview">'); 
      for (i = 0; i < len; i++) { 
       $('#sidetree').append("<li><span class='expandable'>" + msg.d.rows[i].data + "</span></li>"); 
      } 
      $('#sidetree').append('</ul>'); 

    }); 
}); 
0

你必須每個頁面包含具有相同div名稱,例如結構#container,在那裏你想要的數據加載到#articles DIV所在。然後,你可以簡單地做:

$(document).ready(function() { 
    $("#topics ul li a").click(function() { 
    var url = $(this).attr('href'); 
    $('#articles').load(url + ' #container'); 
    return false; 
    }); 
}); 

這隻會獲取#container股利和排除所有你不希望其他HTML/body標籤,你不必應付回調函數。見http://api.jquery.com/load/