All geek questions in one place

JQuery and PhoneGap. Include client HTML file with HTML or JS?

I am building my own Android application using PhoneGap and jQuery Mobile.

When I create a multi-page page, I do not have to constantly turn on the same navigation bar. So I tried to include html (s). But that will not work. This is what I have tried so far:

<!--#include file="navigation.inc.html" --> <!--#include virtual="navigation.inc.html" --> <!--#include file="navigation.inc.shtml" --> <!--#include virtual="navigation.inc.shtml" -->

This page does not fit on (web server). When navigation.inc.shtml is not a server, is it possible to include a file with html or javascript?

+6
source share
3 answers

I ran into the same problem. As far as I can tell, Android is ignoring the server side.

I approached the answer with load based on this answer , but I take a slightly different approach:

Wherever you need to include an external file:

 <div data-include="footer"></div>

Then, at the end of my (multipage) index.html

 $('div[data-include]').each(function() { $(this).load( $(this).attr('data-include') + '.html').trigger('create'); });

The problem is that it does not work for the initial viewing of the page. Any subsequent pages look great.

+4
source

I was looking for a one-time approach to data-role = "footer" and got it working as shown below. What I don't like 1.) its not from the include file, so 2.) the navigator code is a little difficult to read and maintain. (This code is NOT included in the .ready document.)

 var myFooter = '<div data-role="navbar"><ul><li><a href="#myPageName" >Send</a></li><li><a href="#myPageTwo" >Set Up</a></li><li><a href="#myPageThree" >Help</a></li></ul></div>'; // use this code pointing to each data-role="footer" where you want this navbar $('div#myPageName').live("pagebeforecreate", function(){ $('div#myFooterName').html(myFooter) })

The pagecreate event also works.

+1
source

I used client-side JavaScript code as suggested above from Jhof.

example template for navigation header:

 <body onLoad="initialization()"> .... <div template-include="nav-header"> </div> <script type="text/javascript"> function loadTemplates() { $('div[template-include]').each(function() { $(this).load('tpl/' + $(this).attr('template-include') + '.html').trigger('create'); }); } function initialization() { .... loadTemplates(); .... } </script> <body>

I created an initialization function where I call all my init functions as loadTemplates()

my initializationFunction is called from the body.onLoad event. onLoad event fire at the end of the html! parsing

Thus, it also works on the initial pageview.

+1
source

Source: https://habr.com/ru/post/906855/

More articles:


All Articles