jQuery blackberry ajax problems

Question

I have an asp.net web application that I am making available to mobile devices. Im using jQuery and jqMobile for the functionality and styling.

The application works great in safari, google chrome, on the iPhone, iPad, and Android devices but I cant get it working on anything other than the Blackberry torch. I have a requirement to get it working on version 5 and 6 blackberry devices but it seems the ajax request for logging in is always calling the error function and I cant see why.

enter image description here

The application contains a few pages but I cant even get past the login page on the blackberry. Has anyone else managed to get ajax calls working on the blackberry? I dont really want to have a seperate set of pages just for blackberrys'

Here is the code for the login page aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Sicon.Web.WAP.App.Pages.Mobile.Login" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link href="../../JavaScripts/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
    <script src="../../JavaScripts/jquery.min.js" type="text/javascript"></script>
    <script src="../../JavaScripts/jquery.mobile.min.js" type="text/javascript"></script>
</head>
<body>
    <form id="login" runat="server" accept-charset="utf-8">
    <div id="Invoices" data-role="page" data-theme="b">
        <div data-role="header" data-theme="b">
            <h1>
                WAP - Login</h1>
        </div>
        <div data-role="content" data-theme="b">
            <div align="center">
                <img src="Sicon_LogoHz_rgb72.png" />
            </div>
            <ul data-role="listview" data-inset="true">
                <li>
                    <input type="text" value="" name="username" placeholder="Username" id="username" />
                </li>
                <li>
                    <input type="password" value="" name="password" placeholder="Password" id="password" />
                </li>
            </ul>
            <a class="login" data-role="button" data-theme="b">Login</a> <a data-role="button"
                data-theme="a">Cancel</a>
        </div>
    </div>
    </form>
    <script type="text/javascript">

        var _ajaxEnabled = true;

        $(document).ready(function()
        {
            _ajaxEnabled = $.support.ajax;
        });

        //Get base URL
        var baseUrl = "<%= ResolveUrl("~/") %>";

        //Function to resolve a URL
        function ResolveUrl(url)
        {
            if (url.indexOf("~/") == 0) 
            {
                url = baseUrl + url.substring(2);
            }
            return url;
        }

        //Login form Login link click
        $("#login a.login").click(function (e) {
            //Get the form
            var $form = $(this).closest("form");

            //Perform login
            return app.login($form);
        });

        //Login form submit
        $("#login").submit(function (e) {
            //Get the form
            var $form = $(this);

            //Perform login
            return app.login($form);
        });

        //class to handle login
        var app = {
            login: function ($form) {

                var $Username = $("#username").val();
                var $Password = $("#password").val();

                //Call the approve method on the code behind
                $.ajax({
                    type: "POST",
                    url: ResolveUrl("~/Pages/Mobile/Login.aspx/LoginUser"),
                    data: "{'Username':'" + $Username + "', 'Password':'" + $Password + "' }", //Pass the parameter names and values
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert("Error- Status: " + textStatus + " jqXHR Status: " + jqXHR.status + " jqXHR Response Text:" + jqXHR.responseText) },
                    success: function (msg) {
                        if (msg.d == true) {
                            window.location.href = ResolveUrl("~/Pages/Mobile/Index.aspx");
                        }
                        else {
                            //show error
                            alert('login failed');
                        }
                    }
                });

                return false;
            }
        }
    </script>
</body>
</html>

And finally the code behind for the login method:

/// <summary>
/// Logs in the user
/// </summary>
/// <param name="Username">The username</param>
/// <param name="Password">The password</param>
/// <returns></returns>
[WebMethod, ScriptMethod]
public static bool LoginUser( string Username, string Password )
{
    try
    {
        StaticStore.CurrentUser = new User( Username, Password );

        //check the login details were correct
        if ( StaticStore.CurrentUser.IsAuthentiacted )
        {
            //change the status to logged in
            StaticStore.CurrentUser.LoginStatus = Objects.Enums.LoginStatus.LoggedIn;

            //Store the user ID in the list of active users
            ( HttpContext.Current.Application[ SessionKeys.ActiveUsers ] as Dictionary<string, int> )[ HttpContext.Current.Session.SessionID ] = StaticStore.CurrentUser.UserID;

            return true;
        }
        else
        {
            return false;
        }
    }
    catch ( Exception ex )
    {
        return false;
    }
}

I have tried the answer outlined in this post, checking the error status and returning. This just means nothing happens when the error is caughtt... http://stackoverflow.com/questions/1023867/jquery-xmlhttprequest-error — WraithNath, Apr 06 '11 at 13:37
Is there a reason why there's a typo on this line: if ( StaticStore.CurrentUser.IsAuthentiacted ) — JackWilson, Apr 07 '11 at 12:34
@JackWilson - no, there isnt a reason for it. It is a valid property name though, it all compiles. The problem isnt with the WebMethod has other devices can call it and log on. The problem is with the black berry always calling the error handler of the ajax call, It works on the blackberry torch so the code can work, it just doesnt work for the other version 5 and 6 devices. — WraithNath, Apr 07 '11 at 12:43

splonk · Accepted Answer · 2011-04-15T13:26:23.013

2

You don't say which version of jqmobile you are using. Version 4.1 was released April 7. You have to keep in mind that jqmobile is not even at Beta release yet, and that BB OS 5 is listed as B-grade (http://jquerymobile.com/gbs/) so it is getting less attention.

You probably have other ajax in your app to deal with but login is so simple why not restructure as a simple form post?

Also, an admission that BB5 is a problem:

https://github.com/jquery/jquery-mobile/issues/1245

edited Apr 15 '11 at 13:26

answered Apr 15 '11 at 12:13

splonk

1,039
6
11

im using alpha one. I was hoping to get the ajax working as its used throughout the rest of the mobile site. I could redevelop the login page, but I would have to then do the same for the rest of the pages. Have you done any BB web application development? – WraithNath Apr 15 '11 at 12:17
1

Native apps only on BB. We are using JQM to get to iPhone & Android. But I have dealt with the wonky browsers on BB 5 as a user. My hunch (and it's just speculation) is that the javascript engine on BB 5 is not functionaly complete enough to run the jquery js lib that JQM depends on. Since the Torch browser is based on Webkit it does have that more powerful javascript engine, and so works better. – splonk Apr 15 '11 at 12:32
sounds about right to me, I think ill just have to have a subset of pages for devices like the BB that dont support webkit. Bit of a shame really but I guess the customer get what he wants! thanks for the information anyway. Hopefully version 5 and 6 devices will be old enough to call redundant soon so I dont have to support them :) – WraithNath Apr 15 '11 at 13:06
Same crap on BB OS 6. Completely horrible. – jini Oct 16 '11 at 19:10

score 0 · Answer 2 · answered Dec 27 '12 at 12:04

Finally after one week of intense frustration i got the solution....

You need to allow cross domain access in your BrowserField as follows.

BrowserFieldConfig config=new BrowserFieldConfig();
config.setProperty(BrowserFieldConfig.NAVIGATION_MODE,BrowserFieldConfig.NAVIGATION_MODE_POINTER);
 config.setProperty( BrowserFieldConfig.JAVASCRIPT_ENABLED, Boolean.TRUE );
 config.setProperty(BrowserFieldConfig.ALLOW_CS_XHR, Boolean.TRUE);//allow cross-domain
 browser=new BrowserField(config);

jQuery blackberry ajax problems

2 Answers2