Getting undefined data on button click event

Carneno

Hello,

I'm using jquery.datatables 1.10.15, jquery 1.12.4 in Visual Studio 2017 Community with an ASP.NET MVC 6 program.

I'm Getting undefined data on button click event.

I already have my own DataTables function running the way I want it to except for this button click event problem. I'm using the following code to display an alert for the data in my datatable:

               var masterTable = $('#master').DataTable({
                    'processing': true,
                    'select': true,
                    'paging': false,
                    'searching': false,
                    'ajax': {
                         'url': "data/mailboxes.txt"
                    },
                    dom: 'B',
                    buttons: [
                         {
                              text: 'My button',
                              action: function (e, dt, node, config) {
                                   alert('Button activated');
                              }
                         }
                    ],
                    'columns': [
                         { 'data': 'Alias' },
                         { 'data': 'User' },
                         { 'data': 'Host' },
                         { 'data': 'Password' },
                         { 'data': 'PromptForPassword' },
                         { 'data': 'Mail' },
                         { "data": 'CommunicationStatus' },
                         { 'data': 'ServerPortNumber' },
                         { 'data': 'PollPeriod' },
                         { 'data': 'UseSsl' },
                         { 'data': 'Edit' }
                    ],
                    "columnDefs": [
                         { "targets": [0, 1, 2], "width": "21%" },
                         { "targets": [3, 4], "visible": false },
                         { "targets": 5, "width": "6%", 'defaultContent': 0 },
                         { "targets": 6, "width": "9%", 'defaultContent': "Communication status undefined ", render: $.fn.dataTable.render.ellipsis(6, false, true) },
                         { "targets": 7, "width": "7%" },
                         { "targets": 8, "width": "9%", render: function (data, type, row) { return data + ' min '; } },
                         { "targets": 9, "width": "6%" },
                         { "targets": -1, "data": null, "defaultContent": "<button>Click!</button>" }
                    ]
               });

               $('#master tbody').on('click', 'button', function () {
                    var data = masterTable.row($(this).parents('tr')).data();
                    alert(data[0] + "'s Port number is: " + data[7]);
               });

.
The alert box looks like the image attached at the end of this post.

You can view it live here: tonygirgenti.biz/. Just select the "DataTable Test" menu option.

I'm pretty sure I have the necessary scripts for buttons loading, because the button link on the upper left of the table works.

Any help that anyone can provide to figure out what I am doing wrong would be gratefully appreciated.

Thanks,
Tony

tangerine

I'm pretty sure I have the necessary scripts for buttons loading, because the button link on the upper left of the table works.

Do you mean you are intending to use DataTables' Buttons extension?
Because I don't see it anywhere in your code.

But anyway, your alert message is saying that data[0] is undefined. Have you done some debugging to ascertain what data is being returned?

Carneno

@tangerine,

-- Do you mean you are intending to use DataTables' Buttons extension? --
I'm unsure of what you mean here. Do I need to use the DataTables' Buttons extension?

I used the Visual Studio debugger and the F12 debugger to determine that the data is null.

Thanks,
Tony

kthorngren

Since you are using data objects (not arrays) you need to access them using their property names not position. Changing this:
alert(data[0] + "'s Port number is: " + data[7]);

To this:
alert(data.Alias + "'s Port number is: " + data.ServerPortNumber);

Also the Datatables Buttons extension code is not used for the buttons you populate in the table. You only need it if you are wanting to use one of the Datatables buttons or if you are creating your own like your "My Button".

Kevin

Carneno

Kevin,

I tried your suggestion and it did work the way it should. I hope I remember that I need to use property names in that situation.

So, I guess I am using the Datatables Buttons extension, since the "My Button" link works. Another thing I need to figure out is why it is not displaying as a button.

Thanks for your help.

Tony

tangerine

I guess I am using the Datatables Buttons extension

Don't guess. Know whether you are using it or not.
I don't see it referenced in your code. Do you?

HPB

I've made you a live testcase here:
live.datatables.net/pekimude/1/edit

For future questions it is much easier to debug your code.

Carneno

tangerine,

What is the Datatables Buttons extension supposed to look like in code?

Thanks for your help.

Tony

Carneno

HPB,

I'm unsure about the purpose of your testcase. None of the button clicks work. I don't see how that testcase helps.

Thanks for your help.

Tony

Please excuse my ignorance. I see that you changed the alert statement to a console.log.
I appreciate your effort in setting this up in the testcase. I will use what you have recommended in future requests for help.

Thanks again.

Tony

kthorngren

What is the Datatables Buttons extension supposed to look like in code?

Looks like you are loading Datatables and Buttons using the below "bundle":

    <script src="/bundles/datatables?v=XxWpIUXl7nFQpPJ_cPlqWGkieZ4TzBpQzPgoJ-T724o1"></script>

Is that correct?

Another thing I need to figure out is why it is not displaying as a button.

Are you loading the Buttons CSS file in the file?

    <link href="/Content/datatables?v=PVhfh1YMhwXFrUdxiA9Q2HflTTPMUAVxG1gkO-5ql4M1" rel="stylesheet"/>

If not then that is likely why "My Button" is a link instead of a button.

I'm unsure about the purpose of your testcase. None of the button clicks work. I don't see how that testcase helps.

The test case does work. Open the browser's console. The testcase uses console.log instead of alert for the row buttons. In the JS Bin environment, alert doesn't typically work in most browsers. Click "My Button" to see why.

Kevin

Carneno

Kevin,

Looks like you are loading Datatables and Buttons using the below "bundle":

In MVC 5, the scripts are loaded in bundles as indicated by the following code:

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                         "~/Scripts/bootstrap.js",
                         "~/Scripts/respond.js",
                         "~/Scripts/BootstrapModalDrag.js"));

               bundles.Add(new StyleBundle("~/Content/css").Include(
                         "~/Content/bootstrap.css",
                         "~/Content/site.css"));

               bundles.Add(new ScriptBundle("~/bundles/datatables").Include(
                         "~/Scripts/DataTables/jquery.dataTables.min.js",
                         "~/Scripts/DataTables/dataTables.bootstrap.js",
                         "~/Scripts/DataTables/dataTables.buttons.js"));

               bundles.Add(new StyleBundle("~/Content/datatables").Include(
                         "~/Content/DataTables/css/dataTables.bootstrap.css",
                         "~/Content/DataTables/css/buttons.bootstrap.css"));

               bundles.Add(new ScriptBundle("~/bundles/momentPlugin").Include(
                           "~/Scripts/momentPlugin.js"));

               bundles.Add(new ScriptBundle("~/bundles/moment").Include(
                           "~/Scripts/moment.js"));

               bundles.Add(new ScriptBundle("~/bundles/datatablesselect").Include(
                        "~/Scripts/DataTables/dataTables.select.min.js"));

               bundles.Add(new StyleBundle("~/Content/datatablesselect").Include(
                         "~/Content/DataTables/css/select.bootstrap.css"));

I did figure out the testcase(posted by HPB) situation. I'm glad that HPB did that. I can use it for future questions/problems. How do I save that testcase for future reference?

Thanks,
Tony

kthorngren

It looks like you might be missing one Buttons include file: buttons.bootstrap.js. The Bootstrap Styling page provides info of what to include for Bootstrap styling. Once you add buttons.bootstrap.js then your "My Button" should appear as a button.

How do I save that testcase for future reference?

They are saved by default. Just copy the URL to save the location.

Kevin

Carneno

Kevin,

Thanks for your help.

I finally got my button to show as a button and not a link.

I'm trying to add classes to the button. I tried this:

                    buttons: [
                         {
                              text: 'Add',
                              className: 'btn btn-success operate',
                              action: function (e, dt, node, config) {
                                   alert('Button activated');
                              }
                         }
                    ],

.
But it is not adding the classes.

Any help that you can provide would be gratefully appreciated.

Thanks,
Tony

kthorngren

i took HPB's example and added the bootstrap files and className: 'btn btn-success operate',. Looks like it works in this environment.

http://live.datatables.net/lapowimu/1/edit

I'm not sure what operate is. Maybe it or your site.css is overriding the bootstrap styling.

Kevin

Carneno

Thanks again Kevin.

That help me figure out I was loading the wrong css script file.

Tony