jQuery Address - redirect after form submit

Question

I use jQuery and AJAX to load content from links and forms into a content div. In addition I use the Address plugin to enable the back button and refresh. On the server side I use Java and Spring MVC.

Since I'm using jQuery Address and AJAX the only page that is directly loaded is "index.html". Everything else is loaded into a content div, and what page to load is specified in the hash, ie. "index.html#/users/add.html" will load "users/add.html".

Now, "users/add.html" contains a form for creating a new user. When the form is submitted and everything went OK, the controller redirects to "users/index.html". The problem is that jQuery Address doesn't know about the redirect, so the url will remain "index.html#/users/add.html". And this is a problem when you refresh the page and then get sent back to the form, instead of the index page.

Is there a way to fix this problem?

Thanks,
Stian

Answer 1

I realize my description of the problem wasn't the best, apologies for that.

I reformulated the problem in another question, got no answers but I found a solution myself. :)

AJAX - Get response URL after redirect

Answer 2

Take a look at the new Form Sample. It's very basic but will be probably usable. http://www.asual.com/jquery/address/samples/form/

In your case you won't be able to use $('form').address() function because you will want to change the address after the server response comes back.

You can use a data.redirect property to detect potential response redirects: How to manage a redirect request after a jQuery Ajax call

Answer 3

First I init my form like that :

  $('FORM').submit(function () { 
     shareData = $(this).serializeArray();     
     $.address.value($(this).attr('action'));
  })

after I have in my change method something like that :

$.address.change(function(event) {

    if (event.path != '/' && event.parameters.layout_to_use != undefined) {

        // if no json, load don't do a post request
        shareData = _arrayToJson(shareData);;

        $('#areatoreload')
            .html('<span style="background-color:red;">loading...</span>')
            .load('myscript.php', shareData, function() {});
    }
    return false;
});

And i manage my link in the same way. I hope it can help you. shareData is not a very good way, but i don't find something else for the moment. this code is not tested, I just extract some part of my own code.