JSON w/ simple image, duplicate data on reload

[jimklonowski]

I'm trying to use the JSON loader with a SimpleImageController in an asp.net site, but when I reload the page, I'm ending up with multiple instances of the pivotviewer on the same #pivotviewer div.

Example image: http://i.imgur.com/VzItlbx.png

I'm starting the viewer like so:

            $(document).ready(function () {
                $('#pivotviewer').PivotViewer(
                    {
                        Loader: new PivotViewer.Models.Loaders.JSONLoader("vehicles.json"),
                        ImageController: new PivotViewer.Views.SimpleImageController()
                    }
                );
            });

Is there a proper way to destroy any existing instances of the html5pivotviewer and its data on a DOM element or page before attaching a new?

[JacquiHand]

I have made a small change to src/pivotviewer.js that should sort out this problem. Can you give it try.

[jimklonowski]

Unfortunately that did not resolve the issue, still seeing duplicate values. When the debug flag is enabled, here is the output for simpleimages.html:

pivotviewer.min.js:116 CXML loaded
pivotviewer.min.js:116 sort ISO country code
pivotviewer.min.js:116 Grid View Filtered: 14
pivotviewer.min.js:116 this.currentWidth: 1885 this.width: 1885
pivotviewer.min.js:116 sort ISO country code
pivotviewer.min.js:116 Grid View Filtered: 14
pivotviewer.min.js:116 this.currentWidth: 1885 this.width: 1885
pivotviewer.min.js:116 sort ISO country code
pivotviewer.min.js:116 Grid View Filtered: 14
pivotviewer.min.js:116 this.currentWidth: 1885 this.width: 1885
pivotviewer.min.js:116 sort ISO country code
pivotviewer.min.js:116 Grid View Filtered: 14
pivotviewer.min.js:116 this.currentWidth: 1885 this.width: 1885

Something is causing InitPivotViewer to be run multiple times after loading the json/cxml. Could it be something having to do with the pub/sub library? Subscription to "PivotViewer/Models/Collection/Loaded" triggers a call to InitTileCollection() maybe? I'm only able to replicate this issue using SimpleImageController

[jimklonowski]

After more exploration, it appears that the duplicate data only appears if I have the F12 developers console open in Chrome and I reload a page with an html5pivotviewer attached to it.

[jimklonowski]

I spoke too soon, it's happening in IE11 without any F12 open.

[carson-nr]

I am experiencing this same issue. Is there a known solution?

[jimklonowski]

My team abandoned the project that was going to utilize the pivotviewer, so I'm afraid I have no updates for you.

[JacquiHand]

Hi Carson2006,

can you let me know a few more details - are you also using the JSON loader and which browsers are you seeing the issue in?

[mhykes]

This issue appears to occur when
$.publish("/PivotViewer/ImageController/Collection/Loaded", null);
Is called multiple times.

This can happen in the Setup function of PivotViewer.Views.SimpleImageController if the last image to load is not the last image in the _images array. To resolve this I changed the for loop to a while loop.

New code excerpt:

        $.getJSON(baseUrl + "/imagelist.json")
        .done (function (images) {
            // for each item in the collection get the image filename
            for (var i = 0; i < images.ImageFiles.length; i++) {
                var img = new Image(); 

                img.onload = function() {
                    // when the image has loaded, find it in the items list
                    var i = 0;
                    while (i < that._items.length && that._loadedCount < that._items.length) {
                        if (that._items[i].Images[0] == this) {
                            // we found it, so update it
                            that._items[i].Width = this.width;
                            that._items[i].Height = this.height;
                            // and increment the count of loaded images
                            that._loadedCount ++;
                        }
                        if (that._loadedCount == that._items.length) {
                            // we have loaded all the images: fire an event to inform the pivotviewer
                            $.publish("/PivotViewer/ImageController/Collection/Loaded", null);
                        }
                        i++; // try the next item 
                    }
                };

                img.src = that._baseUrl + "/" + images.ImageFiles[i];
                that._items.push(new PivotViewer.Views.SimpleImageItem(images.ImageFiles[i], that._baseUrl, img.width, img.height, img));
           }
        })

Let me know if you would like a pull request. This seems to be a very nice pivot viewer clone, generally.

[slybootz]

@mhykes That looks to have solved my issue, thanks!