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

Question

[kostarus61]

Здравствуете!
Вообщем такая проблема, есть рабочий код для отправки формы без перезагрузки страницы.
Следующий цикл выводит по 9 блоков с формами на страницу:

$q=mysql_query("SELECT * FROM `users` WHERE `id_user` = '$us_id'  ORDER BY `id` DESC LIMIT $start, 9");
while($post=mysql_fetch_array($q)){
        echo"<div id='loadA'><div id='loadB'>"; // обновляем блок после отправки формы и успешного выполнения
	echo "<table class='block_tab_plant' width='158' height='150'><tr></td>";

       Здесь дальше большой кусок кода, выводятся данные из таблицы с формами. 
       Одна из форм для примера
        echo "<form action='' method='post'>
            <input type='hidden' name='seat' value='".$post['id']."'>
            <input type='hidden' name='select' value='".$lp['id']."'>
            <input type='submit' value='Забрать' class='btn_small'>
      </form>";

       echo "</td></tr></table>";
       echo "</div></div>";
}

Ну и соответственно сам код обработки формы:

<script>
$(document).ready(function(){
    $('form').submit(function() {
        var current = $(this).parent().parent();
        var data = $(this).serialize();
        data += '&ajax-request=true';

        $.ajax({
            type: 'POST',
            url: '/ajax/seat.php',
            dataType: 'json',
            data: data,
            success: (function() {
                return function(data) {
		
                     //Обновляем блок
                    if (data.status === 'success') {
						setTimeout("jQuery('#loadA').load('#div #loadB');",1000);
                    }
                };
            })()
        });

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

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

Если же убрать из скрипта вот этот кусок, то все работает нормально, страница не обновляется, но информация в блоке тоже не обновляется:

if (data.status === 'success') {
setTimeout("jQuery('#loadA').load('#div #loadB');",1000);
}

Что посоветуете в данном случае?

Answer 1

[キム ファイブプラス]

Странная загрузка через load конечно..
Но по моему как бэ DOM намекает.
Посоветую запихать в

$('form').live('submit', function(){
//сюды отправку формы
)}

И вооще почему бы тебе в success просто не принимать response и затем его уже обрабатывать через if? По таймауту как то не кошерно, да и проблема походу частично кроется в нем, раз говоришь, что обновляется если убрать эту часть.

Что то типа того:

while($post=mysql_fetch_array($q)){
		$result .= "<form action='' method='post'>
		<input type='hidden' name='seat' value='".$post['id']."'>
		<input type='hidden' name='select' value='".$lp['id']."'>
		<input type='submit' value='Забрать' class='btn_small'>
		</form>";
		return json_decode('result' => $result, 'response' => true)
	}

Принимаем в JS

success: function(data) {
var res = JSON.stringify(data);
if (res.response == '1'){
//делаем что тос res.result
}

Comments

[kostarus61]

Помогло, спасибо вам огромно, если бы вы знали сколько часов я уже мучаюсь с этой проблемой.

[kostarus61]

@SalatProduction А вот насчет этого "И вообще почему бы тебе в success просто не принимать response" можно поподробнее с примером если не трудно, а то я не совсем понял.

[Евгений Петров]

Вот прямо live?))) Вы чего учите не поддерживаемым методам?

И не success, потому что предлагается использовать promise, а не callback — done и error.

И незачем осуществлять траверс без надобности — есть делегирование.

$(document).on('submit', 'form', function (e) {
	e.preventDefault(); // вот так отменяют действие по умолчанию
	var data = $(this).serialize(); // this — ссылка на форму
});

@kostarus61 правильно отменять действие по умолчанию не return false, а вызовом метода preventDefault. И вообще вы пишете return почти везде не по делу.

[kostarus61]

Вообщем опять с проблемой столкнулся, на денвере все работало отлично, закинул на VDS, не работает, т.е. блоки не обновляются. Вот этот момент не работает if (data.status === 'success') {
setTimeout("jQuery('#loadA').load('#div #loadB');",1000);
} Ошибки браузер никакие не выдает.

[キム ファイブプラス]

@kostarus61 Как же тогда определил, что именно здесь ошибка, раз ошибок нет? PS. Не пользуйся денвером, открой для себя OpenServer.

[kostarus61]

Браузер показывал ошибку именно там, ругался на data.status === 'success'. Вообщем вся проблема была в версии PHP, на сервере стояла 5.1.6, а в ней оказывается функция json_encode не поддерживается.