CODEWITHSUNDEEP
jquerywordpressjquery-mobilejquery-mobile-ajax
RaySinlao
RaySinlao

Reputation: 156

Jquery Mobile conflicting with the Wordpress Admin Bar

I am using Jquery Mobile with my Wordpress site. Everything in the site is working perfectly fine. It is effecting the admin bar only when you are on the front end of the site. Admin options are clickable but they do not go through.

I am guessing that it has something with AJAX.

When you are in the back end of the site the admin bar works. I tired using:



      $(document).bind("mobileinit", function () {

            $.mobile.ajaxEnabled = false;

      });

But that did not work. I know for sure it has something to do with jQuery Mobile. Anyone else have this issue? Any ideas of how can I fix this?

These are the versions that I am using:

jquery-1.8.3.min.js

jquery.mobile-1.3.0-beta.1.min.js

WordPress 3.5.1

Upvotes: 0

Views: 981

Answers (3)

RaySinlao
RaySinlao

Reputation: 156

Ajax was causing my site to return false all anchor links. Disabling AJAX and the page transition fixed this issue.

$(document).on("mobileinit", function(){
$.mobile.defaultPageTransition = 'none';
$.mobile.ajaxEnabled = false;});

Upvotes: 0

Trevor
Trevor

Reputation: 2521

Unfortunately because of the AJAX navigation that jQuery Mobile uses by default the admin bar in WordPress doesn't work. You have to be careful of your placement of your disabling of the AJAX navigation, it has to be after you load jQuery & jQuery Mobile. Anyway, this should fix things up for you! 

<script>
$(document).delegate("#jqm-page","pageinit", function() {
$.mobile.ajaxEnabled=false;
 });
</script>

note: if you really like the AJAX navigation though, you should be able to just disable it for when an admin user is logged in, but I haven't tried that.

Also, as Anthony mentioned if you are using WP's jQuery then you will have to make sure you use jQuery in noConflict mode. But I think you'll have better luck anyway if you register and enqueue the recommended version of jQuery from a Content Delivery Network (i.e. jquery.com) for the version of JQM you are using.

wp_deregister_script('jquery');
wp_register_script('jquery', ("http://code.jquery.com/jquery-1.9.1.min.js"), false);
wp_enqueue_script('jquery');

For additional details on all of the above you can try these links:

http://wordpress.org/support/topic/integration-of-jquery-mobile-into-wordpress-breaks-linking-to-admin-panels?replies=7

http://tutsme-webdesign.info/twenty-eleven-jquery-mobile-theme/

Upvotes: 0

Anthony Atkinson
Anthony Atkinson

Reputation: 3248

You may want to attempt to use jQuery in noConflict mode in case there are multiple versions being loaded (which I would check for) or other libraries using $ to be called.

Upvotes: 0

Related Questions