Possible duplicate:
Pause form submission for verification
This is a continuation of this publication. So basically I upload the file in an iframe. But before submitting, I take the data from the form and using the built-in django system, check their authenticity (currently it is just a dummy function that takes foo: bar and returns json result = "true"). I use two buttons - a fake visible, which causes a check and a second hidden button that submits a form. Using the code below, I can do a check, and then when this is the result, a positive form is sent. Now, if I am strictly targeting the form, my warning does not appear, and I am sure that the download is not being performed (unfortunately, the download list is updated every 8 hours, so I will find out if it worked after a while). If no target is specified, the file is downloaded with redirection, therefore the entire "submit" event listener is omitted. What's more, all the code doesn't work at all in Chrome. And it takes 2-3 seconds (looking at firebug) between receiving a response from the check and a display that I have never seen before. I am really trying desperately to get it to work, since I already lost 2 days and without any results.
Link example:
http://ntt.vipserv.org/artifact/
JS:
<script> $('#fake_upload_submit').click(function(e){ e.preventDefault(); var fileUploadForm = document.getElementById('file_upload_form'); fileUploadForm.addEventListener("submit", function() { alert("sent in iframe"); fileUploadForm.target = 'upload_target'; }, false); $.ajax({ type: "POST", url: '/artifact/upload/check-form/', data: 'foo=bar', dataType: "json", success: function(data){ if(data['result'] == "true"){ $("#message").show(); $("#message").fadeIn(400).html('<span>'+data["message"]+'</span>'); setTimeout(function(){ $("#message").fadeOut("slow", function () { $("#message").hide(); }); }, 1500); fileUploadForm.submit(); } else{ $("#message").show(); $("#message").fadeIn(400).html('<span">Response false</span>'); setTimeout(function(){ $("#message").fadeOut("slow", function () { $("#message").hide(); }); }, 1500); return false; } } }); return false; }); </script>
HTML:
<div id="message" style="background:black; width:400px; height:80px; display:none; color:white;"> </div> <h1>Submit</h1> <form action="{{upload_url}}" method="POST" target="" id="file_upload_form" enctype="multipart/form-data"> {% render_upload_data upload_data %} <table>{{ form }}</table> <p> <input type="hidden" maxlength="64" name="myfileid" value="{{ myfileid }}" > </p> <p> <input type="submit" style="display:none" id="true_upload_submit" value="Submit" /> </p> <iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe> </form> <p> <input type="submit" id="fake_upload_submit" value="Submit" /> </p>
EDIT:
IE debugger shows Object doesn't support this property or method for:
fileUploadForm.addEventListener("submit", function() { alert("sent in iframe"); fileUploadForm.target = 'upload_target'; }, false);
due to the use of addEventListener, but no more errors. Firebug is clean. In Chrome:
"Failed to load resource" in the check form. This is interesting since the result in ... / check -form / is:
{ message: "Response = True" result: "true" }
It looks great. I also tried data.message instead of the data ["message"], but nothing has changed.