locked
Detect Scrolling inside Modal? RRS feed

  • Question

  • User-1614409683 posted

    I have a chat modal that's between two users. When you open the modal it loads a certain amount of rows. I'm trying to get it so that when you scroll to the top of the modal body it triggers some ajax to load more data.

    At the moment I'm having some trouble trying to display a message in the console to tell me I am scrolling inside the modal. What is a good way to accomplish this?

    Thank you.

    Below is the modal I am working with.

    <div class="modal" id="ChatModal" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="Chat_Labeld_By" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div id="ChatModalBody" class="modal-body" style="max-height:400px; word-wrap: break-word; overflow-x:hidden; overflow-y:auto;">
                        <div id="infiniteScroll">
                            <table id="tabe" width="100%" style="word-wrap: break-word; table-layout:fixed;">
                                <tbody>
                                    <tr>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer" id="ChatModalFooter">
                        <button type="button" id="CloseChatModal" class="btn secondary-btn" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

    Thursday, March 18, 2021 1:54 PM

All replies

  • Thursday, March 18, 2021 2:39 PM
  • User1535942433 posted

    Hi RARJ94,

    At the moment I'm having some trouble trying to display a message in the console to tell me I am scrolling inside the modal.

    According to your description,I'm guessing your current requirement is get the message of scrolling inside the modal.You could use scroll() in jquery.

    Just like this:

    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.2.1.min.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ChatModal">
                    Launch demo modal
                </button>
                <!-- Modal -->
                <div class="modal" id="ChatModal" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="Chat_Labeld_By" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-scrollable" role="document">
                        <div class="modal-content">
                            <div id="ChatModalBody" class="modal-body" style="max-height: 400px; word-wrap: break-word; overflow-x: hidden; overflow-y: auto;">
                                <div id="infiniteScroll">
                                    <table id="tabe" width="100%" style="word-wrap: break-word; table-layout: fixed;">
                                        <tbody>
                                            <tr>
                                                <td>Lorem ipsum dolor坐下,一直保持良好状态。Fusce结果,lucus pulvinar的purus,sapien libero scelerisque neque,seb bibendum ex dui在felis。整数sed imperdiet nibh,非eleifend lectus。Sed interdum,tortor et rutrum elementum,nisi risus venenatis risus,eget dictum ligula lacus et magna。Nullam pharetra enim quis velit pellentesque euismod。整数nec neque massa。Maecenas sollicitudin id justo id varius。Maecenas vel nisl eget velit aliquam facilisis。Aenean luctus胎盘ornare。Cras congue dolor et enim molestie rhoncus。Proin volutpat,augue eget luctus scelerisque,orci nisi mollis eros,ut volutpat ipsum justo actortor。
    
    Curabitur eget arcu quam。Nullam blandit Justo eu commodo mollis。Quisque hendrerit orci vita e au faucibus亵渎。最好的调味品和调味品。全景式的estegas est eu em semrisque tempor。Curabitur posuere metus vitae risus ultricies fermentum。发酵菌,肠胃最大肠杆菌,马萨诸塞州双翅腹泻肠,牛肝菌特立韦氏肠杆菌。Pellentesque elit felis,vehicula et egestas nec,pulvinar quis magna。莫尔比(Morbi)坐在amet malesuada erat,前任Placerat。
    
    Praesent imperdiet,null,amet vehicula volutpat,dolor velit aliquet mauris,placerat orci urna vitaetellus。在习惯习俗中,平板式的格言是正确的。Donec ut elit eu urna tristique pellentesque。Maecenas dignissim iaculis scelerisque。Aenean ligula neque,有效的元素ID,权属信使。Sed tristique sollicitudin arcu in interdum。Donec eget gravida nisi,id mollis nibh。Aliquam id Accumsan quam。在susgnit magna上很赞。Sed Porttitor Tincidunt Congue。Fusce dignissim dapibus consectetur。Ut bibendum finibus sem eu sodales。Nullam porta nisi lacus,在mollis arcu malesuada处。
    
    Lorem ipsum dolor坐下,一直保持良好状态。Fusce结果,lucus pulvinar的purus,sapien libero scelerisque neque,seb bibendum ex dui在felis。整数sed imperdiet nibh,非eleifend lectus。Sed interdum,tortor et rutrum elementum,nisi risus venenatis risus,eget dictum ligula lacus et magna。Nullam pharetra enim quis velit pellentesque euismod。整数nec neque massa。Maecenas sollicitudin id justo id varius。Maecenas vel nisl eget velit aliquam facilisis。Aenean luctus胎盘ornare。Cras congue dolor et enim molestie rhoncus。Proin volutpat,augue eget luctus scelerisque,orci nisi mollis eros,ut volutpat ipsum justo actortor。</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="modal-footer" id="ChatModalFooter">
                                <button type="button" id="CloseChatModal" class="btn secondary-btn" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <script>
            $(function () {
                $('#ChatModalBody').scroll(function () {
                    console.log("Scrolling1");
                }); 
            })
        </script>
        </form>
    </body>

    Best regards,

    Yijing Sun

    Friday, March 19, 2021 5:28 AM
  • User-1614409683 posted

    Thank you for the reply yij sun,

    When I'm scrolling in the modal now, I'm getting an error saying $ is undefined.

    Edit - Just realised I wasn't referencing jquery and bootstrap in the layout header.

    Monday, March 22, 2021 3:29 PM
  • User1535942433 posted

    Hi RARJ94,

    If you need to write jquery,you must add jquery and bootstrap library.There are three ways to add these libraries.

    1.Right click your application-->Select Manage Nuget Package-->Select jquery.min.js and bootstrap.js-->Install them-->pull them in your page from your folder.

    2.Download jquery .

      Download Bootstrap.

    3.Use online link from cdn.

    Note:jquery library must before bootstrap.

    If you still have problems,you could post to us.And if you have solved your problems,you could mark these answers which help to you.

    Best regards,

    Yijing Sun

    Tuesday, March 23, 2021 3:30 AM