AJAX help

[mrjonnyg]

First, congrats on this great viewer! Secondly, apologies as my query seems very similar to LoneWolf4713's, but I'm still in need of a bit of help.

I'm loading images into the div dynamically from a database using XMLHttpRequest, including initial page load. The idea is the initial page will show a random gallery, then the user can filter from a form to get to the content they want, without page refreshes. Quite simple and the images load dynamically fine. However, as per LoneWolf, the viewer doesn't spawn for any images when this method is used. I've tried adding a viewer.update(); as per your previous instruction, but still no luck. I presume I need to adjust how and when the EventListener is added. Simplified source is attached (.asp file).

index.txt

Thanks again in advance,
J

[fengyuanchen]

You should call the update method immediately once you insert the load images:

function loadImages() {
  var xmlhttp = false;
  xmlhttp = new XMLHttpRequest();

  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("galley").innerHTML = xmlhttp.responseText;
+     viewer.update();
    }
  }
  xmlhttp.open("GET", "images_load.asp", true);
  xmlhttp.send();
- viewer.update();
}

[mrjonnyg]

Fantastic that you are helping me, thank you. I have updated my code:

function loadImages()
{
var scale = encodeURIComponent(document.getElementById("sel_scale").value);
var gallery = new Viewer(document.getElementById('gallery'),{});

var xmlhttp = false;
xmlhttp=new XMLHttpRequest();

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("gallery").innerHTML=xmlhttp.responseText;
gallery.update();
}
}
xmlhttp.open("GET","images_load.asp?scale="+scale,false);
xmlhttp.send();
}

And here's a quick video of what happens now:
https://user-images.githubusercontent.com/86962991/125167291-b3ee9200-e197-11eb-82e6-a2abaf7860a0.mp4

The first gallery on page load works fine as can be seen (viewer0). However more viewers (viewer1, viewer2) are then created due to the 'new Viewer' and I can't work out the best way of doing this, either by destroying the previous viewer, or referring to viewer0 from a different function (so the function for page load is different to the select update event). I think (hope) this is an easy thing to fix, so I hope you can help again.

Cheers!

[mrjonnyg]

Sorry to be such a pain, but if you can help I'd much appreciate it.

Is there a way to destroy all previous viewer instances? If I use:

    var gallery = new Viewer(document.getElementById('images'), {
      hidden: function () {
        gallery.destroy();
      },
    });

It works fine, but each gallery can then only be opened once as there's no 'updated' event.

Thanks again.

[fengyuanchen]

You can listen to the change event of the <select> element, once the value changed, you should destroy the old viewer, and initialize a new one for the newer gallery.

[mrjonnyg]

Thanks, I got this to work with a single viewer in the end. Redacted code is attached for anyone wishing to do the same thing. I do have a couple of styling questions but will make a new thread for those.

working.txt