ajax call in wordpress front end

Question

In my plugin i'm using two ajax calls in back end. that worked well. but to provide the same functionality in front end i loaded the copy of these two functions with another names and my code is:

in my plugin main file:

function my_action_callback(){
  global $wpdb; 
if (@$_POST['id']) {

    $daty = $wpdb->get_results("select eemail_id,eemail_content,eemail_subject  from " . WP_eemail_TABLE . " where 1=1 and eemail_status='YES' and eemail_id=" . $_POST['id']);
    //echo "select eemail_id,eemail_content,eemail_subject  from ".WP_eemail_TABLE." where 1=1 and eemail_status='YES' and eemail_id=".$_POST['id'];

    if (!empty($daty)) {
        foreach ($dat as $datt) {
            echo $datt->eemail_content . "_" . $datt->eemail_subject;
            die();
        }
      }
     } 
   }
  add_action('wp_ajax_nopriv_my_action', 'my_action_callback');

and in my settings.js

function showEntryfront(id)
   {


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

    var data = {
        action: 'my_action',
        id: id

    };

     jQuery.post(ajaxurl, data, function(response) {
        //alert('Got this from the server: ' + response);
        var n=response.split("_");  
        jQuery('textarea#mail_contents').text(n[0]);
        $('#mail_subject').val(n[1]);
        // jQuery('textbox#mail_subject').text(n[1]);
          });
       });
   }

and the plugin page which fires this showEntryfront() is:

<select name="eemail_subject_drop" id="eemail_subject_drop" onchange="showEntryfront(this.value)">
                <option value="">Select Email subject</option>
                <?php echo $eemail_subject_drop_val; ?>
            </select>
            <input type="hidden" name="send" value="" id="send" /> </td>
  <tr height="60px;"> <td>
            <textarea   name="mail_contents" id="mail_contents" rows="4" cols="40" ></textarea>

        </td></tr>

The second function is doing the same. only the db table is different.

Still my firebug console shows

ReferenceError: ajaxurl is not defined
jQuery.post(ajaxurl, data, function(response) {

and the textarea is not filling up with the db data from the table WP_eemail_Table. Please not that this functionality worked in wp-admin backend. i know the ajax call in admin will automatically load by admin-ajax.php. but how can i implement the same in front end. any mistake in my code??

Answer 1

You have to localize script by using wp_localize_script function. In the admin side ajaxurl is already available. But in front end you have to localize script to define ajaxurl.

Example:

wp_enqueue_script( 'custom-ajax-request', '/path/to/settings.js', array( 'jquery' ) );
wp_localize_script( 'custom-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

Answer 2

There actually is an integrated solution in WordPress core to use Ajax on the front end! WordPress has a little-known but very useful javascript library that can be accessed via the JS object window.wp, like this:

// In JS:

var action = 'my_action';
var data = {id: 123};

var promise = window.wp.ajax.post( action, data );
promise.always(function(response) {
  console.log('Ajax done:', response);
});

// the promise object also has other methods:
// `done()` / `fail()` / `progress()` / `state()` / `abort()`

Advantage is, that this object is maintained and used by WordPress core. So you can rely that it's up-to-date, working, and most robust way to handle your Ajax. Also note that you do not need to handle the jQuery stuff...

If you do not have the javascript object window.wp in the front-end then you need to load it by enqueueing this WP core script:

<?php

wp_enqueue_scripts( 'wp-utils' );