Question posted in
You can find the official documentation here.

No variables defined in jQuery ajax

I normally use javascript ajax and everything works fine, but wordpress requires jquery ajax which i am not familiar with.

Why are the variables described in the following code are not defined?


var option = "'USER_ID': 'my id is 32',"
var note = "'this is my first note'";

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

        var data = {
            'action': 'my_action',
             option   //this does not work. <--- WHAT DO YOU MEAN DOES NOT WORK?
            'USER_NOTE': note  //this does not work. <--- WHAT DO YOU MEAN DOES NOT WORK?
            
        };

        // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
        jQuery.post(ajaxurl, data, function(response) {
            alert('Got this from the server: ' + response);
        });
    });
Tags:

4

Answers


  1. 0

    Define it as a function and wrap it in a closure passing the context in.

    var option = "'USER_ID': 'my id is 32',"
var note = "this is my first note";
const process = (function() {
  const data = {
    'action': 'my_action',
    option
    'USER_NOTE': note
  }
  jQuery.post(ajaxurl, data, function(response) {
    alert('Got this from the server: ' + response);
  });
})(option, note)

jQuery(document).ready(process);
    Login or Signup to reply.
  2. 0

    Or, just move everything into jQuery.ready

    
  jQuery(document).ready(function($) {
    
    var option = "'USER_ID': 'my id is 32',"
    var note = "this is my first note";

    var data = {
        'action': 'my_action',
        option,                    
        'USER_NOTE': note           
        
    };

    jQuery.post(ajaxurl, data, function(response) {
        alert('Got this from the server: ' + response);
    });
  });
    Login or Signup to reply.
  3. 0

    This is because your data json object is not properly defined. You need to change your option definition to the valid json object:

    var option = "'USER_ID': 'my id is 32',"

    to

    var option = {'USER_ID': 'my id is 32'}

    And add it a bit different way, so it would get merged properly:

    var data = {
        'action': 'my_action',
        ...option,                    
        'USER_NOTE': note           
        
    };

    That should fix your problem.

    Login or Signup to reply.
  4. 0

    Here is a codepen with your question: https://codepen.io/geoidesic/pen/wvoEdeN

    Here is the code:

    var option = "'USER_ID': 'my id is 32',";
var USER_ID = 'my id is 32';
var note = "'this is my first note'";


jQuery(document).ready(function($) {
  console.log(option); // proves that option is in scope
  console.log(note); // proves that option is in scope
  var data = {
            'action': 'my_action',
             USER_ID,
            'USER_NOTE': note
        };
  console.log(data); // proves that data is working

  jQuery.post('https://jsonplaceholder.typicode.com/posts', data, (response) => {
    console.log('response: ',response);
  })
});

    If you view the console. You can see that there is no problem with any undefined variables. If you view the network tab you can see that the POST request is sent.

    This should also serve as an example of how better to formulate your questions in a way in which people can actually help you, i.e. by using CodePen or similar.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search