Conflict with jQuery Mobile

[fabrep]

Hi,

We are using eStore & eMember on a WordPress website that switches themes depending on whether the user is on a mobile device or not.

The mobile theme has been developed with jQuery Mobile.

One page includes a PayPal subscription button (shortcode [wp_eStore_subscribe:product_id:2:end]). It works perfectly when the normal theme is used, but it breaks with the mobile theme. The checkbox Ajax validation (to agree with Terms & Conditions) doesn’t work.

The conflict is clearly with jQuery Mobile: disabling the link to jQuery Mobile js script makes the page work again (but of course, strips off all of jQuery Mobile enhancement).

eMember uses jQuery.noConflict() so I can’t manage to understand what I should do to avoid conflicts between jQuery Mobile and eMember JavaScript functions.

Thanks in advance for your advice.

[admin]

All of our JQuery code runs in no conflict mode so that shouldn’t be an issue. When it switch to the other theme, it is most likely loading a different copy of JQuery library which is not working correctly. My recommendation would be to verify that the following has been done correctly in this Jquery mobile theme that you are using:

https://support.tipsandtricks-hq.com/forums/topic/wrong-way-of-adding-jquery-library-to-wordpress-source-of-javascript-conflicts

You an also do the following as a workaround:

1) Turn off the “Terms and Conditions” checkbox option in the settings menu.

2) Add a message like the following just below or above the “Subscription” button (this has a same meaning as checking the checkbox):

You agree to our terms and conditions when you subscribe

[fabrep]

Thank you for your quick reply. The WordPress theme is not a plug-in, but our own. Scripts are enqueued the proper way (wp_enqueue_script) and we are using the same jQuery version in both versions (normal and mobile). The normal version works perfectly.

I created a test page for the mobile version. When I comment out the jQueryMobile enqueue script line, everything works (other than the jQuery Mobile enhancement not being applied anymore, of course). When I turn it back on, your Ajax validation of the checkbox stops working. So to me, the conflict with the jQuery Mobile library seems evident (although I do agree that your use of .noConflict(), to my opinion, should prevent that).

Would it be possible to send you a private URL so you can have a quick check and see if something seems obvious to you? If so, how should I proceed?

Thanks in advance,

[fabrep]

One more info. I went into eStore_misc_functions.php and added : data-role=”none” on line 702, in order to block jQuery Mobile enhancement precisely on the submit button of your form. The functionnality works again.

This narrows the problem. It precisely occurs on the jQuery Mobile enhancement of the submit form buttons. This conflicts with your JavaScript code (not to say that there is anything wrong with it).

I did some tests injecting code in your own JavaScript in eStore_includes.php. Everything from line 151 (jQuery document ready) to 171 (capturing the click event on the checkbox) works fine. The problems starts with the click event on the submit button ($(“.eStore_subscribe_button”).click(function(e){) which is not captured.

So the conflict seems to be exactly there.

Some kind of control of the event propagation might be required to harmonize jQuery Mobile enhancement & the operation of your code. If you have an idea on how to solve this… Thank you!

[admin]

Sent you an email so you can reply to it and share the info.

[fabrep]

Dear admin, thank you for your extreme reactivity. As indicated in my private email, I found the solution. The submit button stopped working because of a CSS rule in wp_eStore_style.css, line 125:

.eStore_paypal_checkout_button,.eStore_button,.eStore_remove_item_button,.eStore_empty_cart_button,.eStore_buy_now_button,.eStore_subscribe_button,.download_now_button_submit,.eStore_sold_out {

width: auto !important;/*override the eStore button width to auto to prevent them from looking weird on some themes */

}

This line forces “auto” width on submit buttons, with a “!important” attribute. This overrides JQM styling… When placing the cursor at the very left of the submit button, I realised it was possible to click on it and it worked ! The button was just reduced to its minimum size because of “width:auto”. JQM is not able, because of the “!important” attribute, to apply its own CSS width to the element that is bound to the click handler.

Deleting this line in wp_eStore_style.css solved everything. I see this line was added for compatibility reasons with external themes, but it interferes with JQM. Maybe it should simply be removed?

Thank you for your excellent support.

[Author]

Posts