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:
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:
Hope that helps.
Cheers!
Your’e a life saver!
I couldn’t get my file upload form to work in jquerymobile. But with data-ajax=”false” it does work and process my files.
Thank you very much !
Thank you so much! I was badly stuck in here with unable to upload file, I even started with custom css abandoning jquery..
Thank!
NT
Great! , realy had problems – you helped me fix it. thx!