jQuery Mobile and Pages: Programmatically changing pages

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
Massimo ScolaSoftware EngineerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
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 EngineerAuthor 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).
leakim971PluritechnicianCommented:
I ran the function from the developer console because I did not added the cordova.js

Maybe you've Javascript error somewhere
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Massimo ScolaSoftware EngineerAuthor 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 EngineerAuthor Commented:
And no - I am not getting any error messages in JavaScript.
leakim971PluritechnicianCommented:
I see you've goToAddItems vs goToCards

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Massimo ScolaSoftware EngineerAuthor 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"
leakim971PluritechnicianCommented:
running goToAddItems() from the dev console change the page, the screenshot provided previously was done after that
leakim971PluritechnicianCommented:
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 EngineerAuthor 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 EngineerAuthor 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!
leakim971PluritechnicianCommented:
you're welcome
have fun with you dev
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
phonegap

From novice to tech pro — start learning today.