locked
Click function on Save Does not work RRS feed

  • Question

  • User-1499457942 posted

    Hi

      When i click on Save it does not work . When i comment the below lines then it functions

    $("#rptTransporter").DataTable({
    "scrollY": "250px",
    "scrollCollapse": true,
    "columnDefs": [{ "targets": 0, "width": "20%" }, { "targets": 1, "width": "20%" }, { "targets": 2, "width": "10%", "orderable": false, "title": "" }, { "targets": 3, "width": "10%", "orderable": false, "title": "" }],

    Thanks

    <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">
    
            <link href="Css/bootstrap.min.css" rel="stylesheet" type="text/css" />
            <link href="Css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
    
            <script type="text/javascript" src="Scripts/jquery-1.8.2.js"></script>
            <script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script>
    
    
            <link href="Css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
            <script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
    
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#rptTransporter").DataTable({
                        "scrollY": "250px",
                        "scrollCollapse": true,
                       "columnDefs": [{ "targets": 0, "width": "20%" }, { "targets": 1, "width": "20%" }, { "targets": 2, "width": "10%", "orderable": false, "title": "" }, { "targets": 3, "width": "10%", "orderable": false, "title": "" }],
                    //    paging: false,
                    //    "info" : false
                    //});
                    $("#Save").click(function () {
                        alert("hello");
                        var txt = $(this).prop("value");
                        var trcode = $("#trcode").val();
                        var trname = $("#trname").val();
                        var traddress = $("#traddress").val();
                        var trcity = $("#trcity").val();
                        var trstate = $("#trstate").val();
                        var trcontactperson = $("#trcontactperson").val();
                        var trphone = $("#trphone").val();
                        var active = "Y";
                        if (trcode == '') {
                            $("#trcode").focus();
                        }
                        else if (trname == "") {
                            $("#trname").focus();
                        }
                        else if (trcode == "" || trname == "") {
                            $("#trcode").focus();
                        }
                        else {
                            if (txt == "Save") {
                                $.ajax
                                ({
                                    type: "post",
                                    url: "Transporter.aspx/InsertData",
                                    data: "{'trcode':'" + trcode + "','trname':'" + trname + "','traddress':'" + traddress + "','trcity':'" + trcity + "','trstate':'" + trstate + "','trcontactperson':'" + trcontactperson + "','trphone':'" + trphone + "','active':'" + active + "'}",
                                    contentType: "application/json; charset=utf-8",
                                    success: function (result) {
                                        $('#dvResult').text("Record Saved Successfully");
                                    },
                                    error: function (xhr, textStatus, error) {
                                        $('#dvResult').text("Error: " + error);
                                    }
                                });
                            }
                            if (text == "Update") {
                                $.ajax
                                ({
                                    type: "post",
                                    url: "Transporter.aspx/UpdateData",
                                    data: "{'trcode':'" + trcode + "','trname':'" + trname + "'}",
                                    contentType: "application/json; charset=utf-8",
                                    success: function (result) {
                                        $('#dvResult').text("Record Updated Successfully");
                                    },
                                    error: function (xhr, textStatus, error) {
                                        $('#dvResult').text("Error: " + error);
                                    }
                                });
                            }
                        }
    
                    });
    
                    $("[id*=rptTransporter] [id*=lnkDelete]").click(function () {
                        if (confirm("Do you want to Delete this Record ?")) {
                            var trcode = $(this).parents().find('span.Code').html();
                            $.ajax({
                                type: "POST",
                                url: "Transporter.aspx/DeleteData",
                                data: "{'trcode':'" + trcode + "'}",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (r) {
                                    BindRepeater();
                                }
                            });
                        }
                        return false;
                    });
    
                });
    
                function BindRepeater() {
                    $("[id*=rptTransporter]").find("tr:gt(1)").remove();
                    $.ajax({
                        type: "POST",
                        url: "Transporter.aspx/GetData",
                        data: '{}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: OnSuccess,
                        failure: function (response) {
                            alert(response.d);
                        },
                        error: function (response) {
                            alert(response.d);
                        }
                    });
                }
    
                function OnSuccess(response) {
                    $("[id*=rptTransporter]").attr("border", "1");
                    var xmlDoc = $.parseXML(response.d);
                    var xml = $(xmlDoc);
                    var customers = xml.find("Table");
                    var row = $("[id*=rptTransporter] tr:last-child").clone(true);
                    $("[id*=rptTransporter] tr:last-child").remove();
                    $.each(customers, function () {
                        var customer = $(this);
                        $(".Code", row).html($(this).find("trcode").text());
                        $(".Name", row).html($(this).find("trname").text());
                        $("[id*=rptTransporter]").append(row);
                        row = $("[id*=rptTransporter] tr:last-child").clone(true);
                    });
                }
                function isAlpha(keyCode) {
                    return ((keyCode >= 65 && keyCode <= 90) || (keycode >= 97 && keycode <= 122) || (keycode >= 48 && keycode <= 57) || keyCode == 8 || keyCode == 32 || keyCode == 190)
                }
                function Alpha(keyCode) {
                    return ((keyCode >= 65 && keyCode <= 90) || (keycode >= 97 && keycode <= 122) || keyCode == 8 || keyCode == 32 || keyCode == 190)
                }
    
            </script>
            <title></title>
            
        </head>
        <body class="container">
            <div class="bs-example">
        <h1>Maintain Transporter</h1>
        <form class="form-horizontal" >
            <div class="form-group" align="center">
                <label class="control-label col-xs-3" >Code:</label>
                <div class="col-xs-2">
                    <input type="text" onkeydown = "return isAlpha(event.keyCode);" class="form-control" id="trcode" placeholder="Code"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-3" >Name:</label>
                <div class="col-xs-3">
                    <input type="text" onkeydown = "return Alpha(event.keyCode);" class="form-control" id="trname" placeholder="Name"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-3" for="confirmPassword">Address:</label>
                <div class="col-xs-4">
                    <input type="text" class="form-control" id="traddress" placeholder="Address"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-3" for="firstName">City:</label>
                <div class="col-xs-3">
                    <input type="text" class="form-control" id="trcity" placeholder="City"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-3" for="lastName">State:</label>
                <div class="col-xs-3">
                    <input type="text" class="form-control" id="trstate" placeholder="State"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-3" for="phoneNumber">Phone:</label>
                <div class="col-xs-2">
                    <input type="tel" class="form-control" id="trphone" placeholder="Phone"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-3" for="ZipCode">Contact Person:</label>
                <div class="col-xs-3">
                    <input type="text" class="form-control" id="trcontactperson" placeholder="Contact Person"/>
                </div>
            </div>
            <br>
            <div class="form-group">
                <div class="col-xs-offset-3 col-xs-9">
                    <input type="button" class="btn btn-primary" value="Save" name="Save" id="Save"  />
                    <input type="button" class="btn btn-default" value="Cancel" name="Cancel" id="Cancel"  />
                </div>
            </div>
    
                        <asp:Repeater ID="Repeater1" runat="server" >
                             <HeaderTemplate>
                                <table id="rptTransporter"  >
                                    <thead>
                                    <tr >
                                    <th>Code</th>
                                    <th>Name</th>
                                    </tr>
                                        </thead>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <div >
                                <tr>
                                    <td>
                                        <%# Eval("trcode") %>
                                    </td>
                                    <td>
                                        <%# Eval("trname") %>
                                    </td>
                                    <td>
                                        <input type="button" id="lnkEdit" value="Edit"></input>
                                    </td>
                                    <td>
                                        <input type="button" id="lnkDelete" value="Delete"></input>
                                    </td>
                                </tr>
                                    </div>
                            </ItemTemplate>
                            <FooterTemplate>
                                </table>
                            </FooterTemplate>
                        </asp:Repeater>
         </form>
    </div>
               
        </body>
    </html>
    

    Sunday, January 10, 2016 4:48 PM

