WordPress.org

Ready to get started?Download WordPress

Forums

Integration of JQuery Mobile into wordpress breaks linking to admin panels (7 posts)

  1. Marnix_IxD
    Member
    Posted 1 year ago #

    Today I wanted to start building a new theme using JQuery Mobile, as a default, all links in JQuery mobile are loaded through AJAX, you would think this is awesome! But no... It isn't compatible with WordPress for me... Maybe I'm doing something wrong, and there is a way to work around this. Here is how I included JQuery Mobile in my theme, I started with the BLANK Theme (can be downloaded here: http://themeclubhouse.digwp.com/. I've put the code below in the functions.php file, and copy pasted the JQuery mobile style definitions into style.css under the rest of the @media screen.

    // Load jQuery
    if ( !is_admin() ) {
    	wp_deregister_script('jquery');
    	wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"), false);
    	wp_enqueue_script('jquery');
    }
    
    // Load jQuery Mobile
    if ( !is_admin() ) {
    	wp_deregister_script('jquery.mobile');
    	wp_register_script('jquery.mobile', ("http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"), false);
    	wp_enqueue_script('jquery.mobile');
    }

    Now the problem starts, when trying to click on a link generated by WordPress, for example:

    <?php edit_post_link('Edit this entry'); ?>

    Or just any of the links of my admin bar even...now I believe the problem starts because of this AJAX loading by JQuery mobile(
    http://jquerymobile.com/test/docs/pages/page-links.html) Here they say that multipage documents are indeed not working with the AJAX load, and need to be worked around using the rel="External" attribute for links. Now these edit post links or any other admin panel link, are defined by wordpress outside my theme... and I don't want to start messing with the source code made by wordpress.

    Now I could just generate the links differently inside my theme, but they also break the links from the standard wordpress admin bar. And that is a problem I wish to avoid.

    SOOOO my question is: How can I integrate JQuery mobile in my theme? And avoid these admin links from breaking?

  2. Mohd Rafie
    Member
    Posted 1 year ago #

    There's a plugin that does that

    http://wordpress.org/extend/plugins/jquery-mobile/

    But I understood that you wish to integrate this with your theme.

    What I would do is:

    Check if your theme has already call the jQuery library. Ideal if you queue the one that is being used by WP.

    Guide: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    2. Then, if it is all good, then you should be good.

    But I would start by creating a template that loads the jQuery mobile to work from the content or layout.

    Hope it helps.

  3. Marnix_IxD
    Member
    Posted 1 year ago #

    The problem isn't with loading the JQuery mobile library, or JQuery, this works flawless and if you read my post you can see that use the enqueue script, though I will add the dependancies of JQuery Mobile on JQuery to make it more neat, so thanks for the reference to that ;) it did help a little.

    What the problem is, is that WordPress links are defined inside "wp-includes/link-template.php" without a "rel" attribute in its source code, so my JQuery mobile tries to treat these links similar to internal page links because of the URL & the lack of a rel attribute, but it breaks because of this.

    Internal page linking works correctly and gives nice animated transitions with AJAX loading. But the Admin pages are something that I guess would be considered an external page or a multipage document and therefor needs a work around method which I haven't been able to figure out yet. So I was wondering if anyone had found a solution already as I can't find anything yet that deals with these issues. And well in the meanwhile I will try and find an ugly way to hack my way around this lack of a rel attribute to the WordPress links. I'll post it if I've found a solution.

  4. Marnix_IxD
    Member
    Posted 1 year ago #

    I've posted the problem on the jQuery forums as well,
    http://forum.jquery.com/topic/jquery-mobile-how-to-filter-wp-admin-links-and-set-their-data-ajax-false#14737000003657904

    Where they helped me fix the jQuery code which is in custom.js

    $(document).on("pagebeforecreate", ".ui-page", function(event) {
    	var $page = $(this);
    	$page.find("a[href^='/wp-admin/']").attr("data-ajax", "false");
    });

    Now I'm back with WordPress being the problem.

    I'm now getting the following error:

    ReferenceError: ajaxurl is not defined

    if ( !is_admin() ) {
    
    		wp_deregister_script( 'jquery' );
    		wp_register_script( 'jquery' , ( "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" ), false );
    		wp_enqueue_script( 'jquery' );
    		wp_localize_script( 'jquery', 'customAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
    	}
    
    	if ( !is_admin() ) {	
    
    		wp_deregister_script( 'custom' );
    		wp_register_script( 'custom' , get_template_directory_uri() . '/js/custom.js' , false );
    		wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js' , array('jquery') );
    
    	}
    
    	if ( !is_admin() ) {
    
    		wp_deregister_script( 'jquery.mobile' );
    		wp_register_script( 'jquery.mobile' , ("http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"), false);
    		wp_enqueue_script( 'jquery.mobile' , "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js" , array( 'jquery') );
    
    	}

    So I added the code above to my functions.php but, well I'm clueless on why this isn't working right now... the ajaxurl is defined globally. And yet I'm getting the same error. I would really appreciate some expert help here.

  5. Theo F
    Member
    Posted 1 year ago #

    Hi Martin,

    stumbled upon your question today. I see that you posted this 2 months ago so maybe you already found the solution. But since this post is not set to resolved I decided to reply.
    When I tried to integrate jQuery Mobile into a WordPress theme I at first didn't get it to work properly too. After integrating jQuery Mobile the admin toolbar didn't work anymore. Reading your question I have the impression you encountered the same problem. I found a script (written by Phil Dutson) that disabled the automatic AJAX navigation used by jQuery Mobile. With the use of this script I was able to integrate jQuery Mobile into both the WordPress Twenty Eleven and the Twenty Twelve theme.
    You can find the working themes and an explanation how to integrate jQuery Mobile here:
    jQuery Mobile with Twente Eleven
    and here:
    jQuery Mobile with Twenty Twelve

  6. venkmanuk
    Member
    Posted 1 year ago #

    Not sure if this will solve the problem, but I've had good results by building a custom download of jQuery Mobile - taking only the stuff i need. In my case I only needed the touch gestures.

    http://jquerymobile.com/download-builder/

    The custom file didn't add loads of other stuff, which was better for troubleshooting too!

  7. jmscott55
    Member
    Posted 1 year ago #

    Theo has hit the mark. Check out the articles. If enqueuing the scripts and styles from jquerymobile there needs to be a file enqueued after jquery and before jquerymobile.
    Here is the content that I found works

    jQuery(document).ready(function($){
    $(document).delegate("#jqm-page","pageinit", function() {
    $.mobile.ajaxEnabled=false;
    });
    });

Topic Closed

This topic has been closed to new replies.

About this Topic