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 and APIs Displaying the Photos

Posted by tallwes
tallwes
6,871 Points

My code crashes browser

When I preview workspace and click one of the buttons, Workspaces and the browser lockup. I cannot click on any other buttons, cannot bring up the javaScript console and cannot place a cursor of edit my code in Workspaces. My photos do not display. It stays like this for a minute or so then a dialog box pops ups that says 'Pages Unresponsive' listing 'js/flckr.js - Treehouse Workspaces' and 'AJAX Flickr Photo Feeder' as the unresponsive pages and gives me the options to kill the pages or wait to see if they start responding. What am I doing wrong?

My code:

$(document).ready(function () {
  $('button').click( function() {
    $('button').removeClass("selected");
    $(this).addClass("selected");
    var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
    var animal = $(this).text();
    var flickrOptions = { 
      tags : animal,
      format : "json"
    };
    function displayPhotos(data) {
      var photoHTML = "<ul>";
      $.each(data.items , function(i, photo) {
        photoHTML += '<li class="grid-25 tablet-grid-50">';
        photoHTML += '<a href="' + photo.link + '" class="image">';
        photoHTML += '<img src="' + photo.media.m + '"></a></li>';
      }); // end $.each
      photoHTML += '</ul>';
      $('#photos').html(photoHTML);
    } // end displayPhotos
    $.getJSON(flickerAPI, flickrOptions, displayPhotos);
  }); // end click event
}); // end ready

Moderator Edited: Added Markdown so the Code will be readable in the Community Post. Please, in the future, refer to the Markdown Cheatsheet for the proper way to post code in the Community

2 Answers

Leslie Heinzen
Leslie Heinzen
26,662 Points
Leslie Heinzen
Leslie Heinzen
26,662 Points

Your code is fine. This sounds most likely like a Workspaces issue. Having an instanced in-browser text editor is no simple feat, and it isn't perfect. I would try:

  1. Clearing your browser cache.
  2. Trying a different browser.

It's also possible that there's an issue on the server side of things, in which case there isn't a lot you can do.

But I would recommend downloading the project files for the course, and following along in one of the plethora of great text editors available. At some point, this is where you'll be spending most of your time while coding, anyway. For this course, that's all you'll need to follow along. No local webserver set-up necessary.

Some text editors you can try:

Atom is my personal go-to, but I was very happy with Sublime for a long time.

Hope this helps. Happy coding!

tallwes
tallwes
6,871 Points
tallwes
tallwes
6,871 Points

Tnx guys, I needed to clear the browser cache. It works fine now.