SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    creating a var outside of each loop help

    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 -

    Code:
    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. #2
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you don't need any variable, just use event delegation:
    outside of your success handler put
    Code:
    $('.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. #3
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •