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


Thank you for visiting the BlackBerry Support Community Forums.

BlackBerry will be closing the BlackBerry Support Community Forums on April 1st. BlackBerry remains committed to providing excellent customer support to our customers. We are delighted to direct you to the CrackBerry Forums, a well-established and thorough support channel, for continued BlackBerry support. Please visit http://forums.crackberry.com or http://crackberry.com/ask. You can also continue to visit BlackBerry Support or the BlackBerry Knowledge Base for official support options available for your BlackBerry Smartphone.

"When we launched CrackBerry.com 10 years ago, we set out to make it a fun and useful destination where BlackBerry Smartphone owners could share their excitement and learn to unleash the full potential of their BlackBerry. A decade later, the CrackBerry community is as active and passionate as ever and I know our knowledgeable members and volunteers will be excited to welcome and assist more BlackBerry owners with their questions."

- Kevin Michaluk, Founder, CrackBerry.com


Reply
Highlighted
Developer
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 Smiley Happy

 

Let me know this worked out for you Smiley Happy

 

 

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