Как добавить внешний контент с помощью ajax?

Question

Пожалуйста, посмотрите

<div class="item">
    <div class="section">
        <a href="/test.php?id=1" class="clickme">Click Item 1 </a>
    </div>
</div>
<div class="item">
    <div class="section">
        <a href="/test.php?id=2" class="clickme">Click Item 2 </a>
    </div>
</div>
<div class="item">
    <div class="section">
        <a href="/test.php?id=3" class="clickme">Click Item 3 </a>
    </div>
</div>


$('.clickme).click(function(event) {
    event.preventDefault();
    var stringURL = $(this).attr("href");
    $.ajax({
        type: "get"
        , url: stringURL
        , data: "ajax=1"
        , success: function(html){ //so, if data is retrieved
            //append 
        }
     });    
}); //close click(    

Если бы это была одна область раздела, я мог бы нацелиться на нее, используя id и добавить содержимое. Но любые идеи, как узнать, какой раздел заполнять последним контентом в зависимости от клика и если внешний контент уже есть (то есть уже сделан вызов), просто обновляют только этот раздел. Было бы неплохо, если бы вы помогли показать / скрыть загрузочное изображение только в этом разделе.

Спасибо

Answer 1

ну, вы можете в jquery получить родительский объект для объекта $ (href), по которому щелкнули, и затем заполнить div 'section' в зависимости от этого выбора.вы должны проверить на ноль и добавить или перезаписать в зависимости от этого условия.

jim

Answer 2

$('.clickme).click(function(event) {
    event.preventDefault();
    var stringURL = $(this).attr("href");
    var currentSection = $(this).parent().get(0);
    $.ajax({
        type: "get"
        , url: stringURL
        , data: "ajax=1"
        , success: function(html){ //so, if data is retrieved
            //append 
            $(currentSection).append(html);
        }
     });    
});

Кстати, если вы используете параметр "ajax = 1" только для того, чтобы определить, является ли запрос ajax, вы можете полностью отказаться от него.jQuery отправляет заголовок «HTTP_X_REQUESTED_WITH» с запросами ajax, и вы можете использовать это, чтобы определить, является ли запрос ajax. обнаружение AJAX

Answer 3

Если вы знаете, какую область содержимого нужно заполнить, вы можете узнать, на какую область щелкнули, используя $(this), и можете ссылаться на ее раздел с помощью $(this).parent(), предполагая, что нужный элемент является элементом .section.

$('.clickme').click(function(event) {
    event.preventDefault();
    var stringURL = $(this).attr("href");
      // store the parent of the element clicked
    var $section = $(this).parent();
    $.ajax({
        type: "get"
        , url: stringURL
        , data: "ajax=1"
        , success: function(html){ 
                // Append html to the section
             $section.append(html);
        }
     });    
});

Если единственное, что делает <a>, - это вызов AJAX, то одним из вариантов будет открепление события в обратном вызове success.

var $th = $(this);

Тогда в успехе AJAX:

$th.unbind('click');

Если это не вариант, то, зная, заполнено ли оно уже или нет, вы можете найти какой-либо контент, полученный до вас .append() (или даже до того, как вы сделаете запрос, если контент известно).

Другой вариант - поместить какой-то маркер, например класс, в элемент .section, например:

$section.addClass('populated');

... чтобы указать, что оно уже заполнено. Затем проверьте этот класс и запретите ajax, если он существует.

Существуют и другие варианты, в зависимости от реальных обстоятельств.

Answer 4

Вы должны будете сообщить функции javascript, какой раздел обновлять. Вместо того чтобы использовать класс для каждого раздела, присвойте onclick каждому <a>, который дает функции номер раздела раздела:

<a href="/test.php?id=2" onclick="javascript: updateContent(2);">Click Item 2 </a>

Кроме того, присвойте разделам уникальные идентификаторы (например):

<div class="section" id="section2">

Тогда ваш JavaScript будет выглядеть примерно так;

updateContent(id) {
    event.preventDefault();
    var stringURL = "index.php?id=" + id;
    $.ajax({
        type: "get", 
        url: stringURL, 
        data: "ajax=1", 
        success: function(html, id){ 
             //use javascript to update the correct section
        }
     });    
}

Обратите внимание, что я не уверен, сработает ли function(html, id){} в успешной части, возможно, вам потребуется создать отдельную функцию для этого.