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;
}
}
});
Related
I load a html-partial into a ng-view directiv via a controller in AngularJS. The html-partial looks like this:
<div>
<ul data-role="listview" data-inset="true" data-theme="c">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
The problem is that the listview does not get rendered into a jquery-mobile-control. What is wrong?
I got it to work. Here is what I did:
I made a new directive that I append on the ul-element. It waits until the last li-element is rendered, then I call the trigger on the jqueryMobileTpl directive.
app.directive('jqueryMobileTpl', function () {
return {
link: function (scope, elm, attr) {
//elm.trigger('create');
}
};
});
app.directive('repeatDone', function () {
return function (scope, element, attrs) {
// When the last element is rendered
if (scope.$last) {
element.parent().parent().trigger('create');
}
}
});
and
<div jquery-mobile-tpl>
<ul data-role="listview" data-inset="true" data-theme="c" data-ng-repeat="customer in customers | orderBy:'lastName'" repeat-done="" ng-cloak>
<li>{{customer.firstName + ' ' + customer.lastName}}</li>
</ul>
</div>
Thank you #CaioToOn and #Omar !!!
This problem is not related to AngularJs. It happend that jQuery Mobile is not aware of every DOM change, and you need to give it a tip. To adivice jQuery Mobile about the change, you need to trigger a create event on the element.
According to the docs (look at "Enhancing new markup"):
However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).
So all you got to do is to trigger the create event just after the content has been included.
I'd suggest you to create a directive that simply triggers the event on the templates for you. Something like:
app.directive('jqueryMobileTpl', function() {
return {
link: function(scope, elm, attr) {
elm.trigger('create');
}
};
});
Then you just add this directive to the root element of the template:
<div jquery-mobile-tpl>
<ul data-role="listview" data-inset="true" data-theme="c">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
You could make this directive low priority, so if you use other directives that might change the template, this one would wait for all changes before telling jQuery Mobile to render. Working sample here.
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.');
});
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