ajax call in wordpress front end

by

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??

2 Answers
2

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

Leave a Comment