More on 303 redirect

Question

Yesterday, Peter Boughton mentioned that a 303 redirect can be used to transform to a refresh-friendly GET request.

Q: How is this done? Suppose I have the form:

<form method="post">
<button type="submit" name="Save">Save</button>
</form>

Then how do you do a 303 redirect to keep the user from submitting the same thing by pressing F5?

Note: As of bootstrap 3, I'm now using button type=submit in favor of input type=submit.

James A Mohler · Accepted Answer · 2013-11-05T20:27:41.437

2

You can use

<cflocation url = "newpage.cfm" addToken = "no" statusCode = "303">

See https://learn.adobe.com/wiki/display/coldfusionen/cflocation for more details

edited Nov 05 '13 at 20:27

answered Nov 05 '13 at 20:21

James A Mohler

11,060
15
46
72

But then I would lose all my input field values, no? The reason I self-submit is in case something fails a validation. – Phillip Senn Nov 05 '13 at 20:25
You only use the `` if your post operation was successful. Otherwise, repopulate your form – James A Mohler Nov 05 '13 at 20:27
Oh. If there is something invalid, then I should put my form values in the session scope, do a cflocate back to the original form and repopulate the form values from the session scope? – Phillip Senn Nov 05 '13 at 20:30
If form is valid then do relocation, else repopulate. Session variables are not used for either operation – James A Mohler Nov 05 '13 at 20:32
1

Oh, I got you. After the self post, redirect to a new page. Or actually, do a cflocate back to the same page so that it's no longer a post. – Phillip Senn Nov 05 '13 at 20:35
But where does the 303 come in? – Phillip Senn Nov 05 '13 at 22:18
Are you asking a request lifecycle question? – James A Mohler Nov 06 '13 at 05:49

score 0 · Answer 2 · answered Nov 14 '13 at 16:30

One idea that I'm playing with is not submitting the form at all. Instead I change the button type="submit" to button type="button" and have JavaScript do an AJAX call to save the form and then do a window.replace so that when the user presses the back button, they don't have a long tail of browser history:

Here's my form:

<form method="post">
   <button type="button" id="Save">Save</button>
</form>

And here's my JavaScript:

(function() {
    $(document).on('click','#Save',SaveClicked);
    function SaveClicked() {
        var local = {};

        local.data = {};
        local.data.method = 'Save';
        local.dataType = 'text'; // no return value.
        local.Promise = $.ajax('xxx.cfc',local);
        local.Promise.done(done);
        local.Promise.fail(fail);
    }
    function done(data, textStatus, jqXHR) {
        window.location.replace(window.location.pathname);
    }
    function fail(jqXHR, textStatus, errorThrown) {
        debugger;
    }
})();

More on 303 redirect

2 Answers2