jquery .submit() only works once
I'm making a multi-file uploader with progress bar using jquery. Everything works fine once, but none of my javascript functions fire when the file uploader is submitted after this. The file uploads to an invisible iFrame so that the page doesn't refresh. Do I need to reset something so that the submit will work a second (and more) time?
Here is the the javascript:
-
var callRepeater;
var frameContents;
var fileName;
$(document).ready(function() {
try {
$("#file_uploader").submit(function(){
fileName = document.getElementById('upload').value;
$("#debugText").html(fileName);
if(fileName!=""){
$("#progress_div").slideDown("slow");
beginCall();
}
})
}catch(e){
alert(e);
}
}); //end document ready
function beginCall() {
try{
callRepeater = setInterval('ajaxFunction()',500);
}catch(e) {
alert('error is'+ e);
}
}
function ajaxFunction()
{
var urljs = "http://www.myserver.net/files/jsonRead.php";
try {
$.getJSON(urljs+"?jsoncallback=?"+"&fileName="+fileName,
function(data) {
percentageUpdate(data);
});
}catch(e){
document.getElementById("debugText").innerHTML = e;
}
}
function percentageUpdate(data) {
if (data.Percentage>=99){
clearInterval(callRepeater);
displayUploadedFiles();
$("#percentComplete").html("Upload Complete");
deletePFile();
}else {
$("#percentComplete").html(data.Percentage);
document.getElementById('progressBar').style.width = data.Percentage+"%";
}
}
function displayUploadedFiles() {
$("#debugText").html("display files now");
$("#uploadFrameID").load(function() {
try{
frameContents = $("#uploadFrameID").contents().find(".azcontent").html();
$("#uploadedFileDisplay").html(frameContents);
$("#uploadedFileDisplay").slideDown("slow",function(){
$("#progress_div").slideUp("slow");
});
$("#upload_form").html($("#upload_form").html());
}catch(e) {
alert(e);
}
})
}
function deletePFile() {
var urlDelete = 'http://www.myserver.net/files/jsonDelete.php';
$.getJSON(urlDelete+"?jsoncallback=?"+"&fileName="+fileName,
function(data) {
$("#debugText").html(data);
});
}