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

  • 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();
            }

    Friday, May 28, 2021 1:28 AM

Answers

  • 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;

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 28, 2021 5:55 PM

All replies

  • 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

    Friday, May 28, 2021 9:48 AM
  • 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.   

    Friday, May 28, 2021 10:38 AM
  • 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)

    Friday, May 28, 2021 1:36 PM
  • 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

    Friday, May 28, 2021 1:39 PM
  • 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/

    Friday, May 28, 2021 2:26 PM
  • 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;

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 28, 2021 5:55 PM