0

I have a bootstrap modal, and load content into it with ajax. The basic outline is detailed below:

Modal

<div class="modal fade" id="MusicModal" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Spotty McSpotface Player</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
            
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Ajax to populate Modal content and deliver content on scrolling to the bottom of the page

$(document).ready(function(){

    // JS to deliver content via 'infinite scroll'

    var fetching = false;

    function lastPostFunc()
    {
        fetching = true;
        $('div#lastPostsLoader').html('');
        $.get("_ajax.php?api=getPlaylistTracks&id=<?php echo $id; ?>&action=getLastPosts&lastID="+$(".wrdLatest:last").attr("id"),
        function(data){
            if (data != "") {
            $(".wrdLatest:last").after(data);
            setTimeout(function(){
                fetching = false;
            },300);
            $('div#lastPostsLoader').empty();
        }
    });
    };

    $(window).scroll(function(){
        var bufferzone = $(window).scrollTop() * 0.20;
        if($(window).scrollTop() + $(window).height() > $(document).height() - 100 && !fetching) {
            lastPostFunc();
        }
    });

    // JS for the ajax call to populate the modal window

     $('.music_info').click(function(){
       var id = $(this).data('id');
       $.ajax({
        url: '_ajax_player.php',
        type: 'post',
        data: {id: id},
        success: function(response){ 
          $('.modal-body').html(response);
          $('#MusicModal').modal('show'); 
        }
      });
     });

});

_ajax_player.php

if(isset($_POST['id'])) {
    $id = $_POST['id'];
    $html = "<iframe src='https://open.spotify.com/embed?uri=$id' width='100%' height='300' frameborder='0' allowtransparency='true'></iframe>";
} else {
    $html = null;
}

echo $html;

This is an example of the HTML I'm using to allow a user to click a button to populate the modal with an iframe that allows them to play a spotify track:

<a data-id='spotify:track:1SKPmfSYaPsETbRHaiA18G' class='music_info btn btn-info' style='margin:0px; padding:0px 7px 0px 7px;'>Play Track</a>

This all works fine - as long as the HTML that contains the play button is on the page when the page loads.

I have some more ajax which loads in additional tracks as the user scrolls down the page.

Those additional tracks are loaded into this div:

<div id='lastPostsLoader'></div>

The issue I have is that the buttons that appear in that DIV which are populated by ajax don't fire the ajax call to load the modal content.

The format of the HTML delivered by the ajax is identical to the format of the HTML that appears on the first few tracks which are displayed on page load, but for some reason, when the content is loaded into the DIV, the ajax to populate the modal body does not fire.

There are no errors in the console, it's just that when I click the button, nothing happens.

Maybe what I'm trying to do isn't possible, but I thought I'd ask if there's a way to solve this.

4532066
  • 2,042
  • 5
  • 21
  • 48
  • If there are `There are no errors in the console` chances you have a "syntax error" in your javascript which breaks the function / code entirely – GetSet Jan 16 '21 at 22:00
  • You can `console.log()` though in your `success` handler however. E.g. `console.log(response);` – GetSet Jan 16 '21 at 22:02
  • Thanks for your replies. I have debugged as suggested, but was not able to make progress, nothing was returned. The strange thing is that ther HTML returned by the ajax when scrolling down the page (I updated my question to include that) returns identical HTML to that which is displayed on first loading the page, when the buttons to display a few tracks are displayed. I cannot see anything in the JS that displays extra content on scrolling to the bottom of the page that would break the ajax to play a track. Debugging confirms there are no errors. Maybe this issue is to do with bootstrap? – 4532066 Jan 16 '21 at 22:23
  • "nothing was returned" is progress. Means your server side code needs debugging. Or, if server side is correct, you can `console.log("hello world")` and if that doesn't show, then your JavaScript is completely broke. – GetSet Jan 16 '21 at 22:31
  • I'd first check for syntax errors. Something out of place. A typo somewhere. A null value perhaps treated as existing. Something. But "nothing was returned" could be the js is broke or server side. So, `console.log()` could be used in a "step debugging" type sense. – GetSet Jan 16 '21 at 22:34

0 Answers0