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

If that's a real form submit, does the form have a "target" attribute or something, to ensure that the page containing it is not wiped out by the server response? If not, then there's no point doing anything on the page really. — Pointy
– Pointy, Commented Mar 28, 2011 at 14:18

Pointy · Accepted Answer · 2011-03-28 14:26:50Z

2

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

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

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

answered Mar 28, 2011 at 14:26

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

check123 Over a year ago

The problem is I am trying to upload a file giving a (pseudo)ajax effect as ajax does not support file uploads. I am doing this by submitting the form to a hidden iframe and then unhiding the iframe once the response is generated. Therefore, 1. iframe has to be already loaded 2. iframe cannot be generated on the fly.

Pointy Over a year ago

The browser should generate a "load" event on the <iframe> when the HTTP response completes. Have you tried that?

Pointy Over a year ago

Oh good - I was pretty sure it would, but I was too lazy to check with a jsfiddle :-)

Shakakai · Accepted Answer · 2011-03-28 14:29:07Z

0

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?

answered Mar 28, 2011 at 14:29

Shakakai

3,5642 gold badges18 silver badges18 bronze badges

2 Comments

Shakakai Over a year ago

...and the OP pulled the rug out from under me :P

check123 Over a year ago

I have tried using something similiar but to no avail. Moreover, I guess, get method does not support file uploading.

Jonathan Christensen · Accepted Answer · 2011-04-26 18:28:05Z

0

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.

answered Apr 26, 2011 at 18:28

Jonathan Christensen

10310 bronze badges

Collectives™ on Stack Overflow

jquery/JavaScript - Delay until upload complete

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related