WordPress AJAX – store jquery variable and echo it in php – function.php?

4 comments

1. WordPress environment

   First of all, in order to achieve this task, it’s recommended to register then enqueue a jQuery script that will push the request to the server. These operations will be hooked in wp_enqueue_scripts action hook. In the same hook you should put wp_localize_script that it’s used to include arbitrary Javascript. By this way there will be a JS object available in front end. This object carries on the correct url to be used by the jQuery handle.

   Please take a look to:

   1. wp_register_script(); function
   2. wp_enqueue_scripts hook
   3. wp_enqueue_script(); function
   4. wp_localize_script(); function

   File: functions.php 1/2

   add_action( 'wp_enqueue_scripts', 'so18550905_enqueue_scripts' );
   function so18550905_enqueue_scripts(){
     wp_register_script( 'ajaxHandle', get_template_directory() . 'PATH TO YOUR SCRIPT FILE', array(), false, true );
     wp_enqueue_script( 'ajaxHandle' );
     wp_localize_script( 'ajaxHandle', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin_ajax.php' ) ) );
   }
   

   File: jquery.ajax.js

   This file makes the ajax call.

   jQuery(document).ready( function($){
     //Some event will trigger the ajax call, you can push whatever data to the server, simply passing it to the "data" object in ajax call
     $.ajax({
       url: ajax_object.ajaxurl, // this is the object instantiated in wp_localize_script function
       type: 'POST',
       data:{
         action: 'myaction', // this is the function in your functions.php that will be triggered
         name: 'John',
         age: '38'
       },
       success: function( data ){
         //Do something with the result from server
         console.log( data );
       }
     });
   });
   

   File: functions.php 2/2

   Finally on your functions.php file there should be the function triggered by your ajax call.
   Remember the suffixes:

   1. wp_ajax ( allow the function only for registered users or admin panel operations )
   2. wp_ajax_nopriv ( allow the function for no privilege users )

   These suffixes plus the action compose the name of your action:

   wp_ajax_myaction or wp_ajax_nopriv_myaction

   add_action( 'wp_ajax_myaction', 'so18550905_wp_ajax_function' );
   add_action( 'wp_ajax_nopriv_myaction', 'so18550905_wp_ajax_function' );
   function so18550905_wp_ajax_function(){
     //DO whatever you want with data posted
     //To send back a response you have to echo the result!
     echo $_POST['name'];
     echo $_POST['age'];
     wp_die(); // ajax call must die to avoid trailing 0 in your response
   }
   

   Hope it helps!

   Let me know if something is not clear.

   Log in to Reply

2. Yes you can use AJAX to send your jQuery variable. (or any Javascript Variable)

   Simply do a JSON.stringify(any-Variable-Here) then you get a corresponding string.

   Send the value via AJAX to any php file like:

   var toBeSent = JSON.stringify($($('#selector')[0]).attr('class'));
   $.ajax({
     type: "POST",
     url: 'function.php',
     data: toBeSent,
     success: function(data){ // any action to be performed after function.php returns a value.
     },
     dataType: 'text'
   });
   

   NOTE: I’ve stringified the items here so that you can access the variables on the server side by doing simple splits.

   Log in to Reply

3. Sure you can

   $('element').click(function(e){
       e.preventDefault();
       var el = $(this);
   
       //do stuff on click
   
       //send this elements class to the server    
       $.ajax({
          url: "some.php",
          data: {
              class: el.attr('class')
          },
          success: function(r){
              alert("class name sent successfully to some.php");
          }
       });
   });
   

   Log in to Reply

4. another option for you could be $.post()

   $(document).ready( function() {
   
   $('#myDiv').click(function(){
   var myClass = $(this).attr('class');
   var url = 'page.php';
      $.post(url, { class: myClass })
      .done( function() {
        alert('class sent to ' + url);
      });
    }); 
   
   }); 
   

   Log in to Reply