1

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

  • ajaxurl is not available in front end. You need to explicitly define it yourself for frontend. Check this, you can get reference to implement ajax in front end. link – Nilambar Aug 19 '14 at 8:52
  • @Nilambar: Hi friend..thanks for your reply.. i have already tried the method "wp_ajax_nopriv_" as prescribed in link that u've shared. can u please guide me to find out the error in the way i used for explicitly defining ajaxurl.? – Zammuuz Aug 19 '14 at 9:13
  • You have to localize script by using wp_localize_script function example – Nilambar Aug 19 '14 at 9:16
  • Just a quick note: ` ... eemail_id=" . $_POST['id'])` is ripe for a SQL injection. – David Hayes Jul 6 '18 at 13:04
4

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

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' );
  • Are there any docs on wp.ajax? Thanks – raison Apr 6 '18 at 10:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.