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. :)

+3


source to share


1 answer


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);
}

      

0


source







All Articles