2010-07-21 2 views
2

Нужна простая помощь с помощью JQuery и AJax. У меня есть улОсновная помощь 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> 

Пустой Див, где мне нравится содержание 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

Thanks Patrick :) Мне нравится возвращаться с обеда и 5 ответов ждут меня, особенно когда они в значительной степени правильны. – mdgrech

+0

@mdgrech - Добро пожаловать. : О) – user113716

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

Попробуйте это ....

0

Использование

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

будет смутно работать, но тогда вы получите весь удаленный документ, загруженный, включая повторяющиеся теги head/body.

Чтобы усложнить задачу, вы можете указать функцию обратного вызова в .load() и использовать ее для чтения возвращаемого содержимого, собрать только дочерние элементы элемента <body> и вставить их в свой элемент #articles.

0

Это похоже на то, что вы ищете ... Следующая функция вызывает ASP.Net Webservice. Затем я использую данные JSON, возвращенные из Webservice, чтобы добавить 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

Вы должны структурировать каждую включенную страницу, чтобы иметь такое же имя, Див, такие, как #container, где данные, которые вы хотели загружены в #articles ДИВ находится. Тогда вы можете просто сделать:

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

Это будет только принести #container DIV и исключить все лишние теги HTML/тела, которые вы не хотите, и вам не придется иметь дело с функциями обратного вызова. См. http://api.jquery.com/load/

Смежные вопросы