this.push () работает с данными PHP, но не с данными JavaScript - PullRequest
Новая
       10

this.push () работает с данными PHP, но не с данными JavaScript

3 голосов
/ 21 января 2012

Я использую Galleria, которая позволяет добавлять изображения на лету с помощью this.push ({image: 'image.jpg'})

Странно то, что когда я готовлю свой код на PHP, он работает нормально: 

<?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>

Это работает. Однако я хочу загрузить новые изображения, используя AJAX: 

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

Данные обратного вызова форматируются точно так же, как и в предыдущем примере PHP. Я попробовал $ .get, повторив тот же фрагмент PHP, что и выше, и добавил эти данные в this.push ().

Когда я пробую это, я всегда получаю эту ошибку: Uncaught TypeError: Невозможно использовать оператор «in» для поиска «большого пальца» 

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' 
}

Это также работает при передаче данных обратного вызова обратно в объект. Для этого, однако, я не знаю, как я могу сделать это для нескольких изображений: 

// 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);
     }
}

Как вы можете видеть, изображения теперь помещаются в каждый цикл, что приводит к снижению производительности. Как я могу нажать фотографии с помощью AJAX? Данные должны быть отформатированы так: 

{ 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

Если я просто скопирую / вставлю данные обратного вызова, это тоже работает, но при загрузке через javascript я снова получу эту ошибку.

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

Актуальный сайт: http://www.vanderkamfashion.nl/

Пожалуйста, проверьте галерею, прокручивая вниз. Он должен загрузить новые изображения, когда будет нажата 25-я фотография или нажата последняя миниатюра (31-е). У меня запущено несколько console.logs для отслеживания проблемы.

Спасибо.

1 Ответ

0 голосов
/ 24 января 2012

Это должно привести вас в правильном направлении. Для @Pointy вам нужно получить ссылку на экземпляр галереи, если вы намереваетесь вызвать метод наподобие push. Это только один из многих способов сделать это. По сути, вы сохраняете экземпляр galleria в переменной, которая позже передается вашему обработчику событий. Поскольку вы не показали обработчик событий, в котором вы хотите запустить вызов ajax / обновить DOM с новыми изображениями, я просто поместил имитатор для демонстрации. 

<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>
...