Binding a click event to a button in a cell

Question

I am having trouble binding a click event to a button in a cell. The table is populated initially via razor code

enter code here<table class="table table-bordered" id="requestTable">
        <thead>
            <tr>
                <th class="dynatable-header">
                    Request ID
                </th>
                <th class="dynatable-header">
                    Caller ID
                </th>
                <th class="dynatable-header">
                    Result Code
                </th>
                <th data-dynatable-column="address1And2" class="dynatable-header">
                    Address 1 &amp; 2
                </th>
                <th class="dynatable-header">
                    City
                </th>
                <th class="dynatable-header">
                    State
                </th>
                <th class="dynatable-header">
                    Zip
                </th>
                <th class="dynatable-header">
                    Request Date
                </th>
                <th data-dynatable-column="requestTime" class="dynatable-header">
                    Request Time (ms)
                </th>
                <th data-dynatable-column="moreInfo" class="dynatable-header">

                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (AdminRequest request in this.Model)
            {
                <tr>
                    <td>
                        @request.RequestID
                    </td>
                    <td>
                        @request.CallerID
                    </td>
                    <td>
                        @request.ResultCD
                    </td>
                    <td>
                        @(request.AddressLine1 + " " + request.AddressLine2)
                    </td>
                    <td>
                        @request.City
                    </td>
                    <td>
                        @request.State
                    </td>
                    <td>
                        @request.ZipCode
                    </td>
                    <td>
                        @request.RequestDate
                    </td>
                    <td>
                        @(request.RequestMS.HasValue ? request.RequestMS.Value : 0)
                    </td>
                    <td>
                        <!--button goes here-->
                    </td>
                </tr>
            }
        </tbody>
    </table>

I would normally populate the cell with an action link to shove me over to another page, however I would like a button to show a popup instead. Therefore, I need dynamically bound buttons in the table which would have access to the row's data to call a web service on click to get the rest of the data. I am tired of using jQuery data tables, and thought I would try something new and use dynatables.

After it is populated, I call dynatables on the table. I have written a custom rowReader to strip out whitespace etc that comes along with the data.

$("#requestTable").dynatable({
        features: {
            pushState: false //stop firefox from erroring on the character limit
        },
        readers:{
            _rowReader: function (index, tr, record) {
                record.requestId = record.requestId.trim();
                record.callerId = record.callerId.trim();
                record.resultCode = record.resultCode.trim();
                record.address1And2 = record.address1And2.trim();
                record.city = record.city.trim();
                record.state = record.state.trim();
                record.zip = record.zip.trim();
                record.requestDate = record.requestDate.trim();
                record.requestTime = record.requestTime.trim();
                record.moreInfo = "<button type='button' class='btn btn-primary'>More Info</button>";
            }
        },
        writers: {
            "moreInfo": function (record, tr) {
                var button = record.moreInfo;
                $(button).on("click", function () {
                    alert("hello");
                });
                return button;
            }
        }
    });

This renders the button, but does not attach the event handler. Any ideas as to what I am doing wrong?

Thanks in advance!

"moreInfo" is being added to the writers function but I don't believe it is ever being called. As mentioned here (http://www.dynatable.com/#configuration) your function would be added to the writer but you'd need to call it from one of the existing functions in order for it to execute. — Shelby115, Sep 01 '15 at 18:22
Please see link below it has achieved the same for delete. http://stackoverflow.com/questions/27405547/trigger-modal-popup-in-mvc-form-with-a-button-click — Rajnish, Sep 01 '15 at 18:31

score 0 · Answer 1 · answered Sep 01 '15 at 18:47

0

You can try replacing below lines

<button type='button' class='btn btn-primary'>More Info</button> with below lines <div class="add_to_this"></div>

and then you can attach event on it like below.

function handler() { alert('hello'); } $('.btn btn-primary').append(function() { return $('<button>More Info</button>').click(handler); })

answered Sep 01 '15 at 18:47

Rajnish

1
4

this does not do what I need. Each cell that is bound with the data attribute "moreInfo" needs to have a button that has an individually bound click function. Your jQuery code attaches a click handler that alerts hello to every button that has the classes btn and btn-primary. Thanks for the try though. – NickyG91 Sep 01 '15 at 18:54

score 0 · Answer 2 · answered Sep 01 '15 at 21:24

Solution

After tinkering around I found a decent solution.

I now render the button in the loop initially.

I added the function below

var bindClicks = function () {
        var data = $("#requestTable").data("dynatable");
        $.each(data.settings.dataset.records, function (index, item) {
            var tr = $("#requestTable tbody tr").eq(index);
            $(":last-child", tr).addClass("moreInfoButton");
            $(".moreInfoButton > button", tr).on("click", function () {
                console.log("test");
            });
        });
  };

The function basically gets the current tr we are iterating over, and then proceeds to get the last td in that tr. That way I can search for the button, and bind the click function to it.

To execute this function, I edited the table definition to what is shown below.

var dynatable = $("#requestTable").dynatable({
        features: {
            pushState: false 
        },
        table: {
            readers: {
                testReader: function (index, columns, record) {
                    record.requestId = record.requestId.trim();
                    record.callerId = record.callerId.trim();
                    record.resultCode = record.resultCode.trim();
                    record.address1And2 = record.address1And2.trim();
                    record.city = record.city.trim();
                    record.state = record.state.trim();
                    record.zip = record.zip.trim();
                    record.requestDate = record.requestDate.trim();
                    record.requestTime = record.requestTime.trim();
                }
            }
        }

    }).bind("dynatable:afterProcess", bindClicks);

    dynatable.data("dynatable").process();

Feel free to improve upon my answer.

Binding a click event to a button in a cell

2 Answers2

Solution