Databases
StackOverflow2013
Postsdbo
PORe-POST-ing a form using Ajax, for back/fwd history, in jQuery Mobile
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORe-POST-ing a form using Ajax, for back/fwd history, in jQuery Mobile
    primarykey
    data
    text
    <p>I'm investigating the suitability of the jQM history management for my organization's mobile web site. Part of our requirement is that when a user posts a form, it posts using Ajax. When a user taps "back" and then "forward" browser buttons, we need to re-post the form using Ajax again. Here's a diagram:</p> <ol> <li>[home.php: post to new.php] => </li> <li>[new.php: post to list.php] => </li> <li>[from list.php, click back twice to home.php] => </li> <li>[* home.php: click fwd, does a GET request to new.php *] =></li> <li>[* new.php: click fwd, does a GET request to list.php *]</li> </ol> <p>[*] not the behavior I want. I want to re-POST data from steps 1 and 2</p> <p>During steps 4 and 5, I want to intercept the jQM execution at the "pagebeforeload" event (seems like the right place), and modify the data.options.data (to include the serialized post data) and data.options.type (to POST) properties of the data object which is passed to the event handler. Then I'd let the pageload process move on with the modified values. This, I think, would give me the behavior I want.</p> <p>So far, I see that I can intercept the pagebeforeload event and modify the values with the below event handler:</p> <pre class="lang-js prettyprint-override"><code>$(document).bind("pagebeforeload", function( e, data ) { console.log(data.toPage); console.log(data.options); data.options.type = "POST"; data.options.data = "edit=Hanford"; } ); </code></pre> <p>But the missing piece is, how can I "store" the information in steps 1 and 2, such that when I intercept the pagebeforeload event in 4 and 5, I can know to modify the "type" and "data" properties properly.</p> <p>I've made a jquery/browser History prototype to illustrate the behavior I would like to get from jQuery Mobile. The JavaScript is:</p> <pre class="lang-js prettyprint-override"><code>$(window).load(function() { //listen to the history popstate event $(window).bind('popstate', function(e) { if (e.originalEvent.state &amp;&amp; e.originalEvent.state.type &amp;&amp; e.originalEvent.state.type == "post") { //do an ajax post based on what is stored in history state $.post(e.originalEvent.state.path, e.originalEvent.state.data, function(data) {jaxer(data,'POST')}); } else if (e.originalEvent.state !== undefined){ //do an ajax get $.get(location.pathname, function(data) {jaxer(data,'GET')}); } }); //add event listeners addClickHandler(); }); function jaxer(data, msg) { if (msg) {console.log(msg+' request made using ajax');} $('#slider')[0].innerHTML = data; addClickHandler(); } //hijax hyperlinks and form submissions function addClickHandler() { $('a').click(function(e) { history.pushState({ path: this.path }, '', this.href); $.get(this.href, function(data) {jaxer(data,'GET')}); e.preventDefault() }); $('form').submit(function(e) { var formData = $(this).serialize(); console.log('saving serialized form data into historyState: '+formData); history.pushState({path: this.action, data: formData, type: "post"},'',this.action); $.post(this.action, $(this).serialize(), function(data) {jaxer(data,'POST')}); e.preventDefault(); }); //add the form submit button to the form as a hidden input such that it will get serialized $('form input[type="submit"]').click(function() { $(this.form).append("&lt;input type='hidden' name='" + this.name + "' value='" + this.value + "'/&gt;"); }); console.log("event handlers added to DOM"); }; </code></pre> <p>When a user-initiated POST occurs, I put the serialized POST data into the history's state object. Then, when a popstate event occurs, I can query the state object for this information. If I find it, then I can perform an ajax POST. I would like to get the same functionality within the jQuery Mobile history handling. That way I can take advantage of the page change animations, etc.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USSerge P
    1. USMatt
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PORe-POST-ing a form using Ajax, for back/fwd history, in jQuery Mobile
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PORe-POST-ing a form using Ajax, for back/fwd history, in jQuery Mobile
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COThis is going to seem like a simplistic answer, but, have you considered simply adding the attribute data-ajax="false" to the form tag and letting things work normally?
      singulars
      1. PORe-POST-ing a form using Ajax, for back/fwd history, in jQuery Mobile
      1. USsgliser
    2. COThat won't work for us. We are primarily navigating users in our site via POST requests (backend requirement). But we want to use Ajax for the site speed and usability benefits.
      singulars
      1. PORe-POST-ing a form using Ajax, for back/fwd history, in jQuery Mobile
      1. USMatt
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload