this.push() works with PHP data but not with javascript data

Question

I'm using Galleria which lets you add images on the fly using this.push({ image:'image.jpg' })

The strange thing is that when I prepare my code with PHP it works fine:

<?php
while {
   $add_images .= '{ 
                      thumb:'".$thumb."', 
                      image:'".$image."'  
                   }';
}
?>

<script type="text/javascript">
    $(document).ready(function(){
        $('#galleria').galleria({
            extend: function(options) {
               this.push(<?=$add_images;?>);
            }
        })
    });
</script>

This works. However, I want to load the new images using AJAX:

$.getJSON('/ajax/gallery.ajax.php', { command:'load_images' }, function(data){
     this.push(data);
}

The callback data is formatted the exact same way as in the previous PHP example. I tried $.get by echo'ing the same PHP snippet as above and add this data to this.push().

When I try this I always get this error: Uncaught TypeError: Cannot use 'in' operator to search for 'thumb'

Uncaught TypeError: Cannot use 'in' operator to search for 'thumb' in {
  thumb:'/images/gallerij/1/vanderkam-fvhd5wq1jy-t.jpg', 
  image:'/images/gallerij/1/vanderkam-fvhd5wq1jy.jpg', 
  big:'/images/gallerij/1/vanderkam-fvhd5wq1jy.jpg', 
  title:' image []', description:'null'
},{ 
  thumb:'/images/gallerij/1/vanderkam-oguuob7pyd-t.jpg', 
  image:'/images/gallerij/1/vanderkam-oguuob7pyd.jpg', 
  big:'/images/gallerij/1/vanderkam-oguuob7pyd.jpg', 
  title:' image []', description:'null' 
}

It also works when passing the callback data back into an object. For this however I don't know how I can make this work for multiple images:

// code shortened to make it better readable
$.getJSON('/ajax/gallery.ajax.php', { command:'load_images' }, function(data){
      var images;
      $.each(data, function(entryIndex, entry){
         images = { thumb:entry.thumb, image:entry.image, big:entry.big, title:entry.title, description:entry.description };
         $galleria.push(images);
     }
}

As you can see the images are now being pushed in the each loop, causing bad performance. How can I push the pictures using AJAX? The data must be formatted like this:

{ image:'image1.jpg' }, { image:'image2.jpg'}, { image:'image3.jpg'}

//Sending data directly to this.push() using json_encode() using PHP 
//will add brackets to the output like this:
[{ image:'image1.jpg' }, { image:'image2.jpg'}, { image:'image3.jpg'}]
//This however will not work

If I plainly copy/paste the callback data it also works, but loading via javascript I'll get that error again.

http://galleria.io/docs/1.2/api/methods/#push-element1-elementn

Actual site: http://www.vanderkamfashion.nl/

Please check the gallery by scrolling down. It - should - load the new images when the 25th photo is hit or the last thumbnail is clicked (31st). I have some console.logs running to track down the problem.

Thanks.

What is it that you expect `this` to be bound to in your `.getJSON()` callback? It's certainly not going to be the gallery object. — Pointy, Jan 20 '12 at 23:26
I know, i stripped some code to make it better readable. The getJSON is part of the $('#galleria').galleria({ extend: function(options) {} }); — domaind1, Jan 20 '12 at 23:32
well, no matter where the code is, `this` will be set by the browser and it won't be what `this` is in the outer context. — Pointy, Jan 21 '12 at 13:28

score 0 · Answer 1 · answered Jan 23 '12 at 22:02

This should get you headed in the right direction. Per @Pointy you need to get a reference to the gallery instance if you intend to call a method like push on it. This is just one of many ways of doing so. Basically you store the galleria instance in a variable that is later passed to your event handler. Since you didn't show an event handler where you want to fire the ajax call / updating DOM w/ new images I just put a mock one in for demonstration.

<script type="text/javascript">
    function loadImageViaAjax(oEvent) {
        $.getJSON(
            '/ajax/gallery.ajax.php',
            { command:'load_images' },
            function(data) {
                oEvent.data.oGalleria.push(data);
            });
    }

    $(document).ready(function(){
        var oGalleria = null;

        $('#galleria').galleria({
            extend: function(options) {
               oGalleria = this;
               this.push(<?=$add_images;?>);
            }
        });

        $('some selector').click({oGalleria : oGalleria}, loadImageViaAjax);
    });
</script>

this.push() works with PHP data but not with javascript data

1 Answers1