I have this 2 pages in jquery mobile:
Home - http://snipt.org/zixj3
Inner - http://snipt.org/ziya9
you can see the live here: www.leoferrari.com/congresso1/
I use:
$( document ).on( "pageinit", ".jqm-demos", function() {
$("#menu").load('menu.html', function() {
$(this).trigger("create");
});
$("#footer").load('footer.html', function() {
$(this).trigger("create");
});
});
to load menu and footer, but when i click to go to the inner page the footer and menu dont load, if a reload the page the footer and menu load normally
Related
In my app I would like to re-use the panel so I call this function when opening index.html:
var add_panel=function() {
//add button
$('[data-role="header"]').append('Menu');
//panel
$.get('panel.html').success(function(data) {
$('div[data-role="page"]').append(data);
$('#leftpanel').trigger('create');
$('#leftpanel').panel();
});
//open panel
$('body').on('click', '.ui-icon-bars', function() {
$("#leftpanel").panel("toggle");
});
}
This works great on the first page and when returning to this page from another page.
I had hoped to call the same function inside "pagecontainertransition" to add the panel to other pages as well, but this doesn't seem to work:
//handle page transitions
$('body').on('pagecontainertransition', function(event, ui) {
add_panel();
});
Can this be done?
In ios7 safari apple introduced swiping navigation - swipe to the right sends windows.history.back() event and redirects to a previous page like user touched the back button.
In my app I am using right swipe to show left panel and I am using this code:(JQM 1.4.3 stable)
<script>
$( document ).on( "pageinit", ".ui-page", function() {
$( document ).on( "swiperight", ".ui-page", function( e ) {
if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
if ( e.type === "swiperight" ) {
$( ".panel" ).panel( "open" );
}
}
});
});
</script>
But instead of showing the panel safari rather uses it's default behaviour and loads the previous page. How to override this behaviour and show left panel?
I'm trying to use panel on each different HTML pages.
And I got this sample panel JS code on JQM website.
/* panel */
$( document ).on( "pageinit", "#demo-page", function() {
$( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
// We check if there is no open panel on the page because otherwise
// a swipe to close the left panel would also open the right panel (and v.v.).
// We do this by checking the data that the framework stores on the page element (panel: open).
if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
if ( e.type === "swipeleft" ) {
$( "#right-panel" ).panel( "open" );
} else if ( e.type === "swiperight" ) {
$( "#left-panel" ).panel( "open" );
}
}
});
});
The problem is if I want to put panel on each different HTML pages, How do I have to set the page ID ?
For example, I have HTML pages such as.....
main.html page ID is "#pageMain" , about.html page ID is "#pageAbout", and gallery.html page ID is "#gallery"
How do I have to fix JS code ? Please help~
The code you have is for adding the ability to open panels via swipe gestures. It won't add the panel into the DOM alongside your page content. To do that you'll need to adapt the following code.
/* Creates the functionality to open the left side panel with a swipe */
$(document).one("pagebeforecreate", function () {
$.get('left-panel.html', function(data){
//$(data).prependTo($.mobile.pageContainer); //or .prependTo("body");
$.mobile.pageContainer.prepend(data);
$("[data-role=panel]").panel().enhanceWithin(); // initialize panel
}, "html");
I m using jquery tabs .Like to know how to refresh content on tab click .
I m using document ready function with
$(#TABS).TABS()
$(document).ready(function(){
$("#tabs").tabs();
$("#tabs").bind("tabshow",function(event,ui){window.location.href=ui.tab;});});
See the "select event" here
It says:
This event is triggered when clicking a tab.
Code examples
Supply a callback function to handle the select event as an init option.
$( ".selector" ).tabs({
select: function(event, ui) { ... }
});
Bind to the select event by type: tabsselect.
$( ".selector" ).bind( "tabsselect", function(event, ui) {
...
});
in jQuery-UI 1.10, the following should help:
$("#TABS").tabs("load", $("#TABS").tabs("option", "active"));
Edit: More code details:
$(function() {
$("#TABS").tabs();
$("#TABS").on('click','li',function(event,ui) {
$("#TABS").tabs("load", $("#TABS").tabs("option", "active"));
});
});
Here is a link to jsfiddle
If I load a JQuery UI Dialog without loading external content, the dialog can be closed with the "Close" button and the dialog can be re-opened multiple times. If I load content in, neither of these two capabilities works. Code below. Any hints?? Thanks in advance!!
$(document).ready(function() {
$('#viewdonationsdialog').dialog({
autoOpen:false,
modal:'true',
width:600,
height:400,
buttons: {
Close: function() {
$( this ).dialog( "close" );
}
}
});
$('#viewdonationslink').click(openDonationsDialog);
});
var openDonationsDialog = function(){
/* Including the next line causes failure.
Removing it results in success (except, of course, that my page content isn't loaded!! */
$('#viewdonationsdialog').load('/donationsdata');
/* And then there's the rest... */
$('#viewdonationsdialog').dialog('open');
return false;
};