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?

Why does implementing infiniteScroll in a modal present challenges different than implementing it on any other container? — Ohgodwhy, Jun 08 '17 at 04:30
@Ohgodwhy All of the infinite scroll libraries share the same problem in that they don't accept JSON responses. They expect the entire HTML page (at least that's what my conclusion has come to). For my purposes, I need to be able to return a JSON response, and, as far as I can tell, I can't simply return a full HTML page and append it to the modal body. I updated my question with much more detail. — user498641, Jun 08 '17 at 04:34
→ SOLUTION: https://stackoverflow.com/questions/66493621/jquery-implementation-of-infinite-scroll-inside-modal-window — Lourens, Apr 03 '22 at 23:15

score -2 · Answer 1 · answered Jun 08 '17 at 04:47

-2

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

It specifically mentions the ability to load data via Ajax.

answered Jun 08 '17 at 04:47

Already tried this library. Of course it loads via Ajax, they all do. The problem is that 1) it doesn't accept a JSON response, and 2) it expects the server to return the entire HTML page, which, as far as I can tell, won't work with a modal. – user498641 Jun 08 '17 at 04:49
That's not true at, just look at the first example and open the web inspector. You will see subsequent XHR requests made each time more content is loaded. – Jun 08 '17 at 04:51
Like I said, they all return straight up HTML code, not a JSON response. If you can show me how to return a JSON response and append it to the modal, then yeah, but I've found no way of doing so. – user498641 Jun 08 '17 at 04:56
1

@user498641 Look at the `option` list, it shows `callback`. You can write your own function to execute an AJAX request to go and fetch the data and handle any type of response. From there, you can loop your JSON object and append HTML to the container. – Ohgodwhy Jun 08 '17 at 05:08
Just tried this out, but I ran into a problem. If I set the option `nextSelector` to empty, the callback isn't called, and if I completely remove it, the infinite scroll goes on forever and loops through all of the pagination links. – user498641 Jun 08 '17 at 05:32
I ran into an additional problem. For some reason, I think because of how modals change the scroll height, I'm having to do `$('.modal').jscroll()`, instead of something like `$('.modal-body').jscroll()`. So it appends the returned HTML within the `.modal` element rather than the `.modal-body` element. – user498641 Jun 08 '17 at 05:37

Implementing infinite scroll in Bootstrap modal?

1 Answers1