Accessing data in click event is undefined

juan12

I have a column in one table that renders an anchor tag. I have an on click event on that anchor tag. When clicked it will pass some query parameters to a Url and then open a new page in a different window based on those parameters. The problem I have is that the parameter that comes from the datatable throws an error saying that that parameter is undefined.
I have a different table where I do almost the same thing. The difference is that the other table doesn't open another window, it just navigates to a different page. The code on this table works. I don't know why it doesn't work on the other one.

This works. The on click event successfully retrieves the id from the anchor tag:

var oTable = $("#mntncTable").DataTable({
                ajax: {
                    url: urlLM,
                    type: "GET",
                    datatype: "json"
                },
                order: [[0, "asc"]],
                stateSave: true,
                displayLength: -1,
                lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                columns: [
                    { data: "CompanyName" },
                    { data: "BudgetItem" },
                    { data: "Supplier" },
                    { data: "AccountNumber" },
                    { data: "OriginalPurchDate" },
                    { data: "ExpirationDate" },
                    { data: "ComputerName" },
                    { data: "LicenseName" },
                    {
                        data: "Id", width: "20px", sortable: false, render: function (data) {
                            return '<a class="editBtn" data-toggle="modal" href="#modalForm" data-id="' + data + '"><span class="mbri-edit"></span></a>';
                        }
                    }
                ]
            })

$('#mntncTable tbody').on('click', 'a.editBtn', function (eve) {
                var myId = $(this).data("id");
                var url = '@Url.Action("Edit", "MaintenanceDatas")';
                $("#form-content").load(url + "/" + myId);

            });

This doesn't. The quoteNum variable in the on click event is undefined.

var oTable = $("#quotesTable").DataTable({
                ajax: {
                    url: urlLM,
                    type: "GET",
                    datatype: "json"
                },      
                order: [[0, "asc"]],
                stateSave: true,
                displayLength: -1,
                lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                columns: [
                    { data: "QuoteNum", autoWidth: true },
                    { data: "QuoteLine", autoWidth: true },
                    { data: "PartNumber", autoWidth: true },
                    { data: "LineDesc", autoWidth: true },
                    { data: "LastUpdate", autoWidth: true },
                    { data: "LastDcdUser", autoWidth: true },
                    { data: "OrderQty", autoWidth: true },
                    { data: "ChangedBy", autoWidth: true },
                    { data: "ChangedDate", autoWidth: true },
                    {
                        data: "QuoteNum", width: "20px", sortable: false, render: function (data) {
                            return '<a class="startQuote" data-quoteNum="' + data + '"><i class="fa fa-hand-o-right" aria-hidden="true"></i></a>';
                        }
                    }
                ]
            })

            $('#quotesTable tbody').on('click', 'a.startQuote', function () {
                var quoteNum = $(this).data("quoteNum");
                var url = "Quote/StartQuote?quoteNum=" + quoteNum + "&editQuote=false";
                window.open(url);
            });

I don't know why it doesn't work.
Thanks in advance for your help.

allan

That looks like it should work to me. Perhaps try $(this).attr('data-quoteNum'), although really that shouldn't be the problem.

Could you link to a page showing the issue please.

Allan

juan12

Thanks a lot Allan.
That was it. It worked.