jQuery: я устанавливаю изображение счетчика, затем отправляю форму, но изображение не появляется

Question

У меня есть ссылка для отправки формы с пометкой «ОК», и я хочу иметь спиннер, чтобы указать, что что-то происходит при нажатии. Я попытался добавить изображение в выбранный диапазон перед отправкой формы, но оно не отображается:

function submitMyForm() {
    $(this).html($(this).html() + "&nbsp;&nbsp;<img src='/img/spinner.gif'>");
    $("#my_form").submit();
}

с HTML:

<em class="ok_btn">
    <a href="javascript:void(0);" onclick="submitMyForm();">OK</a>
</em>

Похоже, что отправка формы происходит до перерисовки страницы. Есть ли способ заставить страницу перерисовать, а затем отправить форму?

Answer 1

Отправка формы останавливает ВСЕ другое выполнение.Поэтому, вероятно, ваш HTML не успевает обновиться до того, как произойдет действие отправки.Попробуйте добавить задержку:

function submitMyForm() {
    $(this).html($(this).html() + "&nbsp;&nbsp;<img src='/img/spinner.gif'>");
   window.setTimeout(function(){ $("#my_form").submit()},500)
}

Answer 2

$ (это) ни к чему не относится, потому что ничего не было передано. Я думаю, что вам нужно передать элемент в функцию с:

<a href="javascript:void(0);" onclick="submitMyForm(this);">OK</a>

тогда js станет:

function submitMyForm(el) {
    $(el).html($(el).html() + "  ");

Answer 3

Я бы предположил, как я уже упоминал в своем комментарии, что вы, вероятно, хотите добавить изображение в div.Примерно так:

... your html code here ...
<div id="spinnerDiv">
</div>

Затем добавьте в форму тайм-аут, например:

function submitMyForm() {
    $("#spinnerDiv").html("<img src='/img/spinner.gif'>");
    window.setTimeout(function()
    {
        $("#my_form").submit();
    }, 500);
}

Answer 4

Попробуйте изменить эту строку:

$(this).html($(this).html() + "&nbsp;&nbsp;<img src='/img/spinner.gif'>");

На:

$('body').append("&nbsp;&nbsp;<img src='/img/spinner.gif'>");

Я не проверял это, но думаю, что это должно работать.