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