CODEWITHSUNDEEP
javascripthtmlioscordova
Shahid Iqbal
Shahid Iqbal

Reputation: 2058

Phonegap Navigation bar not working for multiple html pages

I am working on multiple HTML page phoneGap application and i want to implement a navigation bar.

I am using the following code for phoneGap navigation bar implementation:

In index.html, I have defined navigation bar like this:

function onDeviceReady() {
  plugins.navigationBar.init();

  // or .create("BlackOpaque") to apply a certain style
  plugins.navigationBar.create("BlackOpaque"); 

  plugins.navigationBar.setTitle("Home");
  plugins.navigationBar.hideLeftButton();
  plugins.navigationBar.hideRightButton();
  plugins.navigationBar.show();
}

When i run app, it creates a nav bar at top of index page with title labelled as HOME, without left or right navBarButton as I don't need it in home page.

But when I go to next HTML page xyz.html by clicking on a button, the navBar show same behaviour: i.e same Title without left and write button.

But I want it to change the title for the currently loaded page and also insert leftNavBarButton label as back so that I can also go back to previous page.

But it is not happening. I have also tried to write a script in xyz.html page that should change its title and put leftNavBarButton as back but not working.

Its static throughout the app with same title and i am unable to go back to previous page. I want its behaviour to be global which changes with every page and maintain the state of previous pages as well! How can i do this?

Upvotes: 3

Views: 1720

Answers (1)

Littm
Littm

Reputation: 4947

If you're using a single-page template (= 1 jQuery Mobile page per HTML file), you have to include your JS code in every HTML files.

What you can do is to put all your custom JS code inside a JS file and import it in every HTML pages you have. Also, import any other JS lib you'll use in every pages.

Ex:

<script src="./js/navigationbar.js"</script>
<script src="./js/myjs.js"></script>
...
...

Another solution would be to force the refresh of the pages when navigating to them.

In this case, you don't have to import all your JS code in every pages, and for each HTML file, you can import the JS files which are required for this given file.

Upvotes: 2

Related Questions