Tag Archives: jquerymobile

Tips on jquery mobile


Hi,

For last month I am using jquery mobile. I’ve gone through lots of issues and learned a lot.

Web is good but when it comes with browser, HTML and java-scripts it becomes more buggy!

Generally I use chrome for development, and jquery mobile works perfect as it based on web-kit.

I tested and published my code, for desktop testing I use Firefox and chrome (not testing on IE as its jquery mobile). But when I open it in Android device, I see only half of the page rendering. And this is because of I made mistake in mark up language.

I forgot to close div tag and closed with li tag. In Firefox and chrome its ignored, but in safari it rendered differently.

See this code and output in chrome and safari, you will get the idea what i’m taking about.

Conclusion: While testing you web app IE is your acid test, while targeting web-kit or jquery mobile, safari is your acid test.

Create File Explorer in BlackBerry PhoneGap project


Hi,

I am using PhoneGap + jQuery Mobile for my current project.
It was required to upload images from gallery.

Unfortunately, In BlackBerry we can’t open built in Gallery to pick an image. So though why not to provide my file explorer? What worked pretty well.

As I am using PhoneGap, you can also use the same code for Android and may be for WebOS. In iOS it may not work.

Your index.html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>File Explorer</title>
<script src="javascript/phonegap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="stylesheet/jquery.mobile.min.css" />
<script src="javascript/jquery.min.js"></script>
<script src="javascript/jquery.mobile.min.js"></script>
<script src="javascript/source.js"></script>
</head>
<body>
	<div data-role="page" id="FileExplorerPage">
		<div data-role="header" data-position="fixed">
			<h1>
				File Explorer
			</h1>
		</div>
		<div data-role="content">
			<div id="Explorer" style="float:left"></div>
		</div>
	</div>
</body>
</html>

And you JavaScript magic code:

/**
 * File explorer logic
 */
var currentPath = "file:///store";
$('#FileExplorerPage').live('pagebeforeshow', function(event) {
	populate(currentPath);
});
function populate(path){
	try {
		var dirEntry = new DirectoryEntry({fullPath: path});
		var directoryReader = dirEntry.createReader();
		directoryReader.readEntries(successDirectoryReader,failDirectoryReader);
	} catch (e) {
		alert(dump(e));
	}
}
function successDirectoryReader(entries) {
    var i;
    $("#Explorer").html('');
    for (i=0; i<entries.length; i++) {
        if (entries[i].isDirectory) {
        	$("#Explorer").append("<div style='width:104px;float:left;text-align:center;'><div><img src='local:///resources/folder.png' style='border:2px;' onclick='changePath(this)'/></div><div style='width:100px;word-wrap:break-word;'>" + entries[i].name + "</div></div>");
        } else {
        	var fileType = blackberry.io.file.getFileProperties(entries[i].fullPath).mimeType;
        	if (Left(fileType,5) == 'image') {
        		// if file is of type image, then show in small size
        		$("#Explorer").append("<div style='width:104px;float:left;text-align:center;'><div><img src='" + entries[i].fullPath + "' height='80px' width='80px' style='border:2px;' /></div><div  style='width:100px;word-wrap:break-word;'>" + entries[i].name + "</div></div>");
        	} else {
        		$("#Explorer").append("<div style='width:104px;float:left;text-align:center;'><div><img src='local:///resources/file.png' style='border:2px;' /></div><div>" + entries[i].name + "</div></div>");
        	}
        }
    }
    // add an option to go to parent directory
    if (currentPath != "file:///store") {
    	$("#Explorer").append("<div style='width:104px;float:left;text-align:center;'><div><img src='local:///resources/folder.png' style='border:2px;' onclick='backPath()'/></div><div style='width:100px;word-wrap:break-word;'>..</div></div>");
    }
}
function failDirectoryReader(error) {
    alert("Failed to list directory contents: " + error.code);
}
function backPath() {
	currentPath = Left(currentPath, currentPath.lastIndexOf('/'));
	populate(currentPath); 
}
function changePath(ele){
	currentPath = currentPath + "/" + $(ele).parent().next().html();
	populate(currentPath);
}

//Error dump function
function dump(arr,level) {
    var dumped_text = "";
    if(!level) level = 0;

    var level_padding = "";
    for(var j=0;j<level+1;j++) level_padding += "    ";

    if(typeof(arr) == 'object') {  
        for(var item in arr) {
            var value = arr[item];

            if(typeof(value) == 'object') { 
                dumped_text += level_padding + "'" + item + "' ...\n";
                dumped_text += dump(value,level+1);
            } else {
                dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
            }
        }
    } else { 
        dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
    }
    return dumped_text;
}

//String left function
function Left(str, n){
	if (n <= 0)
	    return "";
	else if (n > String(str).length)
	    return str;
	else
	    return String(str).substring(0,n);
}

Download full project from here

Enable/disable link button in jquery Mobile


Hi,

I am developing mobile application, where I use jquery Mobile.

Buttons can be created by input tag, button tag and even link tag. See examples:


<button>Button1</button>

<input type="button" value="Button2" />

<a href="#" data-role="button">Button3</a>

In docs, I see enable/disable method for button. See.

But using this method, it can only set style, functionally it doesn’t! May be they missed it!

Anyway, I got some trick to make link enable/disable.

HTML5 now has data attribute that user can use it, browser will ignore it while rendering it.

So Disabling a link, I just remove href and onclick value to some data attribute and vice versa.

function test(){
    if ($("#mytest").parent().attr("aria-disabled") == "true") {
      $("#mytest").attr("href", $("#mytest").attr("data-href"));
      $("#mytest").attr("onclick", $("#mytest").attr("data-onclick"));
      $("#mytest").button('enable');
    } else {
      $("#mytest").attr("data-href", $("#mytest").attr("href"));
      $("#mytest").attr("data-onclick", $("#mytest").attr("onclick"));
      $("#mytest").attr("href","#");
      $("#mytest").attr("onclick","return");
      $("#mytest").button('disable');
    }
  }

See live example here.

Source code here.

Enable/Disable auto back button in jQuery Mobile framework


Hi,

Currently JQuery Mobile is still in alpha version. As they are moving towards first beta version, they do some changes from previous alpha versions.

One of the key change is, they disable auto back button by default, As they thought that many of the mobile device will have back button. But some may not have. To enable it, use the following option:

Please note that sequence of adding library does matter here.

<script src="/javascript/jquery.min.js"></script>
<script type="text/javascript">
    $(document).bind("mobileinit", function(){
        $.mobile.page.prototype.options.addBackBtn= true;
    });
</script>
<script src="javascript/jquery.mobile.js"></script>

jQuery Mobile will now support BlackBerry 5.0


Hi guys,

I am working on a huge business application. Currently major work is done by web application built on ColdFusion. But now we have created iPhone and Android application. Both are built on native platform, but now we can’t ignore blackberry and Symbian OS users.

So we’ve decided to work on platform independent framework, and that is PhoneGap.

I tell you that jQuery Mobile are working so hard that they differentiated touch, click swipe events very nicely. So I strongly recommend both the framework for your mobile application.

Coming to the title point, jQuery Mobile gave B grade the BlackBerry OS 5.0 native browser, as it lacks some of the important features. But as of now there are about 50% blackBerry users have OS 5.0. So while developing an business application, we can’t exclude them, so I decided to start working on the issues and try to remove them.

First of all, I realize that BlackBerry 5.0 browser doesn’t support URL hash change event. and it is a main disaster for JQM. So I and eventually JQuery Mobile team thought that, we should remove ajax call for BB5, and they made it! Excellent huh!.

Enjoy Mobilisum!

How to create BlackBerry WebWork PhoneGap project in eclipse?


Hi friends,

Nice to Inform you that I’ve stated working on PhoneGap for my new BlackBerry Project.

To get first running project, it took lots of time. So I decided to post on this process.

Basically you should follow steps from this official site, But in my case, it was a different experience.

I prefer to use eclipse for each project, so here also we need eclipse.
Get the BlackBerry extension(here) and Web Work extension (here).

Now open eclipse, go to create new project, and selec BlackBerry Web Works project.

Type name, and then finish

After finishing, it prompt me this error

Press ok, To build a project you need to have project.properties file in your project directory, but it is not created, so you just copy this file from sample phoneGap project (available in phonegap zip)

Copy and paste above file into you project directory:

Just copy is not enough, you need to update the path for the BlackBerry WebWork Project EXE. Open this file in text editor, we need to update the path for bbwp.dir as we will compile this project in eclipse. New path should point to bbwp.exe file. To find this file, go to eclipse installation directory, then plugins, then look for the directory with the name “net.rim.browser.tools.wcpc”, and then wcpc.

Update the file with new path:

Now refresh you project, but hey, it still display this error 😦

Right click on you project, and open project properties, then select “Project facets”

REMOVE any selection if you find, (in my case, “Static web module” was selected).

Now this removes the error from our web work project, but our project still missing PhoneGap library.

First you need to build PhoneGap Web work project with ant build, and create a jar file. To do so please follow steps from here. Starting from the Ant installation to creation of sample project.

After building source code, you will get new files, as shown here:

Copy all these files and paste to you project directory. Over right files if exists.

Now refresh you project, and try to run it, This should work. Please see following file structure, each PhoneGap project should have these kind of structure.

After running this project, you should see PhoneGap sample application,

After closing this application in simulator, you can again find it in “Downloads”! I wasn’t knowing about this, and tried a lot to search where my app! Hope you don’t waste you time!!

Hurray!! Now just start creating HTML pages with jQuery Mobile and you can build good apps…

I’ll post more on BlackBerry Web Work + PhoneGap as I proceed. Enjoy mobilisum!

If you like my work, then please buy me a Coffee!