35

I'm familiar with using ajax in the ordinary way with jQuery.
I've played around it for a while, but don't understand what Wordpress needs to get it to work...
What I have here is taken from some tutorial or article.
This is in functions.php (in a child theme):

// code to load jquery - working fine

// code to load javascript file - working fine

// ENABLE AJAX :
function add_ajax()
{
   wp_localize_script(
    'function',
    'ajax_script',
    array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}

$dirName = get_stylesheet_directory();  // use this to get child theme dir
require_once ($dirName."/ajax.php");  

add_action("wp_ajax_nopriv_function1", "function1"); // function in ajax.php

add_action('template_redirect', 'add_ajax');

The jQuery itself is loading and working fine.

I have tried some basic ajax like the following:

jQuery(document).ready(function($){
    $('a.link').click(function(){
        $.ajax({
              url:     ajax_script.ajaxurl,
              data:    ({action  : 'function1'}),
              success: function(data){
                     $('#result').html(data);
              }
        });
        return false;
    });
});

Besides this, I don't know how I can test to see if it's even loaded correctly to begin with...

Any help here would be appreciated.

EDIT:
In firebug this error: 

ReferenceError: ajax_script is not defined
       url:   ajax_script.ajaxurl,
Improve this question
1

6 Answers 6

Reset to default
77

As per your request I have put this in an answer for you.

As Hieu Nguyen suggested in his answer, you can use the ajaxurl javascript variable to reference the admin-ajax.php file. However this variable is not declared on the frontend. It is simple to declare this on the front end, by putting the following in the header.php of your theme.

<script type="text/javascript">
    var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
</script>

As is described in the Wordpress AJAX documentation, you have two different hooks - wp_ajax_(action), and wp_ajax_nopriv_(action). The difference between these is:

  • wp_ajax_(action): This is fired if the ajax call is made from inside the admin panel.
  • wp_ajax_nopriv_(action): This is fired if the ajax call is made from the front end of the website.

Everything else is described in the documentation linked above. Happy coding!

P.S. Here is an example that should work. (I have not tested)

Front end:

<script type="text/javascript">
    jQuery.ajax({
        url: ajaxurl,
        data: {
            action: 'my_action_name'
        },
        type: 'GET'
    });
</script>

Back end:

<?php
    function my_ajax_callback_function() {
        // Implement ajax function here
    }
    add_action( 'wp_ajax_my_action_name', 'my_ajax_callback_function' );    // If called from admin panel
    add_action( 'wp_ajax_nopriv_my_action_name', 'my_ajax_callback_function' );    // If called from front end
?>

UPDATE Even though this is an old answer, it seems to keep getting thumbs up from people - which is great! I think this may be of use to some people.

WordPress has a function wp_localize_script. This function takes an array of data as the third parameter, intended to be translations, like the following:

var translation = {
    success: "Success!",
    failure: "Failure!",
    error: "Error!",
    ...
};

So this simply loads an object into the HTML head tag. This can be utilized in the following way:

Backend:

wp_localize_script( 'FrontEndAjax', 'ajax', array(
    'url' => admin_url( 'admin-ajax.php' )
) );

The advantage of this method is that it may be used in both themes AND plugins, as you are not hard-coding the ajax URL variable into the theme.

On the front end, the URL is now accessible via ajax.url, rather than simply ajaxurl in the previous examples.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

7

Firstly, you should read this page thoroughly http://codex.wordpress.org/AJAX_in_Plugins

Secondly, ajax_script is not defined so you should change to: url: ajaxurl. I don't see your function1() in the above code but you might already define it in other file.

And finally, learn how to debug ajax call using Firebug, network and console tab will be your friends. On the PHP side, print_r() or var_dump() will be your friends.

Improve this answer

6 Comments

Already using firebug as said at bottom of my question. And familiar with print_r and var_dump. I am continuing to work on it myself, but just posted in hope that someone could spot something wrong with the code above (if anything), or suggest an alternative method. I made the change to the url you suggested, but it didn't change anything - still saying undefined. My function1() is in the ajax.php file, but it's not doing anything special. For now I just want to get any response. Thanks for the input.
what exactly is undefined now? if it's complaining ajax_script is not defined then you have that somewhere else.
ReferenceError: ajaxurl is not defined url: ajaxurl, ..... Just pasted that in from firebug.
ajaurl is not available on the front end - it is defined in the admin panel, but that is it. If you want to define it on the front end, something along the lines of the following in your header.php will work great: <script type="text/javascript">var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";</script>
@Shane - Sorry, I didn't see that comment until now. I just added an answer for the question myself. I think the add_action("wp_ajax_nopriv_ covers front-end use.
|
4

I'm not allowed to comment, so regarding Shane's answer, keep in mind that

wp_localize_scripts();

must be hooked to wp or admin enqueue scripts, depending on where you intend to use the variable. So a good example would be as follows:

function localize_variable() {

    wp_localize_script( 
        'js-file-handle', 
        'ajax', 
         array(
             'url' => admin_url( 'admin-ajax.php' )
         )
    );

}

add_action('admin_enqueue_scripts', 'localize_variable');
add_action('wp_enqueue_scripts', 'localize_variable');

And in your js you can use it as console.log(ajax.url) /* outputs https://yourdomain/wp-admin/admin-ajax.php */

Improve this answer

Comments

3

Use wp_localize_script and pass url there:

wp_localize_script( some_handle, 'admin_url', array('ajax_url' => admin_url( 'admin-ajax.php' ) ) );

then inside js, you can call it by

admin_url.ajax_url
Improve this answer

Comments

2

Personally i prefer to do ajax in wordpress the same way that i would do ajax on any other site. I create a processor php file that handles all my ajax requests and just use that URL. So this is, because of htaccess not exactly possible in wordpress so i do the following.

1.in my htaccess file that lives in my wp-content folder i add this below what's already there 

<FilesMatch "forms?\.php$">
Order Allow,Deny
Allow from all
</FilesMatch>

In this case my processor file is called forms.php - you would put this in your wp-content/themes/themeName folder along with all your other files such as header.php footer.php etc... it just lives in your theme root.

2.) In my ajax code i can then use my url like this 

$.ajax({
    url:'/wp-content/themes/themeName/forms.php',
    data:({
        someVar: someValue
    }),
    type: 'POST'
});

obviously you can add in any of your before, success or error type things you'd like ...but yea this is (i believe) the easier way to do it because you avoid all the silliness of telling wordpress in 8 different places what's going to happen and this also let's you avoid doing other things you see people doing where they put js code on the page level so they can dip into php where i prefer to keep my js files separate.

Improve this answer

4 Comments

WordPress already has the appropriate mechanisms built in - why re-invent the wheel?
I personally think their way is extremely clunky - as a developer i would rather have access to whatever files i want that contains logic.
Normally I build a folder with a library of different ajax endpoint files that return a json string. Do I have to add a new file exclusion rule in the .htaccess for every file, or is there a way to "hybridize" the normal method with the WordPress method, by using one processing file, with unlimited functions, and call a function within the processing file?
My wp-content folder doesn't have an .htaccess file.
-2

I thought that since the js file was already loaded, that I didn't need to load/enqueue it again in the separate add_ajax function.
But this must be necessary, or I did this and it's now working.

Hopefully will help someone else.

Here is the corrected code from the question:

// code to load jquery - working fine

// code to load javascript file - working fine

// ENABLE AJAX :
function add_ajax()
{
    wp_enqueue_script(
       'function',
       'http://host/blog/wp-content/themes/theme/js.js',
       array( 'jquery' ),
       '1.0',
       1
   );

   wp_localize_script(
      'function',
      'ajax_script',
      array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}

$dirName = get_stylesheet_directory();  // use this to get child theme dir
require_once ($dirName."/ajax.php");  

add_action("wp_ajax_nopriv_function1", "function1"); // function in ajax.php

add_action('template_redirect', 'add_ajax');
Improve this answer

1 Comment

This is wrong several ways. You have hooks to functions that don't exist in your code.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.