Implementing infinite scroll in Bootstrap modal?

Question

I'm trying to implement infinite scroll in a Bootstrap modal. I've tried several infinite scroll libraries but none of them have worked within a modal.

Here's what my code looks like right now.

When the modal is opened, jQuery listens for the event and requests data from the server:

$(document).on('show.bs.modal', '#modal', function(event)
{
    var modal = $(this);
    var modalBody = modal.find('.modal-body');

    $.ajax({
        url: '/messages',
        type: 'post',
        dataType: 'json'
        success: function(data)
        {
            // Append the rendered view to the modal body
            modalBody.append(data.data.view);
        }
    });
});

Here is the getData() method it retrieves the messages from:

public function getData()
{
    $messages = Message::paginate(10);

    return response()->json([
        'success' => true,
        'data' => [
            'view' => view('layouts.messages', ['messages' => $messages])->render()
        ]
    ], 200);
}

Here is my layouts.messages blade file:

<div class="messages-container">
    @foreach ($messages as $message)
        <div class="message">{{ $message->text }}</div>
    @endforeach
</div>

{{ $messages->links() }}

In the end, the modal looks like this:

<div class="modal fade" id="modal" tabindex="-1">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-body">
            <div class="messages-container">
                @foreach ($messages as $message)
                    <div class="message">{{ $message->text }}</div>
                @endforeach
            </div>

            {{ $messages->links() }}
         </div>
      </div>
   </div>
</div>

As you can see, I need to append more data to the .content-container on each load.

From here, how can I implement infinite scrolling the modal so that if the user scrolls down to the bottom of the modal, it loads the next page from the server and appends it to the modal body?

Answer 1

A quick google search resulted in: http://jscroll.com/

It specifically mentions the ability to load data via Ajax.