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>

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