How To Bind The Event "pageshow" For An External Html File With Jquery Mobile
I´m developing a web app using JQuery Mobile (ver 1.3.0). If a have only one HTML file, I can bind the 'pageshow' event to the page div:
Solution 1:
There are 2 possible ways here:
First solution. In case you are using multiple HTML files and all of them are loaded with an ajax (this is a standard jQuery Mobile way of page loading). In this case all of javascript must be loaded into the first html file, because jQM will load only BODY content of other html files.
Example :
index.html :
<!DOCTYPE html><html><head><title>jQM Complex Demo</title><metaname="viewport"content="width=device-width, height=device-height, initial-scale=1.0"/><linkrel="stylesheet"href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /><scriptsrc="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script><scriptsrc="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script><script>
$(document).on('pagebeforeshow', '#index', function(){
alert('This is a first page!');
});
$(document).on('pagebeforeshow', '#second', function(){
alert('This is a second page!');
});
</script></head><body><divdata-role="page"id="index"data-theme="b"><divdata-role="header"data-theme="a"><h3>First page</h3></div><divdata-role="content"><adata-role="button"id="some-btn"href="second.html">Open next page</a></div><divdata-theme="a"data-role="footer"data-position="fixed"></div></div></body></html>second.html :
<divdata-role="page"id="second"data-theme="b"><divdata-role="header"data-theme="a"><h3>Second page</h3></div><divdata-role="content">
This is a second page
</div><divdata-theme="a"data-role="footer"data-position="fixed"></div></div>Second solution. In case you have multiple HTML files but all your pages are linked wit links having rel="external" attribute or ajax is turned of on app level. In this case every html page must have its own HEAD and BODY. And every page must have it own javascript.
Example :
index.html :
<!DOCTYPE html><html><head><title>jQM Complex Demo</title><metaname="viewport"content="width=device-width, height=device-height, initial-scale=1.0"/><linkrel="stylesheet"href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /><scriptsrc="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script><scriptsrc="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script><script>
$(document).on('pagebeforeshow', '#index', function(){
alert('This is a first page!');
});
</script></head><body><divdata-role="page"id="index"data-theme="b"><divdata-role="header"data-theme="a"><h3>First page</h3></div><divdata-role="content"><adata-role="button"id="some-btn"href="second.html"rel="external">Open next page</a></div><divdata-theme="a"data-role="footer"data-position="fixed"></div></div></body></html>second.html :
<!DOCTYPE html><html><head><title>jQM Complex Demo</title><metaname="viewport"content="width=device-width, height=device-height, initial-scale=1.0"/><linkrel="stylesheet"href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /><scriptsrc="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script><scriptsrc="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script><script>
$(document).on('pagebeforeshow', '#second', function(){
alert('This is a second page!');
});
</script></head><body><divdata-role="page"id="second"data-theme="b"><divdata-role="header"data-theme="a"><h3>Second page</h3></div><divdata-role="content">
This is a second page
</div><divdata-theme="a"data-role="footer"data-position="fixed"></div></div></body></html>
Post a Comment for "How To Bind The Event "pageshow" For An External Html File With Jquery Mobile"