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

caven xu
PLUS
caven xu
Courses Plus Student 13,400 Points
Posted by caven xu
caven xu
Courses Plus Student 13,400 Points

When I get data(array) from ajax response, how could I pass it to a partial which will generate a table?

I just finished "AJAX Basics" course. I try to use ajax "keyup" event to make a dynamic search form in my rails app. But I don't know how to pass the returned data to the partial. I asked this on stackoverflow but don't get answer so far. here's the question details. Can anyone give me some tips?

Update:

I tried use a $.each() loop, here is my code. But the code is ugly and I don't know how to add links(like add_to_cart) in it.

1 Answer

Nikola Jankovic
Nikola Jankovic
10,793 Points
Nikola Jankovic
Nikola Jankovic
10,793 Points

Hello, I just finished same course. The solution in the final video with submit, not keyup, already generate live search. There is no need for changing anything. Here is my js code, inside it there is also a solution for message when we don't get any result.

$(document).ready(function(){
    $('form').submit(function(evt){
        evt.preventDefault();
        var $searchField= $('#search');


        //Whit this we upgrade search button
        var $submitButton= $('#submit');
        $searchField.prop('disabled', true);
        $submitButton.attr('disabled', true).val('Searching...');


        var animal= $searchField.val();
        var flickerAPI= "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
        var flickrOptions= {
            tags: animal,
            format: "json"
        };
        function displayPhotos(data){
            //check to see if there is data returned
            if($.isEmptyObject(data.items)=== false){
                $('#photos').html();        
                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>';
                });
                photoHTML+= "</ul>"
                $('#photos').html(photoHTML);

                //With this code we return search instead searching...
                $searchField.prop('disabled', false);
                $submitButton.attr('disabled', false).val('search');
            }else {
                $('#photos').html('<h1> There is no results for '+animal+ ' .</h1>');
                $searchField.prop('disabled', false);
                $submitButton.attr('disabled', false).val('search');
            }
        }

        $.getJSON(flickerAPI, flickrOptions, displayPhotos);
    }); //end submit
}); //end ready
caven xu
caven xu
Courses Plus Student 13,400 Points
caven xu
caven xu
Courses Plus Student 13,400 Points

Thanks for you to following my question. Since I don't have enough experience to handle complex ajax. I found a alternative solution — datatables — to help me. That's a handy tool for solving this kind of scenarios.