jQuery Mobile

Oct

05

2011

Adding & Customizing Back Buttons in jQuery Mobile Framework

jQuery Mobile  Posted by on October 5th, 2011 / 0 comments


jQuery Mobile Framework has a feature to automatically create and append “back” buttons to any application header, although it is disabled by default. The jQuery Mobile framework automatically adds a “back” button on a header when the page plugin’s addBackBtn option is true. You can also enable this feature via markup by setting page div a data-add-back-btn=”true” attribute.

Converting Links to Back Button

If you add the attribute data-rel=”back” on any anchor, any clicks on that anchor will effectively become the back button, going back one history entry and just ignoring the anchor’s default href link, you can create a cancel button like this:

 
<a data-role="button" data-rel="back">Cancel</a>

Also note that if you just want a reverse transition without actually going back in history, you should use the data-direction=”reverse” attribute instead.

Customizing the Back Button Text

If you want to configure the back button text, you can either use the data-back-btn-text=”previous” attribute on your page element, or set it programmatically via the page plugin’s options:

 
$.mobile.page.prototype.options.backBtnText = "previous";

Hope that helps.

Cheers!

Sep

01

2011

Resolve Jquery Mobile Framework Zoomed Out Text and Font Size Problem on iPhone

jQuery Mobile  Posted by on September 1st, 2011 / 0 comments
Tags: |

While testing a jQuery Mobile Framework based web app on iPhone, I noticed iPhone displayed the web page zoomed out with very small text. I thought I had forgotten to add some styles or messed up something in my custom css but turned out some thing very basic, just add it in the top of your template inside head tag:

 
<meta name="viewport" content="width=device-width, initial-scale=1">

This one line fixes buttons, forms elements and text sizes magically.

Hope that helps.

Cheers!

Aug

29

2011

Resolve jQuery & Prototype Conflict Using jQuery Mobile Framework

jQuery Mobile  Posted by on August 29th, 2011 / 0 comments
Tags:

While working on jQuery Mobile Framework project, I had already used Prototype library for some features in the application. But jQuery and Prototype refused to play ball and application broke.

The issue was shortcut or both jQuery and Prototype and both use $.

Luckily, jQuery foresaw such scenario and already planned for library conflicts and has easy solution. The no-conflict mode allows you to define your own shortcut, and of course it worked. I did not need to touch Prototype at all.

You can rename the $ shorcut by a new name easily like this:

 
//place this code anywhere in your code inside scripts tags
 
var myJQ = jQuery.noConflict();
 
//so you will use it like this
myJQ("#container").show();

Hope that helps.

Cheers!

Aug

28

2011

Adding rel Attribute to All Links for jQuery Mobile App Page Using jQuery

jQuery Mobile  Posted by on August 28th, 2011 / 1 comments
Tags:

By default, jQuery Mobile framework html links that point to any other web page are loaded via Ajax  and it’s so to enable animated page transitions in your app.

If you want to make your existing  application links to work as it they would work in normal web app, you need to add rel=”external” attribute to all your links. jQuery makes it easy to manipulate any tags within a HTML document. Following are two examples showing how you can use it to add rel attribute.

Linking jQuery Mobile App Pages without Ajax

Links that point to other domains or that have rel=”external”, data-ajax=”false” or target attributes will not be loaded with Ajax. jQuery Mobile Framework forms need data-ajax=”false” attribute to be submitted without Ajax.

Adding rel=”external” attribute to all the existing link is time consuming. You can achieve that easily using jQuery.

Adding rel=”external” to all links for jQuery Mobile App Page using jQuery

Following code will add rel=”External” attribute to every link in the page.

$(document).ready(function(){
        $("a").attr("rel","external");
});

And if you want to target a specific container or id, say “navigation”, use fiollowing:

$(document).ready(function(){
         $('#navigation a').attr("rel", "external"});
});

Hope that helps.

Cheers.

Aug

25

2011

File Input Field & Uploading using jQuery Mobile Framework & Form Submission with AJAX Disabled

jQuery Mobile  Posted by on August 25th, 2011 / 2 comments
Tags:

I implemented jQuery Mobile Framework in a mobile app recently which I had earlier developed with custom css and html theme and having issues in different mobiles for consistent look and feel. Luckily jQuery Mobile Framework came out just in time for me because client wanted to his app to be compatible with as many mobiles and platforms as possible, jQuery Mobile an excellent framework but it’s not without some issues.

During testing, although all went very well, there was a minor issue I found out with forms submission. jQuery Mobile broke working forms with file input for file uploading were not submitting the data to the server.

Incidentally, jQuery Mobile Framework (yet!) does not support file input theme and styling unlike all other form elements. And why did they leave it out is a surprise assuming so many mobiles allow and support file selection and uploading form from hand held devices. May be they thought iOS does not support file input field, but Android, Symbian, WM7 is not a small group either. Anyway, i’m sure it’s going to be fixed in final release of jQuery Mobile.

Reason for file uploading problem with jQuery Mobile is that by default, form submits data using ajax. With Ajax, file input data is not submitted, and solution is very simple, just disable the ajax for forms submissions.

Disabling AJAX for Form Submission

in jQuery Mobile, since mobileinit event is triggered immediately upon execution, we have to bind event handler before jQuery Mobile is loaded. linking to your JavaScript files should be in the following order:

 
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

Within this event binding, you can disbale ajax for form submission by configuring defaults either by extending the $.mobile object using jQuery’s $.extend method like this:

 
$(document).bind("mobileinit", function(){
  $.extend(  $.mobile , {
   ajaxFormsEnabled = false;
  });
});

Or like this:

 
$(document).bind("mobileinit", function(){
  $.mobile.ajaxFormsEnabled = false;
});

Or like this in individual forms:

 
<form action="upload.php" method="post" id="photo-form" enctype="multipart/form-data" data-ajax="false">

Hope that helps.

Cheers!