2013-07-16 2 views
0

Я отправляю запрос ajax на сервер для получения некоторого HTML.jQuery - не отправлять запрос ajax снова после отправки один раз

Я хочу, чтобы это сделать:

  • на первый клик отправить запрос и добавить div к body (Мой код работает до здесь)
  • если кнопка была нажата еще раз, то показывать ранее прилагается div.

Пожалуйста, обратите внимание, что одно action для моего AJAX запроса определяется в кнопке в data атрибута.

Вот мой JQuery код, оно посылает AJAX запрос на каждый клик:

jQuery('.open-box').click(function(){ 
    var action = jQuery(this).data('action'); 
    jQuery.ajax({ 
     type : 'GET', 
     url  : ajaxurl, 
     data : { action : action}, 
     dataType: 'html', 
     context: this, 
     success: function (response) { 
      jQuery(response).show().appendTo('body'); 
     }, 
    }); 
}); 

Вот моя кнопка HTML

<button class="open-box" data-action="test-html">Open box</button> 

ответ

1

Я не экспертом JQuery, но я думаю, что это решение хорошо:

теперь мой код будет проверять если data-loaded истинно или ложно, если false, то он отправит ajax-запрос и изменит загрузку данных на true.

jQuery('.open-box').click(function(){ 

    if (this.data('loaded')){ 
      jQuery(this).data('loaded', 'true'); 
     var action = jQuery(this).data('action'); 
     jQuery.ajax({ 
      type : 'GET', 
      url  : ajaxurl, 
      data : { action : action}, 
      dataType: 'html', 
      context: this, 
      success: function (response) { 
       jQuery(response).show().appendTo('body'); 

      }, 
     }); 
    }else{ 
     //show the appended div 
    } 
}); 

Моя кнопка HTML

<button class="open-box" data-action="test-html" data-loaded="false">Open box</button> 
+0

Если я нажму 2-й раз перед вызовом 'ajax()', это вызовет другой запрос. –

+1

Перемещено 'jQuery (this) .data ('loaded', 'true')' сверху, надеюсь, что это сработает. – user007

2

Попробуйте one(), что обработчик событий, который только один раз на элемент:

jQuery('.open-box').one('click', function(){ 
    var action = jQuery(this).data('action'); 
    jQuery.ajax({ 
     type : 'GET', 
     url  : ajaxurl, 
     data : { action : action}, 
     dataType: 'html', 
     context: this, 
     success: function (response) { 
      jQuery(response).show().appendTo('body'); 
     }, 
    }); 
}); 
1

Вот один из способов сделать это, что позволяет избежать загрязняющих родительской сферы с любым сохраняющимся переменными:

(function(){ 
    // This will be packaged into the handler as a closure 
    var hasBeenClicked = false; 

    jQuery('.open-box').click(function(){ 
     if(!hasBeenClicked) { 
      var action = jQuery(this).data('action'); 
      jQuery.ajax({ 
       type : 'GET', 
       url  : ajaxurl, 
       data : { action : action}, 
       dataType: 'html', 
       context: this, 
       success: function (response) { 
        jQuery(response).show().appendTo('body'); 
       }, 
      }); 
     } 
     hasBeenClicked = true; 
    }); 
})() 
1

Вы хотите один щелчок, чтобы сделать вызов AJAX, и после этого все щелчки, чтобы показать DIV.

// set one click to trigger ajax 
jQuery('.open-box').one(function() { 
    jQuery.ajax({ 
     type : 'GET', 
     url  : ajaxurl, 
     data : { action : action}, 
     dataType: 'html', 
     context: this, 
     success: function (response) { 
      var createdDiv = jQuery(response); 
      createdDiv.show().appendTo('body'); 
      // now hook up futher clicks to show the div 
      jQuery('.open-box').click(function() { 
       createdDiv.show(); 
      }); 
     }, 
    }); 
}); 

Я предполагаю, что у вас есть только одна кнопка (или что-то еще) с классом «open-box».

Если у вас несколько кнопок с классом «open-box», вы можете сохранить созданнуюDiv в переменной данных и получить ссылку в обработчике кликов.

1

Вот мой подход:

Поместите DIV в конце вашего тела.

<body> 
    ...... 
    <div id="append_container"></div> 
</div> 

Каждый раз, когда вы нажимаете кнопку, просто обновляйте содержимое append_container. Таким образом, вам не придется беспокоиться, чтобы сравнить, изменился ли контент или нет.

Если вы хотите загрузить контент только один раз, вы можете проверить, имеет ли контейнер какой-либо контент или нет.Затем решите сделать вызов ajax.

+0

Да, вы правы – user007

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