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

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!