How to Load Ajax in Wordpress

Question

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    gt  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

User · Answer

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');

User · Answer

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  So a good example would be as follows  function local          wp localize script   js-file-handle    ajax   array           url    gt  admin url   admin-ajax php                 add action  admin enqueue scripts    local    add action  wp enqueue scripts    local

User · Answer

Use wp localize script and pass url there   wp localize script  some handle   admin url   array  ajax url    gt  admin url   admin-ajax php           then inside js  you can call it by  admin url ajax url

User · Answer

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    lt FilesMatch  forms   php   gt  Order Allow Deny Allow from all  lt  FilesMatch gt    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

User · Answer

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

User · Answer

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    lt script type  text javascript  gt      var ajaxurl     lt  php echo admin url  admin-ajax php      gt     lt  script gt    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    lt script type  text javascript  gt      jQuery ajax           url  ajaxurl          data                action   my action name                     type   GET           lt  script gt    Back end    lt  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   gt      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    gt  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

[php] How to Load Ajax in Wordpress

Examples related to php

Examples related to jquery

Examples related to ajax

Examples related to wordpress