Как добавить форму всего 1 раз?

Question

[Andrew Lynx]

Вопрос глупый, но с jquery я сейчас на Вы. В общем дело такое.

При нажатии кнопки аяксом на сервер отправляется запрос:

$('button.add-slide').on('click' ,function () {
    $.ajax({
        url: '/admin/main/add-slide',
        type: 'GET',
        success: function(res){
            $('#slides').append(res);
        },
        error: function(){
            alert('Ошибка! Попробуйте позже');
        }
    });
});

На сервере есть проверка, если это аякс, то возвращаем вид (в данном случае там форма):

public function addSlideAction(){
        if ($this->isAjax()){
            $this->loadView('add-slider','/admin/main');
            die();
        }
    }

После чего всё в том же jquery скрипте (который выше) возвращается html и добавляется после нужного мне блока $('#slides').append(res);

Мне нужно чтобы форма которая пришла с сервера выводилась всего 1 раз. Дело в том что если я нажму еще раз кнопку $('button.add-slide') то форма добавиться еще раз и уже будет 2,3 и так сколько не нажми =)

Как это можно ограничить или заблокировать кнопку тогда? Чтобы выводилась только одна форма?

Comments

[tyzberd]

а форма возвращается с валидацией? если да, то так наверно не пойдет
If($('КЛАСС ТВОЕЙ ФОРМЫ').lenght == 1){
а нужно использовать .html() вместо .append()

[Andrew Lynx]

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

Хотя если будут ошибки вовремя загрузки картинки, тогда должны выводиться ошибки... Думаю стоит всё таки переделать.

Answer 1

[Rhesus Negative]

дай форме класс любой
и

$('button.add-slide').on('click' ,function () {
    $.ajax({
        url: '/admin/main/add-slide',
        type: 'GET',
        success: function(res){
If($('КЛАСС ТВОЕЙ ФОРМЫ').lenght == 1){
$('#slides').append("ФОРМА УЖЕ ПОКАЗАНА");
}else{
$('#slides').append(res);
}
            
        },
        error: function(){
            alert('Ошибка! Попробуйте позже');
        }
    });
});

Answer 2

[Станислав Шендаков]

...
success: function(res){
            $('#slides').append(res);
            $('button.add-slide').prop('disabled',true)
            // или вообще так:
            $('button.add-slide').hide()
        },
...

На кнопку просто не получится более раза нажать. :) Как вариант, передавать на сервер дополнительные флаги.

Comments

[Andrew Lynx]

Ага я уже додумался и нашел, но все равно + в карму