Answers

  • User614698185 posted

    Hi JagjitSingh,

    Yes, I knew your issue. As my previous post, you could use the event delegation syntax of .on() here. Change:

    $("#Save").click(function() {

    to

    $("#buildyourform").on('click', '#Save', function () {

    Best Regards,

    Candice Zhou

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 11, 2016 9:54 AM
  • User753101303 posted

    It seems because the commented version gives :

       $("#rptTransporter").DataTable({
                        "scrollY": "250px",
                        "scrollCollapse": true,
                       "columnDefs": [{ "targets": 0, "width": "20%" }, { "targets": 1, "width": "20%" },
                                      { "targets": 2, "width": "10%", "orderable": false, "title": "" },
                                      { "targets": 3, "width": "10%", "orderable": false, "title": "" }], // <--EXTRA COMMA
                    //    paging: false,
                    //    "info" : false
                    //}); // <--SHOULDN'T BE COMMENTED 
    

    Edit: so in short you should have instead something such as:

       $("#rptTransporter").DataTable({
                        "scrollY": "250px",
                        "scrollCollapse": true,
                       "columnDefs": [{ "targets": 0, "width": "20%" }, { "targets": 1, "width": "20%" },
                                      { "targets": 2, "width": "10%", "orderable": false, "title": "" },
                                      { "targets": 3, "width": "10%", "orderable": false, "title": "" }]
                    //    ,paging: false,
                    //    "info" : false
                    });

    (ie moved the comma and the closing }) is left unchanged.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 11, 2016 10:39 AM

All replies

  • User614698185 posted

    Hi JagjitSingh,

    I think you could use .on() method, like below:

    $(document).ready(function() {
        var table = $('#rptTransporter').DataTable(); 
        $('#rptTransporter tbody').on('click', 'tr', function () {
            var data = table.row( this ).data();
            alert( 'You clicked on '+data[0]+'\'s row');
        } );
    } );

    For more information, please see: http://www.w3schools.com/jquery/event_on.asp

    http://stackoverflow.com/questions/12753242/jquery-link-click-in-datatables-not-working

    Best Regards,

    Candice Zhou

    Monday, January 11, 2016 3:28 AM
  • User-1499457942 posted

    Hi Candice

      That's o.k . MY problem is if i don't comment the DataTable Lines then below Save Click function does not work.

    $("#Save").click(function () {

    If i comment below lines then it work

    $("#rptTransporter").DataTable({
                        "scrollY": "300px",
                        "scrollCollapse": true,
                        "columnDefs": [{ "targets": 0, "width": "20%" }, { "targets": 2, "width": "10%", "orderable": false, "title": "" }, { "targets": 3, "width": "10%", "orderable": false, "title": "" }],
                        paging: false,
                        "info" : false
                    });

    Thanks

    Monday, January 11, 2016 3:58 AM
  • User614698185 posted

    Hi JagjitSingh,

    Yes, I knew your issue. As my previous post, you could use the event delegation syntax of .on() here. Change:

    $("#Save").click(function() {

    to

    $("#buildyourform").on('click', '#Save', function () {

    Best Regards,

    Candice Zhou

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 11, 2016 9:54 AM
  • User753101303 posted

    It seems because the commented version gives :

       $("#rptTransporter").DataTable({
                        "scrollY": "250px",
                        "scrollCollapse": true,
                       "columnDefs": [{ "targets": 0, "width": "20%" }, { "targets": 1, "width": "20%" },
                                      { "targets": 2, "width": "10%", "orderable": false, "title": "" },
                                      { "targets": 3, "width": "10%", "orderable": false, "title": "" }], // <--EXTRA COMMA
                    //    paging: false,
                    //    "info" : false
                    //}); // <--SHOULDN'T BE COMMENTED 
    

    Edit: so in short you should have instead something such as:

       $("#rptTransporter").DataTable({
                        "scrollY": "250px",
                        "scrollCollapse": true,
                       "columnDefs": [{ "targets": 0, "width": "20%" }, { "targets": 1, "width": "20%" },
                                      { "targets": 2, "width": "10%", "orderable": false, "title": "" },
                                      { "targets": 3, "width": "10%", "orderable": false, "title": "" }]
                    //    ,paging: false,
                    //    "info" : false
                    });

    (ie moved the comma and the closing }) is left unchanged.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 11, 2016 10:39 AM