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 AJAX Basics (retiring) AJAX Concepts A Simple AJAX Example

kevinthecoder
kevinthecoder
10,791 Points
Posted by kevinthecoder
kevinthecoder
10,791 Points

How do I display the AJAX request in Firefox?

I'm surprised this question wasn't answered yet.

I didn't see any questions that covered this for Firefox and a quick google search didn't show anything. For the first exercise, when I watch the console in Firefox (37) in my Mac and preview the webpage in Workspaces, I don't see the AJAX request. I tried the record thing but that didn't work. I'm sure this is an easy one but I haven't found how to get the AJAX request to display. Is there any way to display it WITHOUT installing firebug?

5 Answers

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

Inspect Element > Console > Net > XHR

You need to make sure "XHR" is checked-off under the Net tab in the console. This will show you when each ajax request is made.

kevinthecoder
kevinthecoder
10,791 Points
kevinthecoder
kevinthecoder
10,791 Points

Update: so I waited a few minutes and did the challenge and then went back to the page. The moment I clicked the button that we set up , I saw the request. Strange. So it appears that you can't reproduce it instantly; it seems to work after you wait a few minutes and then try it again.

After the first three GET lines, here is what you get when you click on the button (as expected): GET http://port-80-3hgaf0cd5l.treehouse-app.com/sidebar.html

Muhammad Umar
Muhammad Umar
7,817 Points
Muhammad Umar
Muhammad Umar
7,817 Points

I experienced the same challenge and was able to find online how to show XHR requests in the latest Firefox Quantum console on a Mac. I am pasting the screenshot below

Steps are: In the console window towards the top it says "Filter output". Next to it is a "toggle filter bar" button. Click that button and then click the XHR to make sure its highlighted. Now you should be able to see all the AJAX requests in the Firefox console.

Screenshot of the console with XHR request

Hope it helps!

kevinthecoder
kevinthecoder
10,791 Points
kevinthecoder
kevinthecoder
10,791 Points

There is a dropdown on the right side under the Net portion (the net portion is the first one on the left). The only thing it has is Errors, Warnings and Logs. There isn't an XHR option. I tried the Log option then reloaded. I thought it worked once but haven't been able to reproduce it, despite closing the tab and re-launching, unchecking and re-launching and so on.....hmm....

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

Interesting... I have firebug installed so maybe that's a requirement? Mine still shows when I disable firebug though (even after restarting browser).

joewode
joewode
13,803 Points
joewode
joewode
13,803 Points

Here's the thing with firefox, it doesn't understand 'innerText' so the line:

document.getElementById('ajax').innerText = xhr.responseText;

...won't work. Usually instead of innerText you would use textContent while using firefox. However in this instance doing so will return everything in the document including the HTML tags and without the HTML styling. To get the AJAX request to display properly you should write this line as:

document.getElementById('ajax').innerHTML = xhr.responseText;

innerHTML will parse and display the HTML properly. No need for firebug.