jquery/JavaScript - Delay until upload complete

Question

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

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

Answer 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?

Answer 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.