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
Julian Ptak
30,920 PointsI have MAMP running with this code in a text editor but the form doesn't submit and the AJAX call doesn't appear to work
I'm running MAMP and looking at this code in Sublime Text. Yet when I hit the submit button nothing happens. I want to say it's a problem with MAMP or something because I clearly see the code work. But I've never had this issue before.
So this question is more about setting up I guess... What did y'all do to get this code working on your own machines? All I did was open it in Sublime, open it in a browser, fill out the form and hit submit.
Ok so I've been hacking away at this code for a while and I've noticed something peculiar. I've gone line by line doing checks and I've noticed my debugger message doesn't appear if I place the alert in the POST section like so:
$.post(url, formData, function(response) {
alert('this is a test');
$('#signup').html("<p>Thanks for signing up!</p>");
}); // end post
Is this not supported in all browsers or something like that? Anybody have any ideas why this wouldn't be working?
4 Answers
Julian Ptak
30,920 PointsSilly me...
...JavaScript Console showed me that it was 404ing because I had named my directory slightly differently. All green lights here.
Milagro Scardigno
4,494 PointsI got it!.... The moderator of this course replied very quickly and was something to do with the form. the post action was set to \Submit so the form was being submitted to something that did not exist.
<form method="post" action="index.html">
<label for="userName">Please type your name</label>
<input type="text" name="userName" id="userName"><br>
<label for="email">Your email address</label>
<input type="email" name="email" id="email"><br>
<label for="submit"></label>
<input type="submit" value="Signup!" id="submit">
</form>
Julian Ptak
30,920 PointsAh! So I sort of had it... It was going somewhere that didn't exist. Glad it worked out for you!
Milagro Scardigno
4,494 Points\0/ Those things that leave you like ...... :-@ Very happy to have learned to look at that, and this has also helped me to remember to add alerts into the code I am testing, thanks to Julian Ptak! Very cool tutorials!
Milagro Scardigno
4,494 PointsJulian, can you be more specific? I am having a 404 on the $.POST() method when I click the submit button. Maybe I am silly too :(
Julian Ptak
30,920 PointsTry debugging line by line with an alert and see where in the code it fails. This will also give me more info to help you with.
Julian Ptak
30,920 PointsTo answer your question though...
The code used a specific directory or "folder" when it was being used in the video. You'll need to check the code and indeed the folder/directory names and make sure that the code is looking for the new HTML file in the right directory otherwise, it'll never find it
I just realized that didn't help much...
OK. So your computer probably named it's folders differently then the teacher did in the video. You might need to double check the names to know if if the code you now have on your computer is looking in the correct folders you set up for it.
Milagro Scardigno
4,494 PointsI pointed MAMP to the folder the code is at and I still get: Failed to load resource: the server responded with a status of 404 (Not Found)
Julian Ptak
30,920 PointsRight but in the actual Ajax code, the code needs to look in the server. Do you want to give me a call?
You see... Mamp isn't the problem. The code is looking in a directory that doesn't exist. Can you post all your code quickly?
Milagro Scardigno
4,494 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX with jQuery</title>
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
// var url = "http://website.com/posts";
// var data = {
// firstName : "Dave",
// lastName : "McFarland"
// };
// $.post(url,data,callback);
$(document).ready(function() {
// body...
alert('I am ready');
//now we need to add an event handler that is when the visitor clicks the signup button will send out our AJAX request
$('form').submit(function(evt) {
/* Act on the event */
evt.preventDefault();//prevents the code from submitting, when the submit button is clicked
alert('submit event happened');
//HTML form have an action property, so we can set our url simply to the action property of the form
var url = $(this).attr("action"); //here we are using jquery to select the form and pull out its action attribute $(this) the url to server side program .attr("action") that is gonna process this form
//next
//lets capture the form data
//using plain Javascript you will have to generate a list of every form field, then go through that list, retrieve the name and the value for each form field and then encode all that
//fortunately jquery provides a simpler form: just select the form and run its serialize() method on it
var formData = $(this).serialize(); // now we have our url and data, now we need to run the post method
$.post(url, formData, function (response) {
// body...
//let the user know the form was submitted
//since we dont need the form or form fields on the page any longer, lets replace them
//this code select a div on the page and replace it with a message
alert("I am getting to the response text to thank for signing up");
$('#signup').html("<p>Thanks for signing up!</p>");
});//end of post
});
}); //end ready
/////OLD CODE//////
// $(document).ready(function() {
// $('form').submit(function(evt) {
// evt.preventDefault();
// var url = $(this).attr("action");
// var formData = $(this).serialize();
// //supports the ability to send more data meant to be stored in a database
// $.post(url, formData, function(response) {
// $('#signup').html("<p>Thanks for signing up!</p>");
// }); // end post
// }); // end submit
// }); // end ready
//////END OF OLD CODE///////
</script>
</head>
<body>
<div class="grid-container centered">
<div class="grid-100">
<div class="contained">
<div class="grid-100">
<div class="heading">
<h1>Sign Up for Our Newsletter</h1>
<div id="signup">
<form method="post" action="/signup">
<label for="userName">Please type your name</label>
<input type="text" name="userName" id="userName"><br>
<label for="email">Your email address</label>
<input type="email" name="email" id="email"><br>
<label for="submit"></label>
<input type="submit" value="Signup!" id="submit">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
PLEASE IGNORE THE COMMENTS SINCE THEY ARE FOR REFERENCE TO THE MATERIAL COVERED AND BTW THANK YOU!
Milagro Scardigno
4,494 PointsThis alert never shows since it does not get to fire that function inside the $.post()
alert("I am getting to the response text to thank for signing up");
Milagro Scardigno
4,494 Pointsit seems like the problem is in this block:
var formData = $(this).serialize(); // now we have our url and data, now we need to run the post method
$.post(url, formData, function (response) {
// body...
//let the user know the form was submitted
//since we dont need the form or form fields on the page any longer, lets replace them
//this code select a div on the page and replace it with a message
alert("I am getting to the response text to thank for signing up");
$('#signup').html("<p>Thanks for signing up!</p>");
});//end of post
Julian Ptak
30,920 PointsIf you need this right away, I'd say look carefully at your URL variable. Otherwise, I'll give this a closer look when I get done with work this evening.
It looks to me like it's commented out. Remember that the URL variable is where the Ajax code is looking to find the data you're seeking. If that URL doesn't exist in your environment (ie mamp or a folder in mamp) then the code won't find that URL and will display the 404 instead.