CODEWITHSUNDEEP
javascriptjqueryhtml-framework-7
administrator
administrator

Reputation: 173

How to do Framework7 routing with jQuery?

I am developing a hybrid mobile app with Framework7. I finished the user interface successfully and now I want to add functionality to my app. My problem is the navigation from one .html to another. At the user interface i did the navigation with links, like this:

<a href="/homepage/" class="button button-fill button-login">LOGIN</a>

Because of some checks I removed the whole href-tag and here I come to the problem, how can i do this linking in jQuery?

I tried a lot, also followed the public "Router JavaScript API" (https://v1.framework7.io/docs/router-api.html) but nothing worked well (NOTE: this is not my whole code, just the affected parts):

  1. Attempt 1

    var myApp = new Framework7 ({}); var mainView = myApp.views.add('.view-main');

    var app = { init: function () { events.doClickFunctions(); }, login: { success: function () { //here should be the linking done mainView.router.load('/homepage/'); } } };

Problem: "myApp.views.add is not a function"

  1. Attempt 2

var myApp = new Framework7 ({}); var mainView = myApp.addView('.view-main');

var app = {

    init: function () {
        events.doClickFunctions();
    },
    login: {
        success: function () {
            //here should be the linking done
            mainView.router.load('/homepage/');
        }
    }
};

Problem: "myApp.addView is not a function"

And i tried some other combinations, but nothing worked.

Furthermore, I made a workaround: If the checks are successful, the href attribute will be added with jQuery and a virtual click is made on the element. So the user experience is like i want it to, but I guess thats not how it is supposed to work?

Thank you in advance!

Upvotes: 1

Views: 687

Answers (1)

saman samadi
saman samadi

Reputation: 559

try this

        var app = new Framework7({
  id: 'io.framework7.testapp',
  precompileTemplates: true, //
  template7Pages: true,
  root: '#app',
  theme: theme,
  cache: false ,/* disable caching */
  data: function () {


  },
  methods: {
    helloWorld: function () {
      app.dialog.alert('Hello World!');
    },
  },
  routes: routes,
  vi: {
    placementId: 'pltd4o7ibb9rc653x14',
  }
});
app.views.main.router.navigate('/login/');

for routing to another Page in jq use this :

  app.views.main.router.navigate('/login/');

Upvotes: 0

Related Questions