Изменение содержимого html в div до и после запроса ajax

Question

Я пытаюсь изменить кнопку «ADD» (в div) на некоторый текст/img, как только будет нажата кнопка. И после обработки запроса ajax в блоке успеха я хочу, чтобы div вернул кнопку. Я вижу, что запрос ajax сам по себе не обрабатывается. Может кто-нибудь объяснить, в чем моя ошибка.

Я просто удалил ссылку jsfiddle и вставлял скрипт здесь, чтобы избежать путаницы в отношении зависимостей.

JS скрипт

var ajax_load = "Please wait..."; jQuery(document).ready(function($) { $("#add_button").click(function(event){ var st = $("#add_div").html(); $("#add_div").html(ajax_load); $("#sform").validate({ errorClass: "error", submitHandler: function (form) { alert('inside submit'); $.ajax({ type: "GET", url: 'form.cgi', data: $("#sform").serialize(), success: function (msg) { alert('msg'); $("#add_div").html(st); $("#sform")[0].reset(); } }); } }); }); });

И HTML кусок

<form id=sform>LABEL <input id=field1 type=text> <div id="add_div"> <input type="button" value="ADD" id="add_button"> </div> </form>

У меня есть jquery.validate.min.js включен сценарий.

Answer 1

Ваш jsfiddle нуждается в библиотеке jQuery, которая отсутствовала. Если вы выполняете зависимости jQuery, у вас не возникнет проблем с созданием запроса AJAX.

Подойдя к вашему второму вопросу, вы можете использовать свойство beforeSend для jquery.ajax, чтобы делать все, что вы желаете. Прочитайте документацию.