Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress

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: http://77.104.171.166/~paramo48/marble.co.uk/quotation/diresco/beach-africa/

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.