From 522b48ee8449245028a6bec8477fb45b1a3d0408 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 5 Sep 2011 13:05:57 -0400 Subject: [PATCH 1/5] started on the change to allow default prevention on beforechangepage --- js/jquery.mobile.navigation.js | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) mode change 100644 => 100755 js/jquery.mobile.navigation.js diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js old mode 100644 new mode 100755 index 5de30268..d2100440 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -837,6 +837,19 @@ // Make sure we have a pageContainer to work with. settings.pageContainer = settings.pageContainer || $.mobile.pageContainer; + var mpc = settings.pageContainer, + bcpEvent = new $.Event( "beforechangepage" ), + url = toPage; + + // Let listeners know we're about to change the current page. + mpc.trigger( bcpEvent, url, settings ); + + // If the default behavior is prevented, stop here! + if( bcpEvent.isDefaultPrevented() ){ + return; + } + + // If the caller passed us a url, call loadPage() // to make sure it is loaded into the DOM. We'll listen // to the promise object it returns so we know when @@ -864,8 +877,7 @@ // The caller passed us a real page DOM element. Update our // internal state and then trigger a transition to the page. - var mpc = settings.pageContainer, - fromPage = $.mobile.activePage, + var fromPage = $.mobile.activePage, url = toPage.jqmData( "url" ), // The pageUrl var is usually the same as url, except when url is obscured as a dialog url. pageUrl always contains the file path pageUrl = url, @@ -876,9 +888,6 @@ pageTitle = document.title, isDialog = settings.role === "dialog" || toPage.jqmData( "role" ) === "dialog"; - // Let listeners know we're about to change the current page. - mpc.trigger( "beforechangepage" ); - // If we are trying to transition to the same page that we are currently on ignore the request. // an illegal same page request is defined by the current page being the same as the url, as long as there's history // and toPage is not an array or object (those are allowed to be "same") From 701b381cc4eb9e6310dc6ad99671420b2ee06c39 Mon Sep 17 00:00:00 2001 From: Kin Blas Date: Tue, 6 Sep 2011 16:56:20 -0700 Subject: [PATCH 2/5] Couple of modifications to changePage(): - Moved the setting of isPageTransitioning *AFTER* the beforechangepage notification. - Modified the trigger("beforechangepage") call to pass the args to changePage() as an object since trigger only expects one data arg. --- js/jquery.mobile.navigation.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index d2100440..86f61421 100755 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -826,12 +826,6 @@ return; } - // Set the isPageTransitioning flag to prevent any requests from - // entering this method while we are in the midst of loading a page - // or transitioning. - - isPageTransitioning = true; - var settings = $.extend( {}, $.mobile.changePage.defaults, options ); // Make sure we have a pageContainer to work with. @@ -842,14 +836,19 @@ url = toPage; // Let listeners know we're about to change the current page. - mpc.trigger( bcpEvent, url, settings ); + mpc.trigger( bcpEvent, { url: url, settings: settings } ); // If the default behavior is prevented, stop here! if( bcpEvent.isDefaultPrevented() ){ return; } - + // Set the isPageTransitioning flag to prevent any requests from + // entering this method while we are in the midst of loading a page + // or transitioning. + + isPageTransitioning = true; + // If the caller passed us a url, call loadPage() // to make sure it is loaded into the DOM. We'll listen // to the promise object it returns so we know when From 6aa8c8f3b0cb769d2caac329834c605d9af32d9e Mon Sep 17 00:00:00 2001 From: Kin Blas Date: Wed, 7 Sep 2011 18:03:38 -0700 Subject: [PATCH 3/5] - Added "fromPage" option to changePage(). This used to be in there before the navigation re-work, I just added it back in. - Added "dataUrl" option to changePage(). This allows a caller to specify a page element to change to, but specify an alternate URL for location display purposes. This is useful for dynamic applications that re-use and over-write existing page content to avoid overwhelming the DOM. - Renamed the "beforechangepage" and "changepage" events to "pagebeforechange" and "pagechange" respectively. This was done to match the page widget naming of its notifications. Left the triggers for the old events in place but with DEPRECATED comments. - Renamed the properties of the data object passed to the page events. --- js/jquery.mobile.navigation.js | 38 ++++++++++++++++++++++++---------- 1 file changed, 27 insertions(+), 11 deletions(-) diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index 86f61421..0ea0b247 100755 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -831,18 +831,28 @@ // Make sure we have a pageContainer to work with. settings.pageContainer = settings.pageContainer || $.mobile.pageContainer; + // Make sure we have a fromPage. + settings.fromPage = settings.fromPage || $.mobile.activePage; + var mpc = settings.pageContainer, - bcpEvent = new $.Event( "beforechangepage" ), - url = toPage; + pbcEvent = new $.Event( "pagebeforechange" ), + triggerData = { toPage: toPage, options: settings }; // Let listeners know we're about to change the current page. - mpc.trigger( bcpEvent, { url: url, settings: settings } ); + mpc.trigger( pbcEvent, triggerData ); + + mpc.trigger( "beforechangepage", triggerData ); // XXX: DEPRECATED for 1.0 // If the default behavior is prevented, stop here! - if( bcpEvent.isDefaultPrevented() ){ + if( pbcEvent.isDefaultPrevented() ){ return; } - + + // We allow "pagebeforechange" observers to modify the toPage in the trigger + // data to allow for redirects. Make sure our toPage is updated. + + toPage = triggerData.toPage; + // Set the isPageTransitioning flag to prevent any requests from // entering this method while we are in the midst of loading a page // or transitioning. @@ -869,15 +879,16 @@ //release transition lock so navigation is free again releasePageTransitionLock(); - settings.pageContainer.trigger("changepagefailed"); + settings.pageContainer.trigger( "pagechangefailed", triggerData ); + settings.pageContainer.trigger( "changepagefailed", triggerData ); // XXX: DEPRECATED for 1.0 }); return; } // The caller passed us a real page DOM element. Update our // internal state and then trigger a transition to the page. - var fromPage = $.mobile.activePage, - url = toPage.jqmData( "url" ), + var fromPage = settings.fromPage, + url = ( settings.dataUrl && path.convertUrlToDataUrl( settings.dataUrl ) ) || toPage.jqmData( "url" ), // The pageUrl var is usually the same as url, except when url is obscured as a dialog url. pageUrl always contains the file path pageUrl = url, fileUrl = path.getFilePath( url ), @@ -895,7 +906,8 @@ // to the same page. if( fromPage && fromPage[0] === toPage[0] ) { isPageTransitioning = false; - mpc.trigger( "changepage" ); + mpc.trigger( "pagechange", triggerData ); + mpc.trigger( "changepage", triggerData ); // XXX: DEPRECATED for 1.0 return; } @@ -982,7 +994,9 @@ releasePageTransitionLock(); // Let listeners know we're all done changing the current page. - mpc.trigger( "changepage" ); + mpc.trigger( "pagechange", triggerData ); + + mpc.trigger( "changepage", triggerData ); // XXX: DEPRECATED for 1.0 }); }; @@ -994,7 +1008,9 @@ role: undefined, // By default we rely on the role defined by the @data-role attribute. duplicateCachedPage: undefined, pageContainer: undefined, - showLoadMsg: true //loading message shows by default when pages are being fetched during changePage + showLoadMsg: true, //loading message shows by default when pages are being fetched during changePage + dataUrl: undefined, + fromPage: undefined }; /* Event Bindings - hashchange, submit, and click */ From fb1c8bee81eadbf0b16b05c087c415825606b5b7 Mon Sep 17 00:00:00 2001 From: toddparker Date: Thu, 8 Sep 2011 10:58:23 -0400 Subject: [PATCH 4/5] Added a non-adax form submit example. Improved the styling of the forms and confirmation pages. --- docs/forms/forms-sample-response.php | 7 ++++-- docs/forms/forms-sample.html | 35 +++++++++++++++++++++------- 2 files changed, 31 insertions(+), 11 deletions(-) diff --git a/docs/forms/forms-sample-response.php b/docs/forms/forms-sample-response.php index fe0e7224..dfbdbe0c 100755 --- a/docs/forms/forms-sample-response.php +++ b/docs/forms/forms-sample-response.php @@ -27,12 +27,15 @@

