jquery/JavaScript - Delay until upload complete

左心房为你撑大大i 提交于 2019-12-11 16:46:15

问题


My jQuery script looks something like (the form is submitting files to upload):

      $("#addMore").click(function() {
                $("#progForm").submit();
                $("#upTar").css("display","block");
                $("#title").val("");$("#obj").val("");$("#theory").val("");     $("#code").val("");$("#output").val("");$("#conc").val("");
            });

I want to delay the execution of the code beginning from $("#upTar") until the form submission is completed (that is the files are uploaded and PHP script has responded).

Edit

#upTar is an iframe and the target of the form submission. I want #upTar to be displayed only after its content has been generated from the form action script.

Thanks!

Code after solution

 $("#addMore").click(function() {
    $("#progForm").submit();
    $('#upTar').load(function() {
        $("#upTar").css("display","block");
        $("#title, #obj, #theory, #code, #output,     #conc").val("");
       });
 });

回答1:


There's no way to make JavaScript in a browser "wait" for anything. In this case, there are a couple things you could do:

  1. You could put the CSS changes etc. in a "load" event handler for the target <iframe>

    $('#upTar').load(function() {
            $("#upTar").css("display","block");
            $("#title, #obj, #theory, #code, #output, #conc").val("");
    }
    
  2. You could put code in the response to the form POST that executes from the <iframe> itself.

    $(function() {
      (function($) {
            $("#upTar").css("display","block");
            $("#title, #obj, #theory, #code, #output, #conc").val("");
      })(window.parent.$);
    });
    



回答2:


What you are doing right now is submitting the HTML form and loading whatever page you have listed in the "action" attribute of the form. The lower part of the javascript function will never actually execute since the browser will be directed to the new page. Here's what you want, a form that submits via ajax and then clears the form:

$("#addMore").click(function() {
    var formData = $("#progForm").serialize();
    var url = $("#progForm").attr("action");
    $.get(url, formData, function(){
        $("#upTar").css("display","block");
        $("#title").val("");
        $("#obj").val("");
        $("#theory").val("");
        $("#code").val("");
        $("#output").val("");
        $("#conc").val("");
    });
});

Were you looking for something like that?




回答3:


If you load jQuery inside the iframe you could use the following function to control parent elements with this selector:

$("#myparentid", top.document); 

In essence, you could run a function inside the iFrame that waits for a refresh at which point you can run any function you wish with the top.document selector.



来源:https://stackoverflow.com/questions/5460290/jquery-javascript-delay-until-upload-complete

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!