Javascript won't work when passed in jquery AJAX / jquery call in loaded DIV

Question

I know this question has sort of been asked, but it's been asked for other issues not related to how my code is set up, and I believe it's unrelated to how this works. I can't for the life of me figure how to fix this.

I have two PHP pages set up. index.php and getresult.php. index is paginated using AJAX. The AJAX calls to getresult.php for the data. I have a script to load youtube videos(lazy load JS, not your typical embed). My problem is that the page will load via AJAX, but the javascript for my youtube embeds isn't working. They appear as black boxes. The html, video titles, etc all come through, but the JS just won't work on the div now. Here's the div used on getresult.php ( <div class=\"videoplayer\"><div class=\"youtube-player\" data-id=\"" . $embedid . "\"></div> ) where class="youtube-player" is supposed to activate the JS, but the JS isn't triggered by it. Here is the JS for the youtube player if it matters. The Youtube lazy load JS was working without pagination/ajax(if I were to keep everything on the same page), but with pagination and ajax, it won't.

On index.php I have the following:

function getresult(url) {
    $.ajax({
        url: url,
        type: "GET",
        data: {
            rowcount: $("#rowcount").val(),
            "pagination_setting": $("#pagination-setting").val()
        },
        beforeSend: function () {
            $("#overlay").show();
        },
        success: function (data) {
            $("#pagination-result").html(data);
            setInterval(function () {
                $("#overlay").hide();
            }, 500);

        },
        error: function () {}
    });
}

function changePagination(option) {
    if (option != "") {
        getresult("pagination/getresult.php");
    }
}

I'll keep a close eye on this. I've spent literally hours trying to figure it out and I can't figure it out. Thanks!

Edit: Some magical wizard stopped by and helped me. Solution in the comments.

Nothing in your sample code shows us how you attempt to _render_ the new YouTube video embed code you retrieved via AJAX. — random_user_name, Aug 26 '17 at 20:16
I put the Youtube script in the pastebin link above ( https://pastebin.com/raw/wikjePym ). The div I pasted above goes in getresult.php, and on index.php you have the function getresult as I put above. The youtube script renders videos without pagination/ajax when its on the same page, but not when I try and retrieve it from getresult.php. I put the JS on both files and it's not working. I'm extremely lost. Does JS not affect DIVs after they are passed through? — Jonathan, Aug 26 '17 at 20:25

gschambial · Answer 1 · 2017-08-26T20:40:35.890

0

In your JS file, you ara attaching DomContentLoaded event to your code that activates youtube player. So, when your first get result is fired, it shall work fine as DOM is loaded and JS activates. But, in subsequent get calls your dom is not getting loaded, it’s changing.

I believe, you need to call the code which is activating youtube player everytime AJAX call succeeds.

What tou can do is attach your JS code to a custom event and then trigger this even everytime AJAX call succeeds.

In JS:

You can follow this link to see how an event can be created and triggered in JS

How to trigger event in JavaScript?

edited Aug 26 '17 at 20:40

answered Aug 26 '17 at 20:31

gschambial

1,383
2
11
22

Maybe I should've explained better. The AJAX call script that fetches getresult.php(via getresult("pagination/getresult.php"); ) fetches all of getresult. On getresult.php, it loads up all the rows at once in a loop, which is where you find the DIV tag above. I tried to place the JS in that loop and it didn't work. I even put right before the div tag and it didn't work. I'm so frustrated because logically it seems like it should work. – Jonathan Aug 26 '17 at 20:42
What you're suggesting is I do something like this on success "var event = new CustomEvent("name-of-event", { "detail": "Example of an event" }); // Dispatch/Trigger/Fire the event document.dispatchEvent(event);" I've tried that – Jonathan Aug 26 '17 at 20:44

Anthony Ngene · Accepted Answer · 2017-08-26T22:03:55.663

Try re-initializing the function for the youtube embeds as shown below:

function getresult(url) {
    $.ajax({
        url: url,
        type: "GET",
        data: {
            rowcount: $("#rowcount").val(),
            "pagination_setting": $("#pagination-setting").val()
        },
        beforeSend: function () {
            $("#overlay").show();
        },
        success: function (data) {
            $("#pagination-result").html(data);

            var div, n,
                v = document.getElementsByClassName("youtube-player");
            for (n = 0; n < v.length; n++) {
                div = document.createElement("div");
                div.setAttribute("data-id", v[n].dataset.id);
                div.innerHTML = labnolThumb(v[n].dataset.id);
                div.onclick = labnolIframe;
                v[n].appendChild(div);
            }

            setInterval(function () {
                $("#overlay").hide();
            }, 500);

        },
        error: function () {}
    });
}

function changePagination(option) {
    if (option != "") {
        getresult("pagination/getresult.php");
    }
}

function labnolThumb(id) {
  var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
  play = '<div class="play"></div>';
  return thumb.replace("ID", id) + play;
}

function labnolIframe() {
  var iframe = document.createElement("iframe");
  var embed = "https://www.youtube.com/embed/ID?autoplay=1";
  iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
  iframe.setAttribute("frameborder", "0");
  iframe.setAttribute("allowfullscreen", "1");
  this.parentNode.replaceChild(iframe, this);
}

I really appreciate you trying to help, but I'm still lost, even with the page you showed. The only thing I can think of is to add this to where you commented. `// Add an event listener document.addEventListener("????????", function(e) { console.log(e.detail); // Prints "Example of an event" }); // Create the event var event = new CustomEvent("????????????", { "detail": "Example of an event" }); // Dispatch/Trigger/Fire the event document.dispatchEvent(event);` — Jonathan, Aug 26 '17 at 21:04
I'm not JS savvy at all, and this is literally the only bit of JS i'm adding to my site(for now at least till I get a much better handle on JS). I know the concept of JS and some of the basics. I believe I know what you're trying to say, but I'm not sure how to execute it. — Jonathan, Aug 26 '17 at 21:04
I have edited my original answer to be more specific, try it and let me know if it works. — Anthony Ngene, Aug 26 '17 at 22:04
HOLY HELL. That actually worked. I was literally so doubtful that it would work lol sorry but I was. I consider myself pretty decent with python and PHP but javascript is a whole different animal(that I plan on learning more soon). Thank you so much. — Jonathan, Aug 26 '17 at 23:51

Javascript won't work when passed in jquery AJAX / jquery call in loaded DIV

2 Answers2