Category Archives: JQuery Mobile

JQuery Mobile: Checkbox Issue

I have been trying to manipulate checkbox via JavaScript.
Long time spent to find out why the regular JQuery Code doesn’t work with JQuery Mobile.
Finally I resolved the issue.
Review the code below to understand the solution.

[javascript]
$(‘input.credits[chk="chk"]‘).attr(‘selected’,'selected’).checkboxradio("refresh");
[/javascript]

The code

.checkboxradio("refresh");

must be added every time the checkbox value changed.

PS Note:
Same rule probably should be applied to select element in jQuery Mobile Framework

[javascript]
$(‘.province_select’).attr(‘name’,'bill_province_2′).selectmenu(‘refresh’,true);
[/javascript]

One more snippet regarding this matter

[javascript]
$(‘select#provinces’).val(‘somevalue’).selectmenu(‘refresh’);
[/javascript]

JQuery Mobile Framework Connecting

JQuery Mobile Framework connecting
[javascript]
<link rel="stylesheet" href="mobile_css.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile.structure-1.0rc2.min.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<script type="text/javascript" >
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
[/javascript]

JQuery Mobile: Disable the Ajax Form Submission

Wheneve possible by default in jQuery Mobile the form submission are automatically handled by Ajax.
To disable that globally next snippet of javascript code should be applied.

[javascript]
<script type="text/javascript" >
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
</script>
[/javascript]

If it doesn’t work try the code as follow
[javascript]
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">

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

</script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

[/javascript]

Happy codding!