Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Ajax Jquery Form not displaying notifications

I tried out the AJAX contact form tutorial (https://blog.teamtreehouse.com/create-ajax-contact-form), the form is working fine so far but I've been unable to get the AJAX notifications working on the same page as the form.

It currently redirects to the php file page instead, although it does seem to be displaying the correct message.

An example of the form can be seen here:

I've hooked it into the 'Get your free quote' section. I'm only calling the name, email and message like the tutorial showed currently. I plan to pull the other fields in once I get this section working.

It's not showing me any error messages at the moment either which I found odd.

I've included a jsfiddle with the php I use (I saved it as quote-mail.php) and the JS. https://jsfiddle.net/DigitalAdam/tms5ova4/3/

Any pointing in the right direction regarding this is greatly appreciated.

I think it may be something to do with how I'm enqueuing scripts. I've been reading up on it and understand that I need to create a callback function for Wordpress' Ajax-admin.php in my functions.

I've only enqueued it with my other scripts currently as: wp_enqueue_script('app', get_stylesheet_directory_uri() . '/app.js', array('jquery'), '2.1.0', false);//app.js

Trying to work out the right way to add the callback function with it now. Any support appreciated. Regards

2 Answers

Hey there, I think all it is is that you've set this up as a self-executing function, but you forgot to add the extra parentheses that actually call it. You have:

(function ($) {
  // all your JS

But if you're going to do it that way, it needs to be:

(function ($) {
  // all your JS

If you don't understand why this is, read more about self-executing anonymous functions in this article or elsewhere on the web.

Hope that's all it was! Cheers.

Thanks for the reply Eric.

Good spot. Unfortunately this didn't appear to be the issue though, or at least, not the only issue.

It would be easier to pinpoint if I could get an error to show. Certainly a strange one to me.