Jquery/javascript - Delay Until Upload Complete

My jQuery script looks something like (the form is submitting files to upload): $('#addMore').click(function() { $('#progForm').submit();

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

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

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