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

JavaScript

Posted by Ryan Scharfer
Ryan Scharfer
Courses Plus Student 12,537 Points

How do I attach an AJAX request to an event?

I know I am missing something very basic here. I have no problem creating an ajax request and successfully get the response back when I refresh the page, but I can't seem to attach the request to a button...

Here is the relevant portion of my index.html..

<button id="button" onclick="myFunction();">Show active players</button>

and here is my JS

function myFunction(){

var xhr= new XMLHttpRequest();
xhr.open("GET","names.html");
xhr.send();
xhr.onreadystatechange=function(){
    if(xhr.readyState==4 && xhr.status==200)
    alert(JSON.parse(xhr.responseText));

};

}

I wrapped the JS into the "myfunction" function to prevent it from executing when the page loads, which it does, but it won't work I attach it to the button click. I have a feeling the ajax object is done being created before the methods open and send are called, but I am not sure...

Dave McFarland
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Ryan Scharfer

Have you looked in the JavaScript console? Are there any errors or messages there?

Ryan Scharfer
Ryan Scharfer
Courses Plus Student 12,537 Points

Hi guys. It might be useful to just give you the domain where this "site" is hosted and where I play around. --> http://ryanscharfer.com/ There is a names.html file containing json located in the same folder as my index.html. You will see the button doesnt work..

Ryan Scharfer
Ryan Scharfer
Courses Plus Student 12,537 Points

I don't see any errors in the JS console. But in the "network" tab of Chrome developer tools, the request for the names.html is shown in red, and if you look at the response tab, you see "failed to load response data."

Something else that I think is weird is that 5 requests are made each time you hit the button for some reason, not just the 1 ajax request. So in my far-from-expert opinion, it looks like clicking the button refreshes the entire page.

Ryan Scharfer
Ryan Scharfer
Courses Plus Student 12,537 Points

SOLVED! Because my button was refreshing my page, I am assuming (perhaps wrongly) that it had the default behavior of submit. This could be due to the fact that I didn't properly close the form element above it, and my browser assumed the button was part of the form, and gave it its default "submit" behavior.

There were two ways you can fix this.

Both worked.

Dave McFarland
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Good problem solving Ryan. I just checked it out on your site and it works!

2 Answers

Ryan Scharfer
Ryan Scharfer
Courses Plus Student 12,537 Points

See above for solution!

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

It may not be as simple as this but try putting your send command after your closing curly brace of your function.

I think your asking it to send an AJAX request with no instructions it can find.