Как подправить скрипт?

Question

[radnk]

При многократном нажатии загружается одна страница много раз, как можно исправить?

<div id="true_loadmore">Загрузить ещё</div>
 
jQuery(function($){
        $('#true_loadmore').click(function(){
                $(this).text('Загружаю...'); // изменяем текст кнопки, вы также можете добавить прелоадер
                var data = {
                        'action': 'loadmore',
                        'query': true_posts,
                        'page' : current_page
                };
                $.ajax({
                        url:ajaxurl, // обработчик
                        data:data, // данные
                        type:'POST', // тип запроса
                        success:function(data){
                                if( data ) {
                                        $('#true_loadmore').text('Загрузить ещё').before(data); // вставляем новые посты
                                        current_page++; // увеличиваем номер страницы на единицу
                                        if (currentPage == maxPages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку
                                } else {
                                        $('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
                                }
                        }
                });
        });
});

jQuery 1.7.0

Comments

[Артур Мудрик]

Обращение отделяется запятыми.

Answer 1

[Ольга]

вешай обработчик через .on('click',function(){}) ,убивай его(.off('click')) после нажтия кнопки и снова вешай при успешной загрузке контента

Comments

[radnk]

Поподробнее нельзя?

Answer 2

[radnk]

Все работает:

jQuery(function($) {
	$('#true_loadmore').click(function(){
	
    	var $el = $(this),
        	$preloader = $('.preloader');
		var data = {
			'action': 'loadmore',
			'query': true_posts,
			'page' : current_page
		};
		
		$.ajax({
			url:ajaxurl, // обработчик
			type: 'POST',   
			data:data, // данные
			cache: false,
			beforeSend: function( ) {
				$el.hide(); 
				$preloader.show();
			},
			success: function(data){
				if( data ) { 
					$('#true_loadmore').text('Загрузить ещё').before(data); // вставляем новые посты
					current_page++; // увеличиваем номер страницы на единицу
				} else {
					$('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
				}
			}           
		})
		
		.complete(function() {
			$preloader.hide();
			$el.show();           
		});   
	});
});

Но правильно ли это?

Comments

[Ольга]

В целом-да,только зачем ставить обработчик complete() если у тебя и так отлавливается событие success? При удачном выполнении аякса и присутствии ответа в данных нужно убрать прелоадер и показать кнопку,а в случае отсутствия данных только убрать прелоадер(кнопка и так скрыта).
Еще круче будет получать данные в формате JSON,тогда ты сразу сможешь при отдаче последнего комментария сообщить скрипту,что пора убирать кнопку.

[radnk]

Ольга: а не подскажешь как исправить проблему с if (currentPage == maxPages) $el.remove(); ? pastebin.com/Wi3E3Svq

После первой же загрузки пропадает кнопка "Загрузить ещё" и остается "Загружается...", хотя это не последняя страница.

[Ольга]

может потому,что ты не задаешь никак maxPages?Ошибки нигде не вылетают?

Answer 3

[lnked]

<div id="true_loadmore">Загрузить ещё</div>

jQuery(function($){
    $('#true_loadmore').click(function(){
    	if (!$(this).hasClass('in-progress'))
    	{
	    	$(this).addClass('in-progress');
	        $(this).text('Загружаю...'); // изменяем текст кнопки, вы также можете добавить прелоадер
	        var data = {
	            'action': 'loadmore',
	            'query': true_posts,
	            'page' : current_page
	        };
	        $.ajax({
	            url:ajaxurl, // обработчик
	            data:data, // данные
	            type:'POST', // тип запроса
	            success:function(data){
	                if( data ) {
	                    $('#true_loadmore').text('Загрузить ещё').before(data); // вставляем новые посты
	                    current_page++; // увеличиваем номер страницы на единицу
	                    if (currentPage == maxPages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку
	                } else {
	                    $('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
	                }

	                $('#true_loadmore').removeClass('in-progress');
	            }
	        });
		}
    });
});