In my Jquery Mobile app, I would to override the browser or phone back button (that is available on Android devices).
On the page #welcome-page only, and only if the previous-page id is #signin-page, I would like the back button to skip the #signin-page (not even callthe associated js) and go to #explanation-page.
Can you help me achieve this ?
For now I did the following but it messes everything up, because it seems to load #signin-page.
$(document).on('pagebeforeshow', '#welcome-page', function(event, docdata){ //jqm 1.4
console.log('previous page was ' +docdata.prevPage.attr('id'));
if ( docdata.prevPage.attr('id') == 'signin-page') {
$(window).on("navigate", function (event, data) {
var direction = data.state.direction;
if (direction == 'back') {
event.preventDefault();
console.log('back button pressed');
//$( "body" ).pagecontainer( "change", "#explanation-short", { transition: "fade" });
}
$(window).off("navigate");
});
}
});
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 am using jquery mobile and I need to prevent swipe event over specific element. Need of doing this is because I am using slider and I don't want the swipe event to be invoked resp. I want it to be prevented when user is manipulating with slider. I was not able to too find any solution so I am asking for help here.
This is my javascript code:
$( 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" );
}
}
});
});
Thank you.
You need to use both, stopPropagation(); and preventDefault();.
As for the .selector, it can be a tag and #ID or .class, e.g. [data-role=page]#PageID , div.ui-content...etc
$(document).on('swipeleft swiperight', '.selector', function(event) {
event.stopPropagation();
event.preventDefault();
});
Reference: stopPropagation();
Reference: preventDefault();
Working example
I would like to user the beautiful jQuery Mobile dialog:
Open dialog
To ask a user if he really wants to submit a form.
My idea is: user fills the form then clicks on submit and so he sees a dialog like "do you really want to submit the form? Yes/No" and if yes the form is sent using ajax to my insert.php page if no the dialog is simply closed.
I've read in the official documentation and it looks like this is simply a graphical tweak to show any #page of my jqm web app like a dialog.
How can I use this dialog page as confirm / cancel of my form submission?
To be clearer: I don't want to use standard javascript like:
function insertClienti()
{
$('#form').submit(function(e) {
if(!confirm('really submit the form?')) {
e.preventDefault();
return;
}
$.post("insert.php", $("#form").serialize());
});
}
but only jQuery Mobile's dialog.
Thanks for your time and patience.
I was simply using the wrong jQuery Mobile component.
Popup dialogs are simply made for this and are very easy to use.
The documentation is here:
http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/popup/
Here's the code I used in my app (I use bassistance validator):
$(document).bind('pageinit', function () {
validaFormInserimento();
});
function insertClienti()
{
$.post("insert.php", $("#form_inserimento_clienti").serialize());
}
function validaFormInserimento()
{
$("#form_inserimento_clienti").validate({
rules: {
nick: "required"
},
messages: {
nick: "Campo obbligatorio"
},
errorPlacement: function(error, element){
if (element.attr("name") === "nick") {
error.insertAfter($(element).parent());
} else {
error.insertAfter(element);
}
},
submitHandler: function(form){
$( "#popupDialog" ).popup( "open" );
}
});
}
function disabilitaSubmit()
{
$('input,select').keypress(function(event) { return event.keyCode != 13; });
}
function insertClienti()
{
$.post("insert.php", $("#form_inserimento_clienti").serialize());
$( "#popupDialog" ).popup( "close" );
$("#form_inserimento_clienti").each(function() {
this.reset();
});
}
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;
};