Как сделать обновление данных на странице после отправки формы?

Question

[kostarus61]

Здравствуйте!
Нужна помощь.

Есть страница с формой, форма работает через ajax, без перезагрузки страницы. По условию if($post['kol']>$kol_t) выводится одна форма с кнопкой, после нажатия на кнопку и успешного выполнения эта форма исчезает и выполняется другое условие с другой формой. В моем случае вторая форма появляется только если обновить страницу вручную. Весь код с формами и условием заключен в div код.... /div Как сделать чтобы этот блок с кодом обновлялся автоматически после отправки первой формы.

Код обработчика первой формы:

<script>
    $('form').submit(function() {
        //Запись DOM-формы в объект
        var current = $(this).parent().parent();

        //Собираем данные с формы
        var data = $(this).serialize();

        //Добавляем в тела запроса информацию о том, что это — Ajax-запрос
        data += '&ajax-request=true';

        //Отправка POST-запроса
        $.ajax({
            type: 'POST',
            url: '/ajax/seat.php',
            dataType: 'json',
            data: data,
            success: (function() {
                return function(data) {
         
                    //Отображение окошка
                    $(current).qtip({
                        style: {
                            name: 'dark',
                            tip: {
                                corner: 'bottomMiddle'
                            }
                        },
                        position: {
                            corner: {
                                target: 'topMiddle',
                                tooltip: 'leftMiddle'
                            }
                        },
                        content: {
                            text: data.message
                        },
                        show: {
                            ready: true
                        },
                        hide: false,
                        api: {
                            onShow: function() {
                                setTimeout(this.destroy, 3000);
                            }
                        }
                    });
                };
            })()
        });

        //Останавливаем HTML-обработчик
        return false;
    });
</script>

Вообщем суть в следующем, нужно каким то образом после отправки формы обновлять содержимое блока div.../div без перезагрузки страницы. Облазил около сотни сайтов и перечитал кучу разных примеров, ни один не подходит. Видел вариант перекинуть код с формами в отдельную страницу, загружать его в div и обновлять, но такой вариант не подходит. Может есть какой нибудь вариант используя не div а что нибудь другое.

Извиняюсь за некорректность объяснений, надеюсь вы поймете.

Answer 1

[キム ファイブプラス]

Так храни первоначальные ключи в js для обновления каждой формы, вместе с датой отправляй аяксом ключ, принимай дату и новый ключ и так далее. Либо я чего то не понял.

Answer 2

[Philipp]

Кому-то пора познакомиться с client-side MVC и современными фреймворками. Например Angular JS.

Answer 3

[Gasoid]

после отправки формы, грузите в див блок код формы следующей

.submit(function(){
    var data = $("form").serializeArray();
     $.post("/blabla" , data, function(){

             $("div").load("/new-form.html");  //тут грузим новую форму
            
     });
 return false;
});

Comments

[kostarus61]

Нет, так не пойдет, блоки выводятся циклом по 9 блоков на странице, и помимо форм там с каждой формой выводятся разные данные из БД.

[Gasoid]

@kostarus61 ну тут вам надо использовать либо mvc, либо шаблонизатор, например, handlebarsjs, с помощью которого вы бы выводили данных из ваших json запросов