Search code examples
javascriptjqueryuploaddelayed-execution

jquery/JavaScript - Delay until upload complete

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("");
       });
 });
Solution

  • 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.$);
});