Modal window not working for paginated data table

Question

I am using colorbox for modal window and data table.

Modal window showing up properly if I do event from page 1 in data table, modal window showing up with the cotent I want. When I do same event from page 2 in data table, instead of opening modal window, current page is being replaced with modal window content.

I have added alerts in jQuery function, these alerts are not being fired when I do event in page 2.

Here is the relevant code:

HTML:

 <div id="tab2" class="alltables paddingbox">

                                                <!-- buttons section ----->
                                                <table width="100%" class="display dataTable" id="tb1">
                                                    <thead>
                                                        <tr>
                                                            <th style="width:2%; background-image:none; cursor:auto" ></th>
                                                            <th style="width:10%">One</th>
                                                            <th style="width:10%">Two</th>
                                                            <th style="width:48%; ">Three</th>
                                                            <th style="width:10%; background-image:none">View</th>
                                                            <th style="width:10%; background-image:none">Edit</th>
                                                        </tr>
                                                    </thead>

                                                    <tbody>
                                                                <tr id="${id}" class="">
                                                                            <td>
                                                                                <img src="imgurl" />
                                                                            </td>
                                                                    <td> Name</td>
                                                                    <td>Date</td>
                                                                    <td>comments</td>
                                                                    <td><a class='inline tableshare btnRadius' href='someurl'>View</a></td>
                                                                            <td id="editURL">
                                                                                <a href="someURL">Edit</a>
                                                                            </td>
                                                                   </tr>
                                                    </tbody>
                                                </table>
                                </div>

JS code:

 <script type="text/javascript">
                            $(document).ready(function() {
                                $(".inline").colorbox({inline: true, width: "50%"});

                                // This makes the link inside the iframe open in the parent window
                                $('.inline').on('click', function(event) {
                                    alert('In .... Inline click....');
                                    var curURL = $(this).attr("href");
                                    $.ajax({
                                        type: "GET",
                                        url: curURL,
                                        success: function(response) {
                                            alert('In success.....');
                                            $.colorbox({title: "Title", width: "70%", height: "70%", html: response});
                                        },
                                        error: function(xhr) {
                                            $.colorbox({title: "Title", width: "70%", height: "70%", html: "Some error occured ....."});
                                        }
                                    });
                                });

                            });

                        </script>    

jQuery 1.10.2 is the version I am using.

Answer 1

I had the same problem recently, I was adding elements to a datatable that was created years ago.

My javascript event only did work in page 1 ...

After some investigation i did add a copy of my javascript event on the table draw event then after each draw my click event was added to each page clicked.

//your dataTable name
table.on( 'draw', function () {
    
        //unbind your old event 
        $('img[data-enlargeable]').addClass('img-enlargeable').unbind('click');
        
        //your new event here
        $('img[data-enlargeable]').addClass('img-enlargeable').click(function() {

        //TODO Add some useful code here

        }
        
}

Answer 2

(There's really not quite enough information to be sure, but what you describe is common enough that I feel comfortable proposing this as a possible answer.)

This could be a problem binding to your .inline element's click handler.

On page one, everything loads and the ready function binds your handler to the existing DOM element. If you then dynamically load page 2 of the data, which includes its own .inline element, then the ready function won't have any reason to fire again, which means the click on .inline will result in a default behavior, which is to load the content of "someURL" into your window.

Assuming that's the problem, you have a few options:

1) Move the control to load the next page outside the dynamic content. This has the additional advantage of reducing the amount of data you're sending across the wire

2) Re-bind the .inline click handler after every successful load. Not an awesome solution, since it means you're doing even more work on every load.

3) Use jQuery's delegated events to attach the handler to a parent element of .inline that is not replaced by a load. Clicks to any subsequent child element with a class of "inline" will trigger the handler. This is a perfectly reasonable solution, but since the action is separated from the control, it makes it harder to maintain and debug in the future, when you've forgotten where the heck the event handler for that "inline" control is. :)