[RESOLVED] Page not loading during first click on link - Framework7


#1

Am playing with Framework7 for mobile app development.

Am facing a small issue now. I have the following setup:

var $$ = Dom7;

var app  = new Framework7({

    //.....

    

    routes: routes
});

var homeView = app.views.create('#view-home', {
  url: '/'
});

var settingsView = app.views.create('#view-settings', {
    url: '/settings/'
});

And now I have created a new page inside /pages/new-msg.html with the following content:

<div class="page" data-name="new-msg">
	<div class="navbar">
		<div class="navbar-inner sliding">
			<div class="left">
				<a href="#" class="link back">
					<i class="icon icon-back"></i>
					<span class="ios-only">Back</span>
				</a>
			</div>
	  
			<div class="title">Create New Message</div>
		</div>
	</div>
  
	<div class="page-content">
		<div class="block block-strong">
			testing...
		</div>
	</div>
</div>

And my routes.js is like this:

routes = [
  {
    path: '/',
    url: './index.html',
  },
  {
    path: '/new-msg/',
    url: './pages/new-msg.html',
  },

  //.......

];

And inside my index.html (my home page), I have created a FAB button like this:

<div class="fab fab-right-bottom color-red">
	<a href="/new-msg/" class="link">
		<i class="icon f7-icons">add</i>														
	</a>
</div>

The problem is, when I click on the FAB button(add button) at runtime, on the first click it won’t open up the New Msg page. But if I click on the button again, it opens up. And if press back button(from the New Msg page) and clicks on the button again(single time) it opens up without issues.

So, only during the first time, the first click doesn’t open up the New Msg page. I think its not loaded to the DOM ? Is there any workaround for this so that I can open it up in the first click itself?

Thank you


#2

Hey DEV! Good Morning (BR)
Everything seems right in this syntax.

Try post live code in https://jsfiddle.net/jhowjhoe/tynqcuwm/5/


#3

Thanks for the quick response.

I can see that you are using the “content” attribute to fill the html content for the new page. When I tested in similar fashion(by copy-pasting my html inside the content attribute), the page is loading without issues in a single click itself!

But my html for that page is long. Almost 140 lines of codes. Because I have included extra information, like examples, how to create the msg, etc.

So, is there anyway that I can use the page’s url instead of copy-pasting the entire html inside the routes?

Thank you


#4

Maybe @nolimits4web can help you. I do not know any other way, I’m sorry.


#5

The problem seems to be that, first time, when we click on the link to load the view, it might be adding the page to the DOM. Only on the second time it gets initialized?

Because when I added this for that route:

  {
    path: '/new-msg/',
    url: './pages/new-msg.html',
	on: {
        pageAfterIn: function (e, page) {
          console.log('gets inside view');
        },
        pageInit: function (e, page) {
          // do something when page initialized
		  console.log('page initialized');
        },
    }
  }

Both the events are getting fired only on the second click! I mean when you click the link for the second time(initially).

Would be helpful if someone can through some ideas. As I have been waiting for several days, and this is my first mobile app project.

I have also created a thread in Stackoverflow.com with a bounty of 50 points: https://stackoverflow.com/questions/50758444/page-not-loading-during-first-click-on-link-framework7

Thank you


#6

Just test it on f7-simple view template and it works fine.
Can you share your index html?


#7

Everything should work correct here, no double clicks or whatever is required. the only thing I can suggest is the really long Ajax request (due to slow server connection) so you have to wait. You can track that in developer tools. If not, then problem is somewhere on your side. Best way to help you will be to see live example. You can upload your app somewhere with this minimal example and share the link


#8

Thanks for the help @pvtallulah and @nolimits4web
Highly appreciate it.

I tried debugging the code and found that this click issue happens only if I set dataType in the app.request.setup() method.

So, in my code when the device is ready, am setting up the request headers with accesstoken and stuff (for security purposes). Along with the headers, I was also setting the dataType to json.

When I commented that dataType: 'json' line, the click issue is not happening! Any guess on why its happening?

Here’s the piece of code (the values are just dummy):

app.request.setup({
	headers: {			
		'Accesstoken'	: app.data.access_token,
		'Apikey'		: app.data.api_key
	},
	dataType: 'json'
});

Thank you.


#9

Hey DEV! I think this paramenter is not necessary.

app.request.setup({
	headers: {			
		'Accesstoken'	: app.data.access_token,
		'Apikey'		: app.data.api_key
	},
});

Você não precisa desse parâmetro.
dataType: 'json'


#10

Yeah it worked when I removed that line.

But I thought its possible to set that parameter during setup!


#11

I’m happy to help you!!! \O/

I think the json format is set when you enter .setup in (app.request)

\O/