Question

I have this code for make a image search trough Google Image API:

$(document).ready(function(){
        $('#envio').click(function(){
            var iURL = "http://ajax.googleapis.com/ajax/services/search/images";
            $.ajax({
                url: iURL,
                type: 'GET',
                dataType: 'jsonp',
                data: {
                    v:  '1.0',
                    q:  $('#query').val(),
                    format: 'json',
                    jsoncallback:  '?'
                },
                success: function(data) {
                    console.log(data);
                    var html = '';
                    var j = 1;
                    $.each(data.responseData.results, function(i, v) {
                        html += '<img id="' + j + '" src="' + v.tbUrl + '" title="' + v.title + '" alt="' + v.title + '"/>';
                        j++;
                    });
                    $('body').append(html);
                },
                error: function(xhr, textStatus, error){
                    console.log(xhr.statusText, textStatus, error);
                }
            });                
        });
    });

I have a INPUT field and need when I click a IMG the value of SRC attribute goes there. I try with this code but didn’t work:

$('img').click(function(){
    $.each(function(){
        $('#urlimagen').val($this.src);
    });
});

Also by default the first code just return 4 images and I need more than four, then my question around this code is as follow:

1. does any body know how to get more than 4 images?
2. can any help me to fix the image code? I mean when I click a image the SRC value must be in INPUT called #urlimagen.

Answer 1

I would change the code you use to append your image, and make sure you are assigning the click event handle at that time, not before.

$.each(data.responseData.results, function(i, v) {
    var $img = $('<img />'); // create a new image object

    // change image attributes
    $img.attr({
        'id': 'j',
        'src': v.tbUrl,
        'title': v.title,
        'alt': v.title
    });
    j++;

    // append image to DOM, remove your append statement and leave this here
    $('body').append( $img );

    $img.click( function () {
        $('#urlimagen').val( $(this).attr('src') );
    });

});

As for the 4 images returned, looking at your code it seems it depends on the length of the data.responseData.results object, I don’t know if you can modify that returned quantity.