drawCallback not running the code inside at first

Pepayu

So I have an issue here

var table = $('#productTable').DataTable({
    drawCallback: function () {
        $('.dt-paging-button', this.api().table().container())
            .on('click', function () {
                    $('.qtyBox').each(function (i, obj) {
                        if ($(this).val() != "") {
                            //$(".modal").fadeIn();  // Show the modal
                            alert("resolved");
                            valueForAll = true;
                        }
                    });
            });
    },
...
...
)}

What this does is, when the .qtyBox has value (qtyBox is a asp:TextArea) in any of those rows in the first page, and upon clicking the next or any paginate number, it will run the code for this example the alert("resolved"); however, it is not working properly.

What's happening is, upon inputting a value on any rows, and clicking the 2nd page it will do nothing, but upon going back to the original page 1 with the value it will run the code.

I tried the on('page.dt', function () but it is changing the page first before the code runs.

Any suggestion?

kthorngren

The first problem is you are creating a new/additional click event each time the Datatable is drawn.

When do you want this code to execute?

Please provide more details about the requirements so we can make suggestions.

Kevin

allan

You are adding a click event to the DataTables paging buttons? Paging isn't the only way that the content of the DataTable can be updated - sorting and filtering are the other two obvious methods, but many things can cause the table to redraw.

I'm not actually sure what your intention is here? Are you trying to show a warning if they haven't put a value into all input elements or something?

Allan

Pepayu

@allan @kthorngren

Hi thank you both for answering, my intentions is this..

So i have like 50data in the datatable and it is by 25 data eachpage, so 2 pages

The last column is a TextArea where it is all blank at first, but if the user put something in the TextArea and clicked the 2nd page or the next. The popup will appear.

So I've added the on('click') to the paginate button class to run this but the issue arise in my post

The requirement is this is a eCommerce something site and the data is products, what they want is to put a modal to ask the user if they want to "Add to cart" the product they put a quantity into, before moving to the 2nd page.

I've also tried this

        $(".dt-paging-button").on('click', function (event) {
            alert("hey")
        });

But it is just firing once because row is being redrawn.
Hope this helps

kthorngren

I think you need to create a delegated event, for example:

$(document).on('click', '.dt-paging-button', function (event) {
    alert("hey");
});

It seems like there are cases where Datatables might use stopPropagation() or something similar. Make sure to create the event handler before Datatables initializes. This way your event fires before the Datatables event(s). Like this:
https://live.datatables.net/dumasuma/1/edit

Kevin

Pepayu

Hi @kthorngren

Thanks for the advice I did it but still not working what i did is this simple:

        $(document).on('click', '.dt-paging-button', function (event) {
            $('#exampleModal').modal('show');
              });

still, the modal is showing after the page draw, however when it is an alert(), is alerting first before drawing

Also the demo doesn't show the alert()

kthorngren

I think modals are asynchronous allowing the page to continue processing in the background while the modal is open. I don't believe there is anything in Datatables you can do to stop processing. Here are three options I can think of that you can investigate:

1. Look at the docs for the modal you are using to see if there is a synchronous option to stop processing, like alerts do, while the modal is open.
2. Adjust the display of the modal to hide the background page so the user doesn't see the page change.
3. My understanding is you have two pages. Create your own paging buttons with their own click events. In the events display the modal then once the modal is closed use page() to go to the appropriate page. You can add the custom buttons into the Datatables container like this example.

Kevin