Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
levidehaan
Posts: 49
Registered: ‎02-09-2011
My Device: Not Specified

HowTo: jQuery Mobile and Dialogs

Here is a bit on how to create dialogs in jQuery Mobile programmatically

 

I would recommend putting all your dialog code in a single file called dialogs.js or something like that.

so here is a dialog and then i will show you how to call it from a page:

 

 

(function($){
    
$.addLabel = function(user, number){
        if( $('[data-url=addLabel]').length ){
            return;
        }
        var currentPage = $.mobile.activePage,
        menuPage = $( '<div id="addLabel" data-url="addLabel" data-role=\'dialog\' data-theme=\'c\'>' +
            '<div data-role=\'header\' data-theme=\'c\'>' +
            '<div class=\'ui-title\'>Add Label to ' + user + '\'s page ' + number + '</div>'+
            '</div>'+
            '<div data-role=\'content\' data-theme=\'c\'>'+
            '<div data-role="fieldcontain">'+
            '<label for="label">Label:</label>'+
            '<input type="text" name="label" id="label" value=""  />'+
            '</div>'+
            '<input type="button" name="submitlabel" value="Submit Label" id="submitlable" onclick="diag_label(\''+user+'\', \''+number+'\')">'+
            '</div></div>' )
        .appendTo( $.mobile.pageContainer );        
        menuPage.page();

    };
})(jQuery);
    
    
    function diag_label(user, number){
    var label = $('[data-url=addLabel] #label').val();
    var usr = new user.label(user, number);
    usr.addLabel(label);
    $('[data-url=addLabel]').dialog('close');
}

 

so there you go, you can add new dialogs within the function easily.

this has some text input elements. in the function diag_label() you see var usr = new user.label

this is just assuming your using some form of async call to a remote database or using the local database sqlite and your using a lib to create transactions.

 

Here is how you call the dialog using a button on a page

this HTML is using the blah.html from my fixing jQuery Mobile post with the added button:

 

 

<?php print json_encode($content); ?>

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8" /> 
        <title>View User</title> 
        <link rel="stylesheet" href="css/jquery.mobile-1.0a3.css" /> 
        <link rel="stylesheet" href="css/main.css" /> 
        <script> var require = { deps: ["js/jquery.1.4.4.min.js", "js/jquery.mobile-1.0a3.min.js", "js/main.js"], 
            callback: function() { 
                initPage(); }, 
            ready: function(){ 
            } } </script> 
        <script type="text/javascript" src="js/require.js"></script> 
    </head> 
    <body> 
        <div data-role="page" id="blah"> 
            <div data-role="content" id="blah_content"> 
                <a href="#addLabel" name="addLabel" data-role="button" data-rel="dialog" data-transition="pop" data-icon="star" onclick="($.addLabel(GET.user, GET.number))">Add A Label</a>
            </div> 
            <div data-role="footer" data-id="footera" data-position="fixed"> 
                <h4>blah stuff</h4> 
            </div> 
        </div> 
    </body> 
</html>

 

 

this also uses the get_url_data function to pass params and then use those params in the button function. you dont have to pass data but you can :smileyhappy:

 

Let me know this worked out for you :smileyhappy:

 

 

Levi De Haan // Sr. Programmer/Sys. Admin 
1-877-578-3794 x 1000
@levidehaan
1-877-JQUERY-HELP
1-303-747-6007