JQuery Mobile using simpleedog2 for authorization
I am trying to create a jQuery mobile app that will have an authorization page (for example a jqm dialog with text input and a submit button where the user will enter their username, this will be checked against a list of users / permissions retrieved from Parse and if access is granted , the dialog will be deleted and the user can access the application). I realize that I am very far from this stage, but at the moment when I used the simpledialog2 plugin with empty mode to create the layout of how I wanted the dialog to look and I intended to extend it to a fully functioning module.
$(document).delegate('#opendialog', 'click', function() {
$('<div>').simpledialog2({
mode: 'blank',
headerText: 'App Auth',
headerClose: true,
dialogAllow: true,
dialogForce: true,
blankContent :
"<p>Please enter your username:<br/></p>"+
"<form><input/><br/>"+
"<a data-role='button'>Submit</a></form>"
})
})
When I tried to expand on this code, I kept getting errors like "TypeError:" undefined "is not a function (score ...)" and couldn't find any reason for them. I was wondering if someone can tell me if I am approaching this correctly? I tried to create an auth page using the w button. Input mode as described at http://dev.jtsage.com/jQM-SimpleDialog/demos2/blankin.html#/jQM-SimpleDialog/demos2/button.html but that also didn't work for me. Any guidance would be much appreciated. :)
source to share
You can bind to an event pagebeforechange
to check if the user is authenticated. If not, you can dynamically create and show the auth dialog:
jQuery("body").live("pagebeforechange", function(e, data) {
if(typeof data.toPage !== 'string')
return;
if(!userIsAuthenticated) {
showAuthDialog();
e.preventDefault();
return false;
}
});
A dynamically generated dialog box can be shown like this:
function showAuthDialog() {
var dialog = jQuery('<div data-role="dialog"> <div data-role="content"> <h1>MyAuthDialog</h1> <p>Your auth form here.</p></div> </div>');
// bind events to auth form here
// ...
jQuery.mobile.pageContainer.append(dialog);
jQuery.mobile.changePage(dialog);
}
source to share