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
Posts: 49
Registered: ‎02-09-2011
My Device: Not Specified

HowTo: jQuery Mobile ajax fix (temporary until its fixed in next release)

[ Edited ]

Update: added the js file, in case you dont want to do all the typing. you will need to change the .txt to .js, you cant upload .js files ;D

 

Alohaness, it pains me to see so many people having issues with ajax on jQuery Mobile.

So I'm posting this so that at least you can work on your application with transitions and ajax.

NOTE: you cant use params in the vm , next version its supposed to be fixed. (I am using params in my example app)

 

in order to fix jQuery Mobile you need to grab the unminified version (this will be called locally)

you will also be using jquery 1.5 not 1.5.1 (the 0 on return error was fixed, but something else is wrong, and i havent had time to figure out what)

 

on line 2065 of jQuery Mobile you will see $.mobile.pageLoading();



you will see the $.ajax call

 

in front of $.ajax({

put var myAjax = 

so it looks like this var myAjax = $.ajax({

 

cut the text out from line 2071 to line 2117  this is the success function

paste it a couple of lines above the ajax call

and change

success: function (html) {

to

function success( html ) {

 

on the line below function success( html ) {

put

html = myAjax.responseText;

 

 

This will fix your application so you can use seperate *.html files, and it will also enable the back button by default and history etc...

 

Sorry I didn't post this sooner, I was really hoping that the problem would be fixed :smileyhappy:, but there you go, this bypasses a lot of stuff, so just be aware.

 

I promised a tutorial on reqiurejs and sqlite last week but just haven't had time, sorry, if it doesn't come out in a forum post it will be on the tutorial that is slowly coming to an end, as soon as I can test my app with functionality that works (ie fixing the params bug) thank goodness the submissions were pushed out to the end of the month.

 

 

 

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

 

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

Re: HowTo: jQuery Mobile ajax fix (temporary until its fixed in next release)

By the way let me know if this works for phones too, I have only tested this on the tablet vm, so if your developing for the phone and give this a try let me know.

 

some other tools in this area:

 

here is some code to grab the params from a url:

 

 

function get_url_data(){   
    var e,
    a = /\+/g,  // Regex for replacing addition symbol with a space
    r = /([^&=]+)=?([^&]*)/g,
    d = function (s) {
        return decodeURIComponent(s.replace(a, " "));
    },
    q = window.location.hash.split("?");
    while (e = r.exec(q[1]))
        GET[d(e[1])] = d(e[2]);
}

 

and there are some issues with getting params from the url, so you need to use the live pageshow/pagebefore show functionality here is an example of that

say your html file is blah.html and your passing username and note

blah.html?username=user&note=hereisanote

here is the HTML

blah.html

 

 

<!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"> 
                <div class="ui-grid-b" id="blah_data"> 
                    <div class="ui-block-a" id="blah_data_a"></div> 
                    <div class="ui-block-b" id="blah_data_b"></div> 
                    <div class="ui-block-c" id="blah_data_c"></div> 
                </div> 
            </div> 
            <div data-role="footer" data-id="footera" data-position="fixed"> 
                <h4>blah stuff</h4> 
            </div> 
        </div> 
    </body> 
</html>

 

 

 

Here is the JS

 

 

$('#blah').live('pagebeforeshow',function(event){
    //this removes any previous versions from the dom, this helps
    //with caching issues, if you dont want to go back to the same
    //page that was loaded before (ie something changed)
    
    if($.mobile.pageContainer.find('#blah').length > 1){
        $.mobile.pageContainer.find('#blah').remove();
    }
    function view_blah(){
        //this is the funtion that returns the params in GET.paramame
        get_url_data();
        //if you have elements that were dynamically filled and need to
        //be filled with new data use this, or $('#blah p').empty(); depends on
        //your needs and what you want removed.
        $('#blah p').children().remove();
        $.mobile.pageLoading();            
        view_blah(GET.username, GET.note);            
    }
    
    //using set time out to give get_url_data some time in order to load
    //the params from the url.
    setTimeout(function(){
        view_blah();
    }, 500);
              
});

 

put this in your main.js file, it will listen for pageloading on that html file it actually listens for the id on <div data-role="page" id="blah">

 

so there you go here is how you can grab data from the url and an example of using multiple html pages and modifying them before they are shown using the live event listeners.