0

I try to make an ajax function in wordpress and I enqueued my script and declared my variables like this in functions.php:

function my_enqueue_scripts() {
    wp_enqueue_script(
        'load_post', 
        get_template_directory_uri() . '/js/load_post.js', 
        array( 'jquery' ), 
        '1.0', 
        1
    );
    wp_localize_script( 
        'load_post', 
        'wp_ajax',
        array( 
            'url' => admin_url( 'admin-ajax.php' ), 
            'nonce' => wp_create_nonce( 'ajax_nonce' )
        )
    );
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

load_post.js :

jQuery(document).ready(function($) { 

    jQuery('#next-container').click(function($) {

        var $container = jQuery('#isotope-container');
        var IDs = [];
        jQuery(".element").each(function($){ IDs.push(this.id); });

        jQuery('#next-container').html('loading');

        jQuery.ajax({
            type: 'POST',
            url: wp_ajax.url,
            dataType: 'html',
            data: {  action: 'load_post',  
                     ajax_nonce: wp_ajax.nonce,
                     post_ids: IDs,  
                  },  //{'post_ids[]': IDs },
            success: function(data) {
                    jQuery('#next-container').html(''); 
                    $container.isotope( 'insert', $(data)); 
                    }
        })
    })
})

However in my load_post.js I can't get wp_ajax variable. I don't see any variable added in the head section of my source code in google chrome or IE.

Where comes from my problem? Do I miss something?

  • Please add your javascript code to the question as well. – mrwweb Jul 10 '13 at 13:42
0

Your code looks correct.
alert(wp_ajax.nonce); should display the nonce.
You can also verify the existence of the wp_ajax object via console.log(wp_ajax) in your browser's Javascript console.

wp_localize_script adds the object(s) to the footer (a call to wp_footer() should be present in the theme's footer.php file).
It'll look like so:

<script type="text/javascript">
    /* <![CDATA[ */
    var wp_ajax = {"url":"http://example.com","nonce":"123XYZ"};
    /* ]]> */
</script>
  • Thanks a lot!! It's because I forget to add wp_footer() ! I was thinking it was in wp_head()! Now I see the variable in the footer in the source code! But I have a problem with my javascript... here $container.isotope( 'insert', $(data)) : Uncaught TypeError: object is not a function – freaky Jul 10 '13 at 13:55
  • 1. As a general note: That's a javascript error unrelated to WordPress and would hence be on-topic on Stack Overflow. | 2. $(data) is likely supposed to be a variable. Currently your passing data to the jQuery object ($). You likely want $data. Which, as an aside, goes to show why prefixing JS variables with a dollar sign is not a good practice, IMHO. | 3. isotope.metafizzy.co/docs/adding-items.html#insert_method – Johannes Pille Jul 10 '13 at 14:05
  • This script works great in my html template but know with wordpress it don't works... – freaky Jul 10 '13 at 14:07
  • With or without $ prefix I've got problem. I don't have any problem with this without wordpress. It seems to comes from wordpress and the way that jquery prefix is used... – freaky Jul 10 '13 at 15:01
  • Fair enuff, that's likely a correct guess. $ is not a "prefix" for jQuery, it's an alias. The name of the jQuery object is jQuery - use that instead, you'll be good. For more info: Refer to this answer. – Johannes Pille Jul 10 '13 at 15:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.