.Net Core pass table row of data to ajax controller or JavaScript function

Question

User-544325736 posted

Hello all,

 

I have a view with a table on it and it has rows of data. I tried adding a data attribute  and passing it to a form with javascript submit. The data is undefined. So I tried using a <a> with an onclick event and passing that straight to a javascript function and that is also not seeing the data.

When I was submitting a form it was finding my $("#frmActiveTrades").submit(function (e) {

First line but then would not go in the function.

I’m sure its something simple that I’m missing

Here is what I have

<div id="testBox">
    @if (ViewBag.CancelErrorMsg != null)
    {
        <h5>@ViewBag.CancelErrorMsg</h5>
    }

    @*<form id="frmActiveTrades">*@
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">TradeName</th>
                    <th scope="col">Symbol</th>
                    <th scope="col">Price</th>
                    <th scope="col">Quantity</th>
                    <th scope="col">Cancel</th>
                </tr>
            </thead>
            <tbody>
                @if (ViewBag.Cache != null)
                {
                    @foreach (var item in ViewBag.Cache as IEnumerable<StopOrderVM>)
                    {
                        <tr>
                            <td>
                                @item.TradeName
                            </td>
                            <td>
                                @item.TradeSymbol
                            </td>
                            <td>
                                @item.LimitPrice
                            </td>
                            <td>
                                @item.CryptoAmount
                            </td>
                            <td>
                                @*asp-action="CancelTradeByID" asp-controller="Home" asp-route-tradeName="@item.TradeName"*@
                                @*<a data-tradeName="@item.TradeName">Cancel</a>*@
                                @*<input type="submit" class="btn btn-link text-warning trActive" data-tradeName="@item.TradeName" value="Cancel" />*@
                                <a onclick="activeTradesCancel()" class="btn btn-link text-warning" data-tradeName="@item.TradeName">Cancel</a>


                            </td>
                        </tr>
                    }
                }

            </tbody>
        </table>
    @*</form>*@
$(".trActive").click(function (e) {

            //$("#frmActiveTrades").submit(function (e) {
                e.preventDefault();
                console.log("Inside frmActiveTrades");

                var activeTrade = $("#frmActiveTrades").serialize();
                console.log(activeTrade);
                $.ajax({
                    url: '@Url.Action("CancelTradeByID", "Home")',
                    type: 'POST',
                    data: $("#frmActiveTrades").serialize(),
                    dataType: 'json'
                })
                    .fail(function (e) {
                        console.log("frmActive fail");
                    })
                    .done(function (e) {
                        console.log("frmActive done");
                    })
                    .always(function (e) {
                        console.log("after activeTrades frm");
                    })
            });
function activeTradesCancel(obj) {
            //alert("Hi cancel me " + tradeName);
            console.log("Inside TradesCancel");
            var tr = $(this).closest("tr");
            var tradeName = tr.data("tradeName");
            console.log(tradeName);

            var t = $(this).attr("data-tradeName");
            console.log(t);

           // var t2 = obj.data("tradeName");
           // console.log(t2);

            var t3 = $(this).data("tradeName");
            console.log(t3);

        }

[HttpPost]
        public async Task<IActionResult> CancelTradeByID(string tradeName)
        {
            _logger.LogInformation("Inside Cancel");
            // Cancel Trade in Cache & Check if 'New' Cancel on exchange
            return NoContent();
        }

Answer 1

User287926715 posted

Hi ExceedingLife,

When I was submitting a form it was finding my $("#frmActiveTrades").submit(function (e) {

First line but then would not go in the function.

Open the developer tools, is there an error reported on the console? If so, what is the error message?

Best Regards,

ChaoDeng

Answer 2

User475983607 posted

Hello all,

 

I have a view with a table on it and it has rows of data. I tried adding a data attribute  and passing it to a form with javascript submit. The data is undefined. So I tried using a <a> with an onclick event and passing that straight to a javascript function and that is also not seeing the data.

When I was submitting a form it was finding my $("#frmActiveTrades").submit(function (e) {

First line but then would not go in the function.

I’m sure its something simple that I’m missing

Here is what I have

<div id="testBox">
    @if (ViewBag.CancelErrorMsg != null)
    {
        <h5>@ViewBag.CancelErrorMsg</h5>
    }

    @*<form id="frmActiveTrades">*@
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">TradeName</th>
                    <th scope="col">Symbol</th>
                    <th scope="col">Price</th>
                    <th scope="col">Quantity</th>
                    <th scope="col">Cancel</th>
                </tr>
            </thead>
            <tbody>
                @if (ViewBag.Cache != null)
                {
                    @foreach (var item in ViewBag.Cache as IEnumerable<StopOrderVM>)
                    {
                        <tr>
                            <td>
                                @item.TradeName
                            </td>
                            <td>
                                @item.TradeSymbol
                            </td>
                            <td>
                                @item.LimitPrice
                            </td>
                            <td>
                                @item.CryptoAmount
                            </td>
                            <td>
                                @*asp-action="CancelTradeByID" asp-controller="Home" asp-route-tradeName="@item.TradeName"*@
                                @*<a data-tradeName="@item.TradeName">Cancel</a>*@
                                @*<input type="submit" class="btn btn-link text-warning trActive" data-tradeName="@item.TradeName" value="Cancel" />*@
                                <a onclick="activeTradesCancel()" class="btn btn-link text-warning" data-tradeName="@item.TradeName">Cancel</a>


                            </td>
                        </tr>
                    }
                }

            </tbody>
        </table>
    @*</form>*@
$(".trActive").click(function (e) {

            //$("#frmActiveTrades").submit(function (e) {
                e.preventDefault();
                console.log("Inside frmActiveTrades");

                var activeTrade = $("#frmActiveTrades").serialize();
                console.log(activeTrade);
                $.ajax({
                    url: '@Url.Action("CancelTradeByID", "Home")',
                    type: 'POST',
                    data: $("#frmActiveTrades").serialize(),
                    dataType: 'json'
                })
                    .fail(function (e) {
                        console.log("frmActive fail");
                    })
                    .done(function (e) {
                        console.log("frmActive done");
                    })
                    .always(function (e) {
                        console.log("after activeTrades frm");
                    })
            });
function activeTradesCancel(obj) {
            //alert("Hi cancel me " + tradeName);
            console.log("Inside TradesCancel");
            var tr = $(this).closest("tr");
            var tradeName = tr.data("tradeName");
            console.log(tradeName);

            var t = $(this).attr("data-tradeName");
            console.log(t);

           // var t2 = obj.data("tradeName");
           // console.log(t2);

            var t3 = $(this).data("tradeName");
            console.log(t3);

        }

[HttpPost]
        public async Task<IActionResult> CancelTradeByID(string tradeName)
        {
            _logger.LogInformation("Inside Cancel");
            // Cancel Trade in Cache & Check if 'New' Cancel on exchange
            return NoContent();
        }

There are no inputs to serialize and the form is commented.   

Answer 3

User-544325736 posted

there is no error.

I have done ajax requests multiple times before so I dont understand why this form it hits the submit function but wont go pass the first line. (Inside the function)

Answer 4

User-544325736 posted

Oh wow! so to serialize a form it needs to be an <input />

I did not know that. 

Thank you! I will give that a try. 

I'm trying to pass a value from a row in a table to my JS

Answer 5

User475983607 posted

Oh wow! so to serialize a form it needs to be an <input />

I did not know that. 

It is impossible to use a framework like jQuery by making assumptions.  Read the docs.  That's what they are for...

https://api.jquery.com/serialize/

Answer 6

User-544325736 posted

I finally got this  to work.

 function cancelActiveTrade(obj) {
            //alert("Hi cancel me " + tradeName);
            console.log("Inside TradesCancel");
            var activeTrade = $("#frmActiveTrades").serialize();

            var event = obj || window.event;
            console.log(event);

            var selectedTradeName = event.dataset.tradename;