Creating a var outside of each loop help

JavaScript
1

I have been working on a script with an api. I am trying to return the image in a bootstrap modal when the “a” element is clicked. Its breaking my each loop and only returning 1 image on the page when 20 is the default. And its not displaying in the modal when clicked. However I can see the img url in my console so its kind of right I think. At first I had the click function inside the loop and when you would click one image it would return all of the images on the page in the modal. So I started looking into creating a variable that I could access outside of the each loop. I am very novice with jQuery. Here is the chunk of code of the function containing the loop and click function. What am I missing?

Thanks, Clayton -

function success (instagramData) {
             // This is run if the ajax call is successful
             // The "instagramData" being passed to this function is the returned data from the url

                if (instagramData.meta.code !== 200) {
                // If we don't get a 200 that means instagram threw an error.
                // Instead of adding the html for images to .results div, we will put the error in there so
                // we know what happend
                    $('.results').html('<h1>An Error Occured</h1><p>' + instagramData.meta.error_message + '</p>');
                    return;
                }

                var gramimgData = 'gramimgData';

                $.each(instagramData.data, function(index, gram) {
               // instagramData.data is the "data" inside the returned json. There is "meta" and "data".
               // index is just an incremental number for each gram. we don't need it yet.
               // gram is the information for EACH gram. this $.each loops over all of them.


                    if (gram.type === 'image') {
                    // for this example we only care about images
                        $('.results').append('<div class="col-md-3">' +
                                      '<p><img class="img-circle" style="margin-right: 5px" width="60" src="' + gram.user.profile_picture + '">' + gram.user.username + '</p>' +
                                      '<a href="#myModal" data-toggle="modal" data-img-url="' + gram.images.standard_resolution.url + '"><img class="img-thumbnail" src="' + gram.images.low_resolution.url + '"/></a>' +
                                      '</div>');

                    }
                    if (gram.type === 'video') {
                    // for this example we only care about videos
                        $('.results').append('<div class="col-md-3">' +
                                      '<p><img class="img-circle" style="margin-right: 5px" width="60" src="' + gram.user.profile_picture + '">' + gram.user.username + '</p>' +
                                      '<a href="#myModal" data-toggle="modal" data-img-url="' + gram.videos.standard_resolution.url +'"><video class="img-thumbnail" src="' + gram.videos.low_resolution.url + '"/></a>' +
                                      '</div>');
                    }

                    gramimgData = $(gram.images.standard_resolution.url);

                });

                //click function for returning images in modal.

                $('a').click(function(){
                    $('.modal-body').append('<img src="' + gramimgData + '">');
                    console.log('click');
                });
            }
2

you don’t need any variable, just use event delegation:
outside of your success handler put

$('.results').on('click', 'a', function () {
	var $img = $('<img/>', {
		src: $(this).data('imgUrl')
	});
	$('.modal-body').html($img);
	console.log('click');
});

and remove the $('a').click... handler you are using

this way you are listening to any click that will happen in the results pane, even on elements inserted after the binding has taken place.
Then, inside the handler you can use the $(this) reference that points to the clicked anchor and retrieve its data-img-url attribute value.
Also note the jQuery( html, attributes ) syntax that lets you create html fragments in a much cleaner way than the awkward string concatenation.

3

Wow thanks so much! I had come to realize now that when using data attributes that you target that with jquery. And the .html attribute as well in this case. I was trying to append the info to it! I am still so new to jQuery and javascript. getting use to the language is one thing, and then the jQuery library is another.

Thanks for the help with this. I was close, but had a few things mixed up, and a bit dirty.