{"id":856,"date":"2013-01-10T15:20:00","date_gmt":"2013-01-10T15:20:00","guid":{"rendered":"https:\/\/ibex.tech\/javascript\/?p=856"},"modified":"2022-02-17T07:14:46","modified_gmt":"2022-02-17T07:14:46","slug":"changing-page","status":"publish","type":"post","link":"https:\/\/ibex.tech\/javascript\/jquery-mobile\/pages\/changing-page","title":{"rendered":"Changing Page"},"content":{"rendered":"<h4>\nChanging The Page From Javascript<br \/>\n<\/h4>\n<p>\nUse the $.mobile.changePage method which allows you to transition to another page as if the user clicked a link.&nbsp;\n<\/p>\n<pre>\r\n<code>\r\n\t\/\/Load an external page\r\n\t$.mobile.changePage(&quot;some_external_page.html&quot;);\r\n\t\r\n\t\/\/Transition to an internal page in the same document\r\n\t$.mobile.changePage($(&quot;#ThePageId&quot;));\r\n<\/code><\/pre>\n<p>\n&nbsp;\n<\/p>\n<h5>\nchangePage Properties<br \/>\n<\/h5>\n<p>\n&nbsp;\n<\/p>\n<p>\ntransition\n<\/p>\n<p style=\"margin-left: 40px;\">\ntransition name (default: &quot;slide&quot;)\n<\/p>\n<p>\nreverse\n<\/p>\n<p style=\"margin-left: 40px;\">\ntrue\/ false (default: false)\n<\/p>\n<p>\ntype\n<\/p>\n<p style=\"margin-left: 40px;\">\n&quot;get&quot;\/&quot; post&quot; (default: &quot;get&quot;)\n<\/p>\n<p>\nHTTP method to use to load the external page\n<\/p>\n<p>\ndata\n<\/p>\n<p style=\"margin-left: 40px;\">\nobject or string\n<\/p>\n<p style=\"margin-left: 40px;\">\nData to be sent when POST is defined\n<\/p>\n<p>\nallowSamePageTransition\n<\/p>\n<p style=\"margin-left: 40px;\">\ntrue\/ false (default: false)\n<\/p>\n<p style=\"margin-left: 40px;\">\nAllow transition to the same page as the active one (transition to itself)\n<\/p>\n<p>\nchangeHash\n<\/p>\n<p style=\"margin-left: 40px;\">\ntrue\/ false (default: true)\n<\/p>\n<p style=\"margin-left: 40px;\">\nShould the new page be in the history\n<\/p>\n<p>\ndata-url\n<\/p>\n<p style=\"margin-left: 40px;\">\nstring\n<\/p>\n<p style=\"margin-left: 40px;\">\nThe URL to be attached in the location\n<\/p>\n<p>\npageContainer\n<\/p>\n<p style=\"margin-left: 40px;\">\njQuery DOM object\n<\/p>\n<p style=\"margin-left: 40px;\">\nThe container where to attach the new page\n<\/p>\n<p>\nreloadPage\n<\/p>\n<p style=\"margin-left: 40px;\">\ntrue\/ false (default: false)\n<\/p>\n<p style=\"margin-left: 40px;\">\nTo force the reload of the page, even if its cached on the DOM\n<\/p>\n<p>\nshowLoadMsg\n<\/p>\n<p style=\"margin-left: 40px;\">\ntrue\/ false (default: true)\n<\/p>\n<p style=\"margin-left: 40px;\">\nDetermines whether the page loading message should be visible after some milliseconds or not\n<\/p>\n<p>\nrole\n<\/p>\n<p style=\"margin-left: 40px;\">\npage\/dialog (default defined by data-role)\n<\/p>\n<p style=\"margin-left: 40px;\">\nThe role to be applied to the new page\n<\/p>\n<p>\nFor example\n<\/p>\n<pre>\r\n<code>\r\n$.mobile.changePage($(&quot;#page2&quot;), {\r\n\ttransition: &quot;slide&quot;,\r\n\treverse: true\r\n});\r\n<\/code><\/pre>\n<h4>\nExample<br \/>\n<\/h4>\n<pre>\r\n<code>\r\n$(document).bind(&#39;mobileinit&#39;, function() {\r\n\t\/\/Initialization\r\n\r\n});\r\n\r\n\t\/\/----- SLIDE TO CHANGE PAGE -----\r\n\t$(document).live(&quot;swipeleft&quot;, function () {\r\n\t\t$.mobile.changePage(&quot;#Page1&quot;, {\r\n\t\t\ttransition: &quot;slide&quot;,\r\n\t\t\treverse: false\r\n\t\t});\r\n\t\t\r\n\t});\r\n\t\r\n\t$(document).live(&quot;swiperight&quot;, function () {\r\n\t\t$.mobile.changePage(&quot;#Page0&quot;, {\r\n\t\t\ttransition: &quot;slide&quot;,\r\n\t\t\treverse: true\r\n\t\t});\r\n\t});\r\n<\/code><\/pre>\n<p>\n&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Changing The Page From Javascript Use the $.mobile.changePage method which allows you to transition to another page as if the user clicked a link.&nbsp; \/\/Load an external page $.mobile.changePage(&quot;some_external_page.html&quot;); \/\/Transition to an internal page in the same document $.mobile.changePage($(&quot;#ThePageId&quot;)); &nbsp; changePage Properties &nbsp; transition transition name (default: &quot;slide&quot;) reverse true\/ false (default: false) type &quot;get&quot;\/&quot; [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[86],"tags":[],"class_list":["post-856","post","type-post","status-publish","format-standard","hentry","category-pages"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/comments?post=856"}],"version-history":[{"count":9,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/856\/revisions"}],"predecessor-version":[{"id":1368,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/856\/revisions\/1368"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/media?parent=856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/categories?post=856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/tags?post=856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}