Behold: a footer template:
<!-- Templates -->
<script type="text/template" id="templateFooter">
<div data-role="navbar">
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</script>
In every mobile page I have:
<div data-role="footer" data-position="fixed">footer</div>
The way I'm currently loading the template is:
$(function() {
$('div[data-role=footer]').html($('#templateFooter').html());
$.mobile.activePage.trigger('create');
});
This works, but I don't really like using $(function(), but I need to load it if any page shows, so pageinit or pageshow does not help. I'll be using knockout.js going forward, if that is of any help.
Is there a better way to do this?
function getTemplateFooter() {
//return footer text here
}
$("div:jqmData(role='page')").live("pagebeforecreate",function() {
// get the footer of the page
// if footer doesn't exist on page, insert it where you want it... in this case after role="content"?
var $content =$(this).page().find('div:jqmData(role="content")');
$content.after(getTemplateFooter());
}
there is also a pageshow event, that one fires even if the user navigates to the page, through a back button press etc... it bubbles up to the page div
I use it for pages where lots of dynamic data could change between subsequent visits, or even when the user just presses back
Related
I am trying to create the same panel for several pages of my html/css/js app with jquery mobile using the solution here .
But unfortuantely, it is like for the content of the panel, the jquery mobile style is not aplied....instead of this, it just plain old html.
How can I apply jquery mobile style to the content of the panel? Is there some kind of refresh command for this?
Here is my panel:
$(document).on('pagebeforeshow', '#welcome-page', function(){
$('<div>').attr({'id':'mypanel','data-role':'panel','data-position':'right','data-display':'overlay'}).appendTo($(this));
$('<a>').attr({'href':'mailto:?subject=subject of the email&body=whatever body body','target':'_blank'}).html('Send').appendTo('#mypanel');
$('<a>').attr({'id':'test-btn','data-role':'button'}).html('Click me').appendTo('#mypanel');
$('<a>').attr({'href':'#welcome-page','data-inline':'true','data-icon':'delete','data-theme':'c','data-role':'button','data-rel':'close'}).html('Close').appendTo('#mypanel');
$.mobile.activePage.find('#mypanel').panel();
$(document).on('click', '#open-panel', function(){
$.mobile.activePage.find('#mypanel').panel("open");
});
//LISTENERS:
//$("#mypanel").panel("close");
});
Here's the page:
<div id="welcome-page" data-role="page">
<!--<div data-role="panel" id="mypanel">
</div>-->
<header data-role="header">
</header>
<div id="content" data-role="content">
</div>
<footer data-role="footer">
</footer>
Thanks
I have made an original post so let me show you a different way, instead of using pagebeforeshow event you can use pagebeforecreate. It is important because at that point content is still not styled. Any dynamically added content will be automatically styled so you don't need to worry about that.
$(document).on('pagebeforecreate', '#welcome-page', function(){
$('<div>').attr({'id':'mypanel','data-role':'panel','data-position':'right','data-display':'overlay'}).appendTo($(this));
$('<a>').attr({'href':'mailto:?subject=subject of the email&body=whatever body body','target':'_blank'}).html('Send').appendTo('#mypanel');
$('<a>').attr({'id':'test-btn','data-role':'button'}).html('Click me').appendTo('#mypanel');
$('<a>').attr({'href':'#welcome-page','data-inline':'true','data-icon':'delete','data-theme':'c','data-role':'button','data-rel':'close'}).html('Close').appendTo('#mypanel');
$(document).on('click', '#open-panel', function(){
$.mobile.activePage.find('#mypanel').panel("open");
});
//LISTENERS:
//$("#mypanel").panel("close");
});
Working example made on a basis of my original answer: http://jsfiddle.net/Gajotres/pZzrk/60/
I'm using jQuery Mobile + Backbone + RequireJS. After successful login I do the following:
require(['app/view/main'], function(MainView) {
var mainView = new MainView();
$('body').html(mainView.render().el);
});
and render() looks like
render: function() {
this.$el.html(this.template);
return this;
}
Upon doing so, my page is blank. Inspecting the body, I do see the following HTML inside the body:
<div data-role="page" id="main">
<div data-role="header" data-position="inline">
<h1>Accounts</h1>
</div>
<div data-role="content">
hello
</div>
</div>
I've also tried doing this inside render():
this.$el.html(this.template).trigger('create');
as well as
this.$el.html(this.template).page();
but the page is still blank. Any ideas why?
If I simply put the HTML inside the body and load the page, it displays fine, like a normal jQuery Mobile app would.
Are you waiting until after pageinit to trigger / create your page?
$(document).bind('pageinit', function() {
// trigger
});
Also, jQM may be interpreting your markup as a single page template and then by injecting a data-role='page' element, you are marking up a multiple page document (with only a single page). Try leaving the <div data-role='page'> element in your default markup and then dynamically add the header, content and footer. jQM should then correctly interprete the markup and enhance it accordingly.
I am using jquery mobile and a dialog to display some multiple select boxes. Some of the content is dynamically created with Ajax based on the selections. I would like to make the Ajax call when the dialog is closed (through the regular x button). The main parts of the html look as follows:
<a href="#queryPage" data-rel="dialog" data-transition="slidedown" >Filter Results</a>
<div data-role="page" id="queryPage" data-theme="a">
<div data-role="header" data-theme="a">
<h1>Select Filters</h1>
</div>
<div data-role="content">
<form action="" method="get" id="filterForm">
<fieldset id ="filterFields"></fieldset>
</form>
</div>
</div>
I am currently making the call by running the code on page hide as follows:
$('#queryPage').live('pagehide', function(event) {
//code for ajax call
});
However, I would like to make the call when the dialog closes because some of the select lists are large and they create a new page that hides the queryPage even though the dialog has not been closed. I have tried:
$('#queryPage').bind('dialogclose', function(event) {
alert('closed');
});
and also tried
$('#queryPage').dialog({close:function(event, ui){
alert("closed");
}});
These I have put in a function called on page load but the alert is not shown when the dialog is closed. Any help will be appreciated.
There are no specific events for dialogs as they are simply pages that are displayed as a dialog. Try the pagehide event.
$("#MyDialog").bind("pagehide",function(){
alert("Dialog closed");
});
Also, the first line of your sample code has a link that is outside of a <div data-role="page"> which should not be done.
Pagehide can be delegated as such:
$(document).delegate("#MyDialog", "pagehide", function() {
alert("Dialog closed");
});
and you will also have access to the screen elements of the calling page.
Andleer shared the appropriate event for closing the dialog using jquery. however, we can also code in this way.
$(document).on("pagehide","#Dialog",function(){
console.log('Dialog has closed.');
});
any help gratefully received
I am trying to get a tab to be active ("clickable") only if there is content present within the div. The content will come from a php sql query.
In it's simplest form
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="tabs">
<ul>
<li>Hello</li>
<li>Goodbye</li>
</ul>
<div id="tabs-1">
if Query returned result, echo results, tabs-1 active
</div>
<div id="tabs-2">
if Query returned 0 results, nothing to echo tabs-2 inactive
</div>
</div>
I guess the active/inactive part does not have to be based on the query result - number of characters in the div or size of div may both be indicators I could use to see if the div is empty.
I know very little about javascript so if there is a solution out there is it possible you could explain it as you were speaking to a small child...
Many thanks in advance and I hope my question is clear enough.
You can intercept the tab change event using select, something like:
$("#tabs").tabs({
select: function(event, ui) {
if ($(ui.panel).html().length < 1) {
alert('no content!');
return false;
}
}
});
I've got a problem when i using UI Tabs and load an external page into the tabcontent-DIV. When the page has loaded, all jQueries for this page seems not to work anymore. I read something about callbacks, but it's not clear at all.
Example: I load an external page by ui-tabs, and the loaded content includes a DIV, that should hide automatically as jQueried in index.html
The jQuery click-event is only added to show that a live-event is working.
But i can't get the auto-hide working, after loading the content.
index.html
<script type="text/javascript">
jQuery(document).ready(function() {
// define tabs
$('#tabs').tabs();
// after loading external page, the div "autohideafterload" will automatically hide.
$('#autohideafterload').hide('slow');
$('#autohideafterload').live('click', function() {
$('#autohideafterload').hide('slow');
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><span>Load data</span></li>
</ul>
</div>
<div id="tabcontent"></div>
</body>
</html>
loadcontent.html
<div id="autohideafterload">This div will hide automatically after loaded this external page.</div>
What am i missing?
Bind your events after the tab's load event is triggered...
$('#tabs')
.bind('tabsload', function(event, ui) {
$('#autohideafterload').hide('slow');
})
.tabs();
You're trying to bind to an element that doesn't (yet) exist. You need to bind after the item loads, and listening to the event is the best way to do this.