WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm building a custom jQuery form and I need to specify the siteurl in the url that loads /wp-admin/admin-ajax.php.

I place this code in the template that has the form:

<script type="text/javascript">
jQuery('#newFeedbackForm').submit(ajaxSubmit); 
function ajaxSubmit(){
    var newFeedbackForm = jQuery(this).serialize();
    jQuery.ajax({
        type:"POST",
        url: <?php get_bloginfo('siteurl'); ?> . "/wp-admin/admin-ajax.php",
        data: newFeedbackForm,
        success:function(data){
            jQuery("#feedback").html(data);
        }
    });
    return false;
}
</script>

When I submit the form I get a 404 error with all the form inputs in the URL. I'm thinking ajax isn't being called right to handle the form and apply the function of the hidden value:

<input type="hidden" name="action" value="addComment"/>

Working backwards, here is the addComment function:

function addComment(){
global $wpdb;

$topic = $_POST['topic'];
$name = $_POST['name'];
$email = $_POST['email'];
$no_results_comment = $_POST['no_results_comment'];

// EXTRA
$date = time(); // UNIX TIMESTAMP

if($wpdb->insert('wp_no_results_feedback',array(
    'topic' => $topic,                                                      
    'name' => $name,
    'email' => $email,
    'no_results_comment' => $no_results_comment,
    'date' => $date
    ))===FALSE){
        echo "Error";           
    }else{
        echo "Thanks for your feedback. We will get back to you shortly.";
    }
    die();
}
add_action('wp_ajax_addComment','addComment');
add_action('wp_ajax_nopriv_addComment','addComment');
share|improve this question
up vote 0 down vote accepted

If your JavaScript is running in the admin, you don't need to set an explicit path to admin-ajax.php. It's always available as a JS variable called "ajaxurl". You can see an example of this in the Codex, under the heading "AJAX on the Administration Side"

Ajaxurl is, unfortunately, not available on the frontend by default. But you can use a trcik with wp_localize_script() to declare it in a custom namespace, and use it in your frontend scripts. This is a really handy trick. More in this blog post (also linked from that Codex article).

share|improve this answer

Following @MathSmath 's answer, you can make ajaxurl available in the front end using this snippet:

add_action('wp_head','pluginname_ajaxurl');
function pluginname_ajaxurl() {
    ?>
    <script type="text/javascript">
        var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
    </script>
    <?php
}

And you need to pass the action name to the jQuery.ajax function as follows:

jQuery.ajax({
    action: 'addComment'
    type:"POST",
    data: newFeedbackForm,
    success:function(data){
        jQuery("#feedback").html(data);
    }
});
share|improve this answer

Following @MathSmath's answer

If your JavaScript is running in the admin, you don't need to set an explicit path to admin-ajax.php. It's always available as a JS variable called "ajaxurl". You can see an example of this in the Codex, under the heading "AJAX on the Administration Side"

Ajaxurl is, unfortunately, not available on the frontend by default. But you can use a trcik with wp_localize_script() to declare it in a custom namespace, and use it in your frontend scripts. This is a really handy trick. More in this blog post (also linked from that Codex article).

you should make the AJAX url global available via wp_localize_script.

Furthermore I'd recommend the separation of your HTML and JS Code.

You can achieve this like this:

function my_enqueue_scripts() {
    wp_enqueue_script( 'jquery' );
    wp_localize_script('jquery', 'myAjax', array(
        'url'        => admin_url('admin-ajax.php')
    ));
    wp_enqueue_script( 'my-ajax', get_template_directory_uri().'/path/to/my_ajax.js', array('jquery') );
}

add_action('enqueue_scripts','my_enqueue_scripts');

your JS file e.g. my_ajax.js

jQuery('#newFeedbackForm').submit(ajaxSubmit); 
function ajaxSubmit(){
    var newFeedbackForm = jQuery(this).serialize();
    jQuery.ajax({
        type:"POST",
        url: myAjax.url,
        data: newFeedbackForm,
        success:function(data){
            jQuery("#feedback").html(data);
        }
    });
    return false;
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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