Server side redirect not working after jQuery upload script

Question

I have the following code for a simple web page where I want to let a user upload, track the upload progress and then redirect them after the upload is complete (this I need to do on thr server side) It works just fine without the bottom script to show the upload progress. Is there something in the ajax call that is preventing the redirect? My backend is in Python on Google App Engine and I would be glad to show the code but I don't think it is relevant.

<style>
.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>


<div class="row">
    <div class="span12">
        <div class="center-it"><h1>Upload a Video:</h1><br>
        </div>

        <form action="{{upload_url}}" method="POST" enctype="multipart/form-data">
            <input type="file" name="file" class="btn"><br> 
            <input type="submit" name="submit" value="Submit" class="btn"> 
        </form>

    </div>
</div>

    <div class="progress progress-striped active">
        <div class="bar"></div >
        <div class="percent">0%</div >
    </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

#without everything below this line it works just fine
<script>
(function() {

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('form').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    success: function() {
        var percentVal = '100%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    complete: function(xhr) {
        status.html(xhr.responseText);
    }
}); 

})();       
</script>

I set a background process in the task queue and I need information from that process to know where to redirect. — clifgray, Jul 24 '13 at 00:56

score 1 · Accepted Answer · answered Jul 24 '13 at 01:14

1

Without Ajax it works because the form is submitted to a different page on server where you can redirect to another URL then. With Ajax though it's still in the same page and only receives a response from server.

You can send the URL as part of the response and then use window.location or window.navigate in JavaScript to redirect to the new URL.

answered Jul 24 '13 at 01:14

Samurai

3,588
5
23
36

AJAX isn't "stopping" the redirect.. but it will be "absorbing" the new page you naively expected to see. AJAX is a means of talking HTTP to the server within the same page -- GET or POST requests return data to the Javascript "success" handler, rather than a new page to the browser window. – Thomas W Jul 24 '13 at 01:29
okay thanks, as a followup yes/no question do you know if I can get the upload progress without by only using javascript in the browser? – clifgray Jul 24 '13 at 01:41
I'm afraid you can't get the uploading progress just in the browser. If you have problem with the progress itself I think it'd be good to check these: http://stackoverflow.com/questions/4856917/jquery-upload-progress-and-ajax-file-upload http://stackoverflow.com/questions/15717146/jquery-ajax-upload-progress-for-large-text-fields And this: http://www.sitepoint.com/html5-javascript-file-upload-progress-bar/ – Samurai Jul 24 '13 at 02:41

Server side redirect not working after jQuery upload script

1 Answers1