You Chose:

- +
" . $_REQUEST['shipping'] . "

"; ?> - + +
+ + Change shipping method diff --git a/docs/forms/forms-sample.html b/docs/forms/forms-sample.html index fee85b17..ce964e87 100755 --- a/docs/forms/forms-sample.html +++ b/docs/forms/forms-sample.html @@ -27,17 +27,14 @@

In jQuery Mobile, form submissions are automatically handled using Ajax whenever possible, creating a smooth transition between the form and the result page. To ensure your form submits as intended, be sure to specify action and method properties on your form element. When unspecified, the method will default to get, and the action will default to the current page's relative path (found via $.mobile.path.get()

Forms also accept attributes for transitions just like anchors, such as data-transition="pop" and data-direction="reverse". To submit a form without Ajax, you can either disable Ajax form handling globally, or per form via the data-ajax="false" attribute. The target attribute (as in target="_blank") is respected on forms as well, and will default to the browser's handling of that target when the form submits. Note that unlike anchors, the rel attribute is not allowed on forms.

- -

Non-Ajax handling

- -

To prevent form submissions from being automatically handled with Ajax, add the data-ajax="false" attribute to the form element. You can also turn of Ajax form handling completely via the ajaxEnabled global config option.

+ -

Simple Ajax form example

-

