Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Overview: I am trying to create a simple jquery autocomplete in a wordpress theme, on a custom template page containing a form. I wish for it to work both front-end, for logged in users, and the general public. It is part of a theme (not a plugin). I have followed along with a post here, but I am unsuccessful.

The problem: Even though I am expecting autocomplete to occur as I type in the name field (the one with id="autocompleteID"), I don't see anything happening. Also, there is an error in my GET request, it says '403 forbidden'. (see image below)

I get an error on the GET request

INFO:


Relevant Directory Structure of the theme root:

 .
 |--autocompleteAjax.js
 |--template-customers.php
 |--functions.php

autocompleteAjax.js:

jQuery(document).ready(function($){
$("#autocompleteID").autocomplete({
    source: function(request, response){
        jQuery.getJson(autocompleteAjaxObject.ajaxurl + "?callback=?&action=autocompleteAjaxAction",request,function(data){
            response(jQuery.map(data, function(item){
                jQuery.each(item, function(i,val){
                    val.label = val.whatever;
                });
                return item;
            }))
        })
    }
   })
  })

template-cusotomers.php (A custom template page):

get_header(); ?>

            <div id="primary">
                    <div id="content" role="main">

                            <?php while ( have_posts() ) : the_post(); ?>

                                    <?php get_template_part( 'content', 'page' ); ?>

                                    <?php

                                    if (is_user_logged_in()):?>

                                            <form type="post" action="" id="newCustomerForm">

                                                    <label for="name">Name:</label>
                                                    <input id="autocompleteID" name="name" type="text" />

                                                    <label for="email">Email:</label>
                                                    <input name="email" type="text" />

                                                    <label for="phone">Phone:</label>
                                                    <input name="phone" type="text" />

                                                    <label for="address">Address:</label>
                                                    <input name="address" type="text" />

                                                    <input type="hidden" name="action" value="addCustomer"/>
                                                    <input type="submit">
                                            </form>
                                            <br/><br/>
                                            <div id="feedback"></div>
                                            <br/><br/>


                                    <?php 
                                            global $wpdb;
                                            $customers = $wpdb->get_results("SELECT * FROM friends;");

                                            echo "<table>";
                                            foreach($customers as $customer){
                                                    echo "<tr>";
                                                    echo "<td>".$customer->name."</td>";
                                                    echo "</tr>";
                                            }
                                            echo "</table>";
                                    else:
                                            echo "Sorry, only registered users can view this information";
                                    endif;                                         

                                    ?>

                                    <!--<script type="text/javascript">
                                            jQuery('#newCustomerForm').submit(ajaxSubmit);

                                            function ajaxSubmit(){

                                                    var newCustomerForm = jQuery(this).serialize();

                                                    jQuery.ajax({
                                                            type:"POST",
                                                            //url: "http://hostcals.localhost/soilscienceextension/wp-admin/admin-ajax.php",
                                                            //url: "/wp-admin/admin-ajax.php",
                                                            url: ajaxurl,
                                                            data: newCustomerForm,
                                                            success:function(data){
                                                    jQuery("#feedback").html(data);
                                                            },
                                                error: function(errorThrown){
                                                    alert(errorThrown);
                                                }  
                                                    });

                                                    return false;
                                            }
                                    </script> -->



                            <?php endwhile; // end of the loop. ?>

                    </div><!-- #content -->
            </div><!-- #primary -->

a snippet from Functions.php:

wp_register_script('autocompleteAjaxHandle',get_stylesheet_directory() .   "/autocompleteAjax.js");
wp_enqueue_script('autocompleteAjaxHandle');
wp_localize_script('autocompleteAjaxHandle', 'autocompleteAjaxObject', array(
    'ajaxurl'=>admin_url('admin-ajax.php'),
    'autocompleteAjax_nonce'=>wp_create_nonce('autocompleteAjax_nonce_val'),
    'action'=>'autocompleteAjaxAction'
    ));

function get_autocomplete_suggestions(){
    $_GET['term'];
    $suggestions_array=array( 'captain crunch', 'chex', 'cheerios');

    $response = $_GET["callback"]. "(" . json_encode($suggestions_array) . ")";
    echo $response;
    exit;
}

add_action('wp_ajax_autocompleteAjaxAction', 'get_autocomplete_suggestions');
add_action('wp_ajax_nopriv_autocompleteAjaxAction', 'get_autocomplete_suggestions'); 

**

Overview of the Question:

I aspire to create a simple jquery autocomplete functionality, but I am having a difficult time understanding why the form does not behave as I would expect, and it seems to be producing a GET error. What is causing the problems, and what can I do to be more successful?

share|improve this question

Your Answer

 
discard

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

Browse other questions tagged or ask your own question.