I’m relatively new to JQuery/JS so if you could please make your answers idiot proof it would be appreciated.
Can anyone suggest how I can edit Jquery Mobile so its AJAX link features are only applied to specific classes.
Problem is links that have their own separate AJAX functions are being overrun by JQuery Mobile.
I’ve tried "ajaxEnabled: false" on specific classes but this disables all AJAX features, where I need to disable just ajax links from JQuery Mobile.
I’ve search the problem and only found outdated info on using .ajaxLinksEnabled : false; which no longer seems to be supported in Alpha 4, eg:
<code>
$(document).live("mobileinit", function() {
$.mobile.ajaxLinksEnabled :false;
$.mobile.ajaxFormsEnabled :false;
});
</code>
Any help would be great appreciated as spent hours trying to sort this now.
UPDATE:
I’m trying to use preventDefault:
`<script>
$('[data-role="page"]').bind('pageinit', function () {
$('.addtocart_form').bind('click', function (e) {
e.preventDefault();
//add your custom ajax call here
$('#addcartsubmit1').click(handleAddToCart);
});
});
</script>`
This stops the JQ Mobile AJAX link BUT fails to call functionhandleAddToCart
HTML and PHP:
`<form action="<?php echo $mm_action_url ?>index.php" method="post" name="addtocart" id="addtocart<?php echo $i ?>" class="addtocart_form" <?php if( $this->get_cfg( 'useAjaxCartActions', 1 ) && !$notify ) { echo 'onsubmit="handleAddToCart( this.id );return false;"'; } ?>>
<div class="quantbox"> <?php echo $ps_product_attribute->show_quantity_box($product_id,$product_id); ?><br /></div>
<div class="bsubmitcart"> <input type="submit" id="addcartsubmit1" style="border:none;" class="<?php echo $button_cls ?>" value="Add to Cart" title="<?php echo $button_lbl ?>" /> </div>`
You could add
data-ajax="false"to your links, it’s the jquery mobile way to disable Ajax on a link.If you want a pure Class solution, maybe try to
.die()on your link before binding your new ajax function.http://jquerymobile.com/demos/1.0rc2/docs/pages/page-links.html