jQuery Mobile and Pages: Programmatically changing pages

Massimo Scola
Massimo Scola used Ask the Experts™
on
I am creating a Cordova app and I am using a single file. The application makes use of jQuery Mobile and I have created several sections inside the document using pages, like:

 <div data-role="page" id="addItems" style="background-color: white">

Open in new window


I created the following code in the JavaScript file:

function goToAddItems() {
  console.log('got to goToCards');
  $(':mobile-pagecontainer').pagecontainer('change', '#addItems');
}


/**
 * This is the main class
 */
var app = {

  //create initialize function:
  initialize: function () {
    document.addEventListener(
      "deviceready",
      this.onDeviceReady.bind(this),
      false
    );
  },

  // deviceready Event Handler
  onDeviceReady: function () {
    this.receivedEvent("deviceready");
  },

  // Update DOM on a Received Event
  receivedEvent: function (id) {
    
    $("#allWidgets").on("click", function (e) {
     this.goToAddItems();
      
    });

Open in new window


How do I programmatically

a) only display the home page when the app loads? and
b) how do change from one page to the other? I created the function goToAddItems()  -  but that doesn't seem to work.

Can anyone please guide me how this is done with the latest version of jQuery Mobile (1.4+)?

Thanks

Massimo

https://next.plnkr.co/edit/ru59CnaduxaqUyxbBvtI?p=preview&preview
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
a) only display the home page when the app loads? and

worked fine for me as you can see :
worked fine
b) how do change from one page to the other? I created the function goToAddItems()  -  but that doesn't seem to work.

your function is fine and do the job but how do you call it ? If I run it from developer console it do the job :
gotoadditems ok
Massimo ScolaSoftware Engineer

Author

Commented:
Are you saying that the function I wrote works for you?

That is strange:

The function

function goToAddItems() {
  $(':mobile-pagecontainer').pagecontainer('change', '#addItems');
}

Open in new window


called from


/**
 * This is the main class
 */
var app = {

  //create initialize function:
  initialize: function () {
    document.addEventListener(
      "deviceready",
      this.onDeviceReady.bind(this),
      false
    );
  },

  // deviceready Event Handler
  onDeviceReady: function () {
    this.receivedEvent("deviceready");

  },
  // Update DOM on a Received Event
  receivedEvent: function (id) {
    
    $("#allWidgets").on("click", function (e) {
     goToAddItems();      
    });

Open in new window


Doesn't do anything - it does not move to the page / the div with the ID addItems

That function is called when the user clicks on the button "View All Widgets" (for testing only).
leakim971Multitechnician
Top Expert 2014

Commented:
I ran the function from the developer console because I did not added the cordova.js

Maybe you've Javascript error somewhere
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Massimo ScolaSoftware Engineer

Author

Commented:
That is really interesting - because I also ran it from the developer console - I typed goToAddItems() and nothing happened.

Is there any other way how this can be achieved - without using <pages> ?
Massimo ScolaSoftware Engineer

Author

Commented:
And no - I am not getting any error messages in JavaScript.
Multitechnician
Top Expert 2014
Commented:
I see you've goToAddItems vs goToCards

function goToAddItems() {
and
        $("#allWidgets").on("click", function(e) {
            this.goToCards();
        });
Massimo ScolaSoftware Engineer

Author

Commented:
Yes, you are right - I have already changed that and nothing happened.

Is  

$(':mobile-pagecontainer').pagecontainer('change', '#addItems');

correct?

I tried running the file without Cordova, but still no luck. I cannot move to the page "addItems"
leakim971Multitechnician
Top Expert 2014

Commented:
running goToAddItems() from the dev console change the page, the screenshot provided previously was done after that
leakim971Multitechnician
Top Expert 2014

Commented:
I removed the protocol for all your ressources and run the function after 4s to change the page.
Also I move the index.js in the js folder
It work fine here : https://next.plnkr.co/edit/T0R5AFyoY4Iuw3HK
Massimo ScolaSoftware Engineer

Author

Commented:
OK it works in your code - it changes from one "page" to another "page".
Let me put this into my code and run it via Apache Cordova (Phonegap).
Massimo ScolaSoftware Engineer

Author

Commented:
Oh my god - it was a typo!

My page was still called add-items and not addItems.

Your code works like a charm.

You're a star leakim971!

Thank you so much for your help and the time spent on this issue!
leakim971Multitechnician
Top Expert 2014

Commented:
you're welcome
have fun with you dev

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial