Problem with datatable row adding in client side

Maureddu

Hi, I need your help.

I'm working with jquery datatables and I'm having problems with rows adding.

This is my html code:

    ...
    <div>
        <a href="#modal-form" role="button" data-toggle="modal">New user</a>
    </div>
    <table id="dynamic-table" role="grid">
        <thead>
            <tr role="row">
                <th class="center sorting_disabled"><input class="ace" type="checkbox"></th>
                <th class="sorting">ID</th>
                <th class="sorting">First name</th>
                <th class="sorting">Second name</th>
                <th class="sorting_disabled" rowspan="1" colspan="1" aria-label=""></th>
            </tr>
        </thead>
        <tbody>
            <tr role="row" class="odd selected">
                <td class="center"><input class="ace" type="checkbox"></td>
                <td>1</td>
                <td>Adam</td>
                <td>Duritz</td>
                <td><a href="#modal-form" role="button" data-toggle="modal">Edit</a></td>
            </tr>
        </tbody>
    </table>
    ...

When clicking both href it is opened a modal form, for new record and edit row. In modal form there is a save button.

This is my jquery code:

        jQuery(function($) {

            //initiate dataTables plugin
            var myTable =
            $('#dynamic-table')
            .DataTable({
                bAutoWidth: false,
                "aoColumns": [
                    null,
                    null,
                    null
                ],
                "aaSorting": [],
                select: {
                    style: 'multi'
                }
            });

            // handler href click (for new row and edit), open modal form
            $('a[href="#modal-form"]').click(function () {
                // code ....
            });

            // handler save button click in modal form
            $("#btnSaveDetail").click(function () {
                myTable.row.add([
                    '<input class="ace" type="checkbox">',
                    $('#cph_main_rec_id').val(),
                    $('#cph_main_txt_fname').val(),
                    $('#cph_main_txt_sname').val(),
                    '<a href="#modal-form" role="button" data-toggle="modal">Edit</a>')
                    .nodes()
                    .to$()
                    .attr('role', 'row')
                    .find('td:eq(0)')
                    .addClass('center');

                myTable.draw();
                $('#modal-form').modal('hide');
            })
        })

The referenced code for adding row in client side work properly, the new row is added and shown (displaying the html code, the new row is correct).

But, when I click the edit button, the href handler it is not called.
Am I doing something wrong?

Thanks to those who can help me.
Mauro

colin

Hi @Mauro,

It would be worth looking at Editor - it's licensable, but it does all that you're after.

We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin