No variables defined in jQuery ajax

Question

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

Answer 1

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.