Отправка Ajax запроса только при первом клике?

Question

[hellion35]

Всем привет. У меня на странице имеется форма фильтрации. К примеру: выбор района, выбор метро и т.д. Дабы не нагружать страницу лишними запросами в базу данных, я решил выгружать районы и станции метро по клику на тот или иной элемент.

$(document).on('click','.inner-dropdown-title',function(){
    var elem = $(this).data('name');
    $('#'+elem).addClass('loading');
    $.ajax({
			url: '/wp-admin/admin-ajax.php',
			type: "POST",
			data: ({
				action: "district_filter",
                
			}),
			success: function(m) {                    
                    $('#'+elem).removeClass('loading');
                    $('#'+elem+'_list').html(m);
                    $('#'+elem).addClass('open');
                    
			}
		})

    
});

У меня получается что при клике на элемент, посылается запрос на сервер, ответом приходят все районы которые есть в базе данных, выпадающим списком(в виде input'ов). Пользователь выбирает нужные районы, кликает мимо выпадающего списка и он(список) закрывается. Если он еще раз нажмет на этот же элемент - запрос отправится снова и все input'ы перезапишутся. Как сделать так что бы Ajax запрос, посылался только один раз и input'ы не перезаписывались?

Получается что - мне необходимо. После загрузки страницы, по нажатию пользователем элемента, шел ajax запрос, последующие нажатия этого же элемента(без перезагрузки страницы), не выполняли запрос на сервер, а отдавали результат первого запроса. Весь прям запутался((( Надеюсь моя мысль ясна... Заранее спасибо за ответ.

Answer 1

[lamer350]

Добавляйте блоку класс loaded например при успешной ajax прогрузке, а перед выполнением скрипта проверьте наличие класса и если он уже есть - не вызывать ajax, а просто добавить класс open.

Comments

[hellion35]

Спасибо. Оказывается все элементарно.

Answer 2

[Ruslan Ruslanov]

Уже ответили но...
Определить глобальную переменную-флаг loaded=false, при клике делать проверку, if loaded === true return, и после проверки loaded = true.

let loaded = false; //определить в глобальной области видимости
//какой-то код
//в функции, вызываемой по клику
if (loaded === true) return;
loaded = true;

Comments

[lamer350]

Да но это если у человека один блок такой на странице, а если их несколько однотипных? Или захочет в будущем добавить?

[Ruslan Ruslanov]

lamer350, тогда ваш вариант подойдет лучше.
ну или можно плодить кучу флагов.