JQuery toggle() - 仅在 JQuery 提交函数后显示的元素

Question

我试图在 JQuery 提交函数的开头显示加载 gif，但 gif 仅在提交函数结束后显示。（每个警报都显示在 gif 之前）

对于 ajax，我目前将其设置为始终响应错误 "No video chosen"。

JQuery

$("#myForm").submit(function(e){ 
    e.preventDefault();

    $("#loading_gif").toggle();
    alert('The gif should be displayed');

    var Fdata = new FormData($(this)[0]);
    $.ajax({
        type: "POST",
        url: "/send_video",
        data: Fdata,
        processData:false,
        contentType: false,
        async:false,
        cache: false,
        success: function(data){
            alert('success');
            //commented or else the gif is never displayed
            //$("#loading_gif").toggle();
        },
        error: function(error){
            alert('error');
            e = document.getElementById("error");
            e.innerHTML =  JSON.parse(error.responseText);
            //commented or else the gif is never displayed
            //$("#loading_gif").toggle();
        }
    });
});

HTML

<div id="error"></div>
<form id="myForm" action="/" method="post" enctype="multipart/form-data">
    <input id="video" type="file" name="video">
    <input id="submit" type="submit" value="Send">
    <img id="loading_gif" style="display:none" src="mysite/img/loading.gif">
</form>

我不认为 $.ajax 是问题所在，因为我删除了它但仍然没有用。

我已经尝试通过这样做将 toggle() 与提交的其余部分分开：

$("#submit").click(function(){
    $("#loading_gif").toggle();
    $("#myForm").submit();
});

但它没有任何改变。

非常感谢。

Answer 1

您不希望 async:false 删除它，您的问题应该会消失。

JQuery toggle() - 仅在 JQuery 提交函数后显示的元素

JQuery toggle() - Element only displayed after JQuery submit function

javascript

ajax

jquery

submit

toggle