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.

JavaScript

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

Ryan Scharfer

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

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..

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.

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

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

2 Answers

See above for solution!

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 90,705 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.