This page demonstrates automated ajax handling of form submissions. The form below is configured to send regular a get request to forms-sample-response.php. On submit, jQuery Mobile will make sure that the Url specified is able to be retrieved via Ajax, and handle it appropriately. Keep in mind that just like ordinary HTTP form submissions, jQuery Mobile allows get result pages to be bookmarked by updating the Url hash when the response returns successfully. Also like ordinary form submissions, post requests do not contain query parameters in the hash, so they are not bookmarkable.

-
+

Default Ajax form example

+

This demonstrates automated ajax handling of form submissions. The form below is configured to send regular a get request to forms-sample-response.php. On submit, jQuery Mobile will make sure that the Url specified is able to be retrieved via Ajax, and handle it appropriately. Keep in mind that just like ordinary HTTP form submissions, jQuery Mobile allows get result pages to be bookmarked by updating the Url hash when the response returns successfully. Also like ordinary form submissions, post requests do not contain query parameters in the hash, so they are not bookmarkable.

+
- +
- + +
+
+ +

Non-Ajax form example

+ +

To prevent form submissions from being automatically handled with Ajax, add the data-ajax="false" attribute to the form element. You can also turn of Ajax form handling completely via the ajaxEnabled global config option.

+ +

The form below is identical to the one above except for the addition of the data-ajax="false" attribute attribute. When the submit button is pressed, it will result in a full page refresh.

+
+
+
+ + +
+
From 557da74be039efbe9cbf78d0fd1d9d3a72bd4cae Mon Sep 17 00:00:00 2001 From: toddparker Date: Thu, 8 Sep 2011 11:30:42 -0400 Subject: [PATCH 5/5] Fixed typo in button state active default docs. Closes #2403. Thanks jasonrsavino! --- docs/api/globalconfig.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/globalconfig.html b/docs/api/globalconfig.html index e09fcbbe..6c3bbab8 100755 --- a/docs/api/globalconfig.html +++ b/docs/api/globalconfig.html @@ -92,7 +92,7 @@ $(document).bind("mobileinit", function(){
The class assigned to page currently in view, and during transitions
-
activeBtnClass string, default: "ui-page-active"
+
activeBtnClass string, default: "ui-btn-active"
The class used for "active" button state, from CSS framework.
ajaxEnabled boolean, default: true