Category Archives: JQuery Mobile

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.