WordPress: Using AJAX Request

 Provide access to global URL admin-ajax.php and export this function to our WP POST

  • Use wp_enqueue_script to make  JavaScript file my-ajax2.js  accessible in our WP Post
  • Use wp_localize_script() to make URL admin-ajax.php  useable in our scripts
  • Even though the  admin-ajax.php resides in the admin area of your site, you can use it to
    process interactions from the front-end, as well as the back-end
  • In WordPress all Ajax requests are sent to admin-ajax.php for processing.
  • Modified functions.php :
 
  function my_js_scripts() 
      {
        /* AJAX  request with wp_localize_script */
        wp_enqueue_script( 'hhu-script', get_stylesheet_directory_uri().'/scripts/my-ajax2.js', array( 'jquery' ),'0.9', false );
        wp_localize_script('hhu-script', 'hhu_vars', array('ajaxurl'   => admin_url( 'admin-ajax.php' ))    
      }
   add_action( 'wp_enqueue_scripts', 'my_js_scripts' );

 

Define the AJAX Callback Function

  •  To fire on the front-end for both visitors and logged-in users use wp_ajax_nopriv_ and wp_ajax_  action
  • Define a Callback Function named  myAjax2()   [ Called from our PHP code ]
  • Modified functions.php :
 
  function myAjax2()
     { 
       //get data from the ajax() call -  ID greeting3 is used 
     $greeting = $_POST['greeting3']; 
     $res1 = "<p>".$greeting;
     $res2 ='<br />  - get_template_directory()    : '.get_template_directory();
     $res3 ='<br />  - get_template_directory_uri(): '.get_template_directory_uri();
     $res4 ='<br />  - get_stylesheet_directory(): '.get_stylesheet_directory();
     $res5 ='<br />  - get_stylesheet_directory_uri(): '.get_stylesheet_directory_uri();

     $results = $res1.$res2.$res3.$res4.$res5.'</p>';  //Return String 
     die($results); 
     } 

        // create new Ajax call for WordPress for users logged in and Not logged in  
 add_action( 'wp_ajax_nopriv_myAjax2', 'myAjax2' ); 
 add_action( 'wp_ajax_myAjax2', 'myAjax2' );

The HTML Code

  • ajax3-button button triggers  the AJAX request
  • Hidden Input field greeting3 message will be send via AJAX request and its value is read by through  $_POST[‚greeting3‘] in  function myAjax2()
  • HTML ID divp4 is used to display the results of our AJAX request
  
 HTML Code:
   <div class="p2" id="divp2"><b>OPS PANEL: </b> 
      <button id="ajax3-button" ">WP AJAX3</button>
   </div>
   <input type="hidden" name="greeting3" id="greeting3" value="WP Details via AJAX request 3:" /> 
   <div class="p4" id="divp4"><p> Info PANEL - P4 - don't forget to scroll down for last message</p> </div>

 

JavaScript Code:  my-ajax2.js triggering the AJAX reqest via JQuery

  • Defines the JavaScript file to be run via action parameter  : myAjax2
  • Assigns to JS script parameter greeting the value from HTML ID :  greeting3
  • The JavaScript object hhu_vars points to  admin-ajax.php [ defined via wp_localize_script in Step 1]
  • Updates the HTML div divp4 with the AJAX call results
  • The action parameter is responsible for making the connection between the JavaScript file and the PHP code.
  • JavaScript Code: my-ajax2.js:
   jQuery(document).ready(function() 
    { 
      var greeting = jQuery("#greeting3").val();    
      jQuery("#ajax3-button").click(function()
        {
          console.log('ajax3-button pressed') ;          
          jQuery.ajax({
           type: 'POST', 
           url :  hhu_vars.ajaxurl,
           data: { action: 'myAjax2', greeting3: greeting  },
           success: function(data, textStatus, XMLHttpRequest)
                      {
                      console.log("Returing form AJAX request - Adding greetings to Div:  #divp4 ");  
                        jQuery("#divp4").html(''); 
                        jQuery("#divp4").append(data); 
                        },
            error: function(XMLHttpRequest, textStatus, errorThrown)
                    { alert(errorThrown); }
                 });  
      console.log('Leaving ajax3-button Ajax action');
          });  
  });

Reference