How to properly write the plugin code in success?

Question

The site has a page with endless scrolling that downloads the content. There is also a gallery on the page, implemented with the lightgallery plugin. When loading a page the plugin works, but after loading new content, the plugin stops working only in the content that is loaded.

How do I place lightGallery plugin code correctly so that it loads js every time? And did I add this code correctly?

Script plugin

$(document).ready(function() {
  function createLightGallery() {
    $('.gallery-img').lightGallery({
      thumbnail: true,
      width: '1104px',
      height: '80vh',
      selector: '.item-image-gallery'
    });
  }
  createLightGallery();
})

js code success

success: function(obj) {
  send = true;
  $article_list.append(obj);
  const players = Array.from(document.querySelectorAll('#videoPlay')).map(p => new Plyr(p));
  const plyrs = Array.from(document.querySelectorAll('#plyrVideo')).map(plyrs => new Plyr(plyrs));

  page.getAsideHtml(_url_aside);
  page.scrollPage();

  //js plugin
  createLightGallery();
},

This is the kind of mistake

script.js:7119 Uncaught ReferenceError: createLightGallery is not defined
    at Object.success (script.js:7119)
    at c (script.js:2)
    at Object.fireWith [as resolveWith] (script.js:2)
    at l (script.js:2)
    at XMLHttpRequest.<anonymous> (script.js:2)

Do you have any error message in the browser's console when plugin stops working? What exactly `stops working` means? It breaks totally, or just not catch the newly loaded content? can you please update your question with this information? — lukaszkups, Aug 20 '20 at 20:43

score 0 · Answer 1 · answered Aug 20 '20 at 21:02

Based on an error I see that you're trying to run a function, that is defined in different scope. Is the loading method also included inside $(document).ready(function() { block?

You should place everything inside it, because in other case, code won't be able to guess where you defined createLightGallery method.

More info about JavaScript scope

Example, pseudo code solution:

$(document).ready(function() {
  function createLightGallery() {
    $('.gallery-img').lightGallery({
      thumbnail: true,
      width: '1104px',
      height: '80vh',
      selector: '.item-image-gallery'
    });
  }
  createLightGallery();

  function yourFetchMethod {
    // some code here
    success: function(obj) {
      send = true;
      $article_list.append(obj);
      const players = Array.from(document.querySelectorAll('#videoPlay')).map(p => new Plyr(p));
      const plyrs = Array.from(document.querySelectorAll('#plyrVideo')).map(plyrs => new Plyr(plyrs));

      page.getAsideHtml(_url_aside);
      page.scrollPage();

      //js plugin
      createLightGallery();
  }

  yourFetchMethod(); // or any way you trigger it
})

`$(document).ready(function() {` block is in a separate file and is in the file with `success`. Thank you for the solution, but how do I put your code into mine correctly? I added all the code to load the page where the `success` method is located. — mo link, Aug 20 '20 at 21:40
Putting it both in `$(document).ready(function() {` but in separate files won't help - `function createLightGallery() {` method declaration must be in the same code block and file that your `success` method is located. One of the solutions would be making `createLightGallery` global, e.g. by assigning it to `window.createLightGallery` variable (and then use it in different file as `window.createLightGallery()`) but we shouldn't create global/window variables as it's [known antipattern](https://stackoverflow.com/a/18635444/1004946) — lukaszkups, Aug 20 '20 at 22:06

score 0 · Accepted Answer · answered Aug 20 '20 at 22:16

Tried to do this and it all worked out.

success: function(obj) {
  send = true;
  $article_list.append(obj);
  const players = Array.from(document.querySelectorAll('#videoPlay')).map(p => new Plyr(p));
  const plyrs = Array.from(document.querySelectorAll('#plyrVideo')).map(plyrs => new Plyr(plyrs));

  //Gallery JS
  $('#gallery-img').data('lightGallery').destroy(true);
  $('#gallery-img').lightGallery({
    thumbnail: true,
    width: '1104px',
    height: '80vh',
    selector: '.item-image-gallery'
  });

  page.getAsideHtml(_url_aside);
  page.scrollPage();
},

How to properly write the plugin code in success?

2 Answers2