Ajax not working to insert, query and result data

I would suggest googling “wordpress ajax tutorials”. Here is one that was beneficial to me.
https://premium.wpmudev.org/blog/using-ajax-with-wordpress/

The first problem I see is you have not stated what your ‘action’ variable is. The JavaScript AJAX call specifies what function is targeted in the ‘action’ attribute. In WP, this is the hook executes your server-side AJAX code. This is how my AJAX calls work for me:

jQuery.post(ajaxurl,
    {"action" : "popover_content",
     "type" : this.data.subtype, 
     "key"  : this.data.key},
      function(content) {
        showPopover(e, content);
  }

I have created my own WP plugin (according to the tutorials) to handle the AJAX request. The code there looks like this:

add_action( 'wp_ajax_popover_content', 'popover_content' );

function popover_content() {
...
}

Note the action in the JS, “popover_content”, matches the hook in the add_action hook. In other words, if you have add_action( wp_ajax_my_ajax_action, my_ajax_function), then the action variable in the JS should be my_ajax_action.

Also note that WP defines a global variable ajaxurl so you don’t have to specify the path/name of admin-ajax.php.

Personally, I found it easier to have the action hook return a simple message while I worked on the AJAX call in the front end; once that worked, querying the database and returning the content was simple.

P.S. You can see I am placing the returned content into a popover, so placing your content into a modal should be easy.

Related Posts: