jQuery Forum

Hi,

I've attached the code I'm currently writing as an attachment to this post. It includes both javascript and php for what I'm trying to do. Note that this problem is related to implementing AJAX into wordpress, so any knowledge about Wordpress helps here.

What am I trying to build? I wish to build a AJAX loading system for every segment of wordpress.

Lets start off with my PHP for wordpress here i initiate 3 scripts one, for JSON2 as it is said to be a more reliable parser than the one included in jQuery, then jQuery, and last my custom script called einaudi.js

PHP code:

1. // Load JSON parser
2. function loadJSONparser(){
3.     wp_deregister_script( 'json2' );
4.     wp_register_script( 'json2', get_template_directory_uri() . '/js/json2.js', false );
5.     wp_enqueue_script( 'json2' , get_template_directory_uri() . '/js/json2.js' , array(), false );   
6. };
7. add_action( 'wp_enqueue_scripts' , 'loadJSONparser' );
8. // Load jQuery
9. if ( !is_admin() ){
10.     wp_deregister_script( 'jquery' );
11.     wp_register_script( 'jquery' , ( "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" ), false );
12.     wp_enqueue_script( 'jquery' , ( "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" ), array ( 'json2' ), false);
13. };
14. // Load theme javascript functions & enable AJAX
15. function enableAJAX(){
16.     wp_deregister_script( 'einaudi.js' );
17.     wp_register_script( 'einaudi.js' , get_template_directory_uri() . '/js/einaudi.js' , false );
18.     wp_enqueue_script( 'einaudi.js', get_template_directory_uri() . '/js/einaudi.js' , array( 'jquery', 'json2' ) , '1.0.0', false );
19.     wp_localize_script(
20.         'einaudi.js',
21.         'enableAJAX' ,
22.         array(
23.             'ajaxurl' => admin_url( 'admin-ajax.php' ),
24.             'permalinkStructure' => get_option('permalink_structure'),
25.             'ajaxRequestNonce' => wp_create_nonce( 'newAjaxRequestNonce' )
26.         )
27.     );
28. }
29. // Hook enableAJAX into wp_enqueue_scripts
30. add_action( 'wp_enqueue_scripts' , 'enableAJAX' );

I hope someone can better explain the .post() function to me and what is happening when I initiate it.
Right now I have the following in my code:

jQuery .post()

1. $.post(
2.                 enableAJAX.ajaxurl,
3.                 { action: 'ajaxRequest',
4.                 'ajaxRequestNonce' : enableAJAX.ajaxRequestNonce,
5.                 'cleanedLinkStructureArray[]': cleanedLinkStructureArray,
6.                 'cleanedPermaLinkArray[]': cleanedPermaLinkArray },
7.                
8.                 function(responseText, textStatus, jqXHR){
9.                 if (status == "success"){
10.                     newContent = JSON.parse(responseText);
11.                     alert(newContent);
12.                 }
13.                if (status == "error") {
14.                     var msg = "Oops, I'm afraid we've broken something: ";
15.                     $("#error").html(msg + xhr.status + " " + xhr.statusText);
16.                }
17.         });

As you can see I'm currently trying passing the following data along:

1. An action hook for wordpress called ajaxRequest
2. ajaxRequestNonce something needed to authenticate the ajax request
3. cleanedLinkStructureArray[] containing values from the permalink structure defined by the user like %year% without the special characters
4. cleanedPermaLinkArray[] containing values for the actual permalink structure like 2012

On this .post() I hope to get return values for responseText, textStatus, jqXHR on success. But I can't grasp why I can't get it to work yet or what I still need to add. I hope someone can explain me how to return values for these 3 through PHP, preferably include in your explanation how I could use JSON_encode() for this. But any form of returned values will do, a string or an array or whatever.

1. // AJAX sendData after Request
2. function ajaxRequest(){
3.    
4.     // Declare variables with content passed in ajaxRequest
5.     $nonce = $_POST['ajaxRequestNonce'];
6.     $requestedPermalink = array ($_POST['cleanedPermaLinkArray[]']);
7.     $requestedPermalinkSegments = array ($_POST['cleanedLinkStructureArray[]']);
8.    
9.     if ( ! wp_verify_nonce( $nonce, 'newAjaxRequestNonce' ) ){
10.         //kill if AJAX request nonce doesn't match
11.         die ();
12.     }
13.     // generate the response
14.     $responseText = json_encode( array( 'success' => true ) );
15.        
16.     exit;
17. };
18.        
19. // Hook ajaxRequest into wp_ajax for users that are logged in and not logged in
20. add_action('wp_ajax_ajaxRequest', 'ajaxRequest' );
21. add_action('wp_ajax_nopriv_ajaxRequest', 'ajaxRequest');

I'm trying to check an array for empty values, and delete them from the array so that I only keep the important array values. Can someone tell me why this would not work?

$(document).ready(function(){
var siteurl = window.location.protocol + "//" + window.location.host
   
    $("a").click(function stripLink(){
        var permalink = $(this).attr("href").replace( siteurl, "" );
        permalink_array = permalink.split(/[&\/\\#,+()$~%.'":*?<>{}]/g);
       
        //Function that is supposed to strip the empty values but I don't see it working yet.   
        $.grep ( permalink_array, function(n,i){
            return (n != '' || n != null || n != NaN);
        });
    });
});

Hi, I'm Marnix and I'm currently trying to get JQuery mobile to work with Wordpress, but unfortunately due to the way wordpress generates all it's links in the source with PHP they all come without a "rel" attribute. This causes problems with links towards the admin panels from Wordpress. These admin pages need to be treated as a rel="external" or "data-ajax=false" by JQuery mobile and it needs to completely reload the admin page with the admin.css files for these pages.

As wordpress is a platform others build on as well I don't want to mess around in its source code so I hope to be able work around this with JQuery selectors and add the "data-ajax=false" to these links.

My idea was to do the following
1. I want to find all links to the admin pages (this needs to be done on every page change not just the initial homepage)
2. And I wish to add data-ajax=false to these links

(now here is the problem, I'm probably an absolute retard for thinking it could possibly work this way, so please enlighten me on where I'm wrong) :

I created an extra javascript file inside my /js/ folder for my theme, called custom.js, the only code in it currently is:

1. $(document).bind("mobileinit", function(){
2.       $("a":contains('/wp-admin/')).add(" data-ajax=false ");
3. });

I'm gonna try and explain my steps in the hope someone with more experience in JQuery can help me out:

I started with the BLANK Theme for wordpress (it can be downloaded here: http://themeclubhouse.digwp.com/. I've put the code (block 1) in the functions.php file, and copy pasted the JQuery mobile style definitions into the already existing style.css for the theme under the rest of the @media screen.

1. // Load jQuery
2. if ( !is_admin() ) {
3.     wp_deregister_script( 'jquery' );
4.     wp_register_script( 'jquery' , ( "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" ), false );
5.     wp_enqueue_script( 'jquery' );
6. }
7. // Load custom.js
8. if ( !is_admin() ) {
9.     wp_deregister_script( 'custom-script' );
10.     wp_register_script( 'custom-script' , get_template_directory_uri() . '/js/custom.js' , false );
11.     wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom.js' , array('jquery') );
12. }
13.  
14. //Load jQuery Mobile
15. if ( !is_admin() ) {
16.     wp_deregister_script( 'jquery.mobile' );
17.     wp_register_script( 'jquery.mobile' , ("http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"), false);
18.     wp_enqueue_script( 'jquery.mobile' , "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js" , array( 'jquery'));
19. }