jQuery UI Widgets › Forums › DataTable › Deleterow is not trigger…

Tagged: , , , , , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Deleterow is not trigger… Posts
  • February 22, 2016 at 9:14 am Deleterow is not trigger… #81669

    darkelf
    Participant

    Hi, first of all sorry for my English.

    I use datatable for user management. But delete event not triggered 🙁

    This is my code:

    <?php 
include("lgcheck.php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
    
    <!-- start: Meta -->
    <meta charset="utf-8">
    <title>TNB E-tespit Yönetici Paneli</title>
    <meta name="description" content="TNB E-tespit">
    <meta name="author" content="Profelis">
    <meta name="keyword" content="Profelis E-tespit TNB">
    <!-- end: Meta -->
    
    <!-- start: Mobile Specific -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- end: Mobile Specific -->
    
    <!-- start: CSS -->
    <link id="bootstrap-style" href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    <link id="base-style" href="css/style.css" rel="stylesheet">
    <link id="base-style-responsive" href="css/style-responsive.css" rel="stylesheet">
    <link rel="stylesheet" href="js/jqwidgets/styles/jqx.base.css" type="text/css" />
<!--    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-ext' rel='stylesheet' type='text/css'>  -->
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/summernote.css" rel="stylesheet">
    <!-- end: CSS -->
    <!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <link id="ie-style" href="css/ie.css" rel="stylesheet">
    <![endif]-->
    <!--[if IE 9]>
        <link id="ie9style" href="css/ie9.css" rel="stylesheet">
    <![endif]-->
    <!-- start: Favicon -->
    <link rel="shortcut icon" href="img/favicon.ico">
    <!-- end: Favicon -->
    <style>
        .bold {font-weight:bold}
    </style>
</head>

<body>
        <?php include("menu_top.php")?>
        <div class="container-full">
        <div class="row-fluid">

            <!-- start: Main Menu -->
            <?php include("menu_left.php")?>
            <!-- end: Main Menu -->
            
            <noscript>
                <div class="alert alert-block span10">
                    <h4 class="alert-heading">Warning!</h4>
                    <p>You need to have <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a> enabled to use this site.</p>
                </div>
            </noscript>
            

            <!-- start: Content -->
            <div id="content" style="position: absolute" class="span10">                     
                <div style="margin: 0px 0px 0px 50px" id="table"></div>
            </div><!--/.fluid-container-->
            <!-- end: Content -->
    </div><!--/#content.span10-->

    <div style="visibility: hidden;" id="dialog">
        <div>Edit Dialog</div>
        <div style="overflow: hidden;">
            <table style="table-layout: fixed; border-style: none;">
                <tr>
                    <td align="right" class="bold">Kullanıcı Adı:
                    </td>
                    <td align="left">
                        <div id="userid" style="display:none"></div>
                        <input id="userName"></div>
                    </td>
                </tr>
                <tr>
                    <td align="right" class="bold">Email Adresi:
                    </td>
                    <td align="left">
                        <input id="userEmail" />
                    </td>
                </tr>
                <tr>
                    <td align="right" class="bold">Yetki Seviyesi:</td>
                    <td align="left">
                        <div id="userLevel"></div>
                    </td>
                </tr>
                <tr>
                    <td align="right" class="bold">Şifre:</td>
                    <td align="left">
                        <input id="userPass" type="password"></div>
                    </td>
                </tr>
                <tr>
                    <td align="right" class="bold">Şifre(Tekrar):</td>
                    <td align="left">
                        <input id="userPassConfirm" type="password"></div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="right">
                         <br />
                         <button id="save">Kaydet</button> <button style="margin-left: 5px;" id="cancel">Vazgeç</button></td>                    
                </tr>
            </table>
        </div>
        <div id='confirm'>
            <div>Onay</div>
            <div><span id="userIsim"></span> Kullanıcısını silmek istediğinize emin misiniz?
                <div style="margin: 20px 0px 0px 50px;">
                    <input type="button" id="deleteok" value="Evet" style="margin-right: 10px" />
                    <input type="button" id="deletecancel" value="Hayır" />
                </div>
            </div>
        </div>

</div><!--/fluid-row-->
<!-- start: JavaScript-->

    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery-migrate-1.0.0.min.js"></script>
    <script src="js/jquery-ui-1.10.0.custom.min.js"></script>
    <script src="js/modernizr.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src="js/excanvas.js"></script>
    <script src="js/jquery.chosen.min.js"></script>
    <script src="js/jquery.uniform.min.js"></script>
    <script src="js/jquery.cleditor.min.js"></script>
    <script src="js/jquery.noty.js"></script>
    <script src="js/jquery.elfinder.min.js"></script>
    <script src="js/jquery.raty.min.js"></script>
    <script src="js/jquery.iphone.toggle.js"></script>
    <script src="js/jquery.uploadify-3.1.min.js"></script>

<!-- add the js/jqwidgets framework -->
    <script type="text/javascript" src="js/jqwidgets/jqxcore.js"></script>
    <!-- add one or more widgets -->
    <script type="text/javascript" src="js/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="js/jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxpasswordinput.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqxvalidator.js"></script> 

    <script type="text/javascript" src="js/md5.js"></script>
    <script>
        $(document).ready(function() {
            var source = {
                    datatype: "json",
                    datafields: [
                    { name: 'userid', type: 'int' },
                    { name: 'userisim', type: 'string' },
                    { name: 'useremail', type: 'string' },
                    { name: 'userlevel', type: 'int' },
                    { name: 'userlevelt', type: 'string' },
                    { name: 'lvd', type: 'date' }
                ],
                url: 'php/functions.php?request=userlist',
                id: 'userid',
                addRow: function (rowID, rowData, position, commit) {
                    console.log("addRow: " + rowData);
                    // synchronize with the server - send insert command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
                    var data = "request=adduser&username=" + rowData.username + "&userlevel=" + rowData.userlevel + "&useremail=" + rowData.useremail;
                        if (rowData.userpass) data = data + "&userpass=" + CryptoJS.MD5(rowData.userpass);
                    console.log(data);
                    $.ajax({
                        dataType: 'json',
                        url: 'php/functions.php',
                        cache: false,
                        data: data,
                        success: function (data, status, xhr) {
                            // update command is executed.
                            commit(true);
                            dataAdapter.dataBind();
                            if (data==1) var n = noty({text: 'Kullanıcı <b>başarı ile</b> eklenmiştir!',     timeout: 1500});
                            else var n = noty({text: 'Kullanıcı ekleme yapıl(a)mamıştır!'});

                        },
                        error: function () {
                            // cancel changes.
                            commit(false);
                        }
                    });
                },
                updateRow: function (rowID, rowData, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    var data = "request=userupdate&username=" + rowData.username + "&userlevel=" + rowData.userlevel + "&useremail=" + rowData.useremail+"&userid=" + rowID;
                        if (rowData.userpass) data = data + "&userpass=" + CryptoJS.MD5(rowData.userpass);
                    $.ajaxSetup({async: false});
                    setTimeout( function () {
                        $.ajax({
                            dataType: 'json',
                            url: 'php/functions.php',
                            cache: false,
                            data: data,
                            success: function (data, status, xhr) {
                                // update command is executed.
                                commit(true);
                                dataAdapter.dataBind();
                                if (data==1) var n = noty({text: 'Güncelleme <b>başarı ile</b> gerçekleşmiştir!',     timeout: 1500});
                                else var n = noty({text: 'Güncelleme yapıl(a)mamıştır!'});

                            },
                            error: function () {
                                // cancel changes.
                                commit(false);
                            }
                        });                        
                    }, 500);
                    $.ajaxSetup({async: true});
                    return false;

                },
                deleteRow: function (rowID, commit) {
                    // synchronize with the server - send delete command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    console.log("Delete.......");
                    var data = "request=deleteuser&userid=" + rowID;
                    $.ajax({
                        dataType: 'json',
                        url: 'php/functions.php',
                        cache: false,
                        data: data,
                        success: function (data, status, xhr) {
                            // update command is executed.
                            commit(true);
                            dataAdapter.dataBind();
                            if (data==1) var n = noty({text: 'Kullanıcı <b>başarı ile</b> silinmiştir!',     timeout: 1500});
                            else var n = noty({text: 'Silme işlemi yapıl(a)mamıştır!'});

                        },
                        error: function () {
                            // cancel changes.
                            commit(false);
                        }
                    });
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {autoBind: true});

            var getLocalization = function () {
                var localizationobj = {};
                var patterns = {
                    d: "dd.MM.yyyy HH:mm",
                    D: "dddd, d. MMMM yyyy",
                    t: "HH:mm",
                    T: "HH:mm:ss",
                    f: "dddd, d. MMMM yyyy HH:mm",
                    F: "dddd, d. MMMM yyyy HH:mm:ss",
                    M: "dd MMMM",
                    Y: "MMMM yyyy"
                }
                localizationobj.patterns = patterns;
                return localizationobj;
            }

            var yetkiClass = function (row, dataField, cellText, rowData) {
                var cellValue = rowData[dataField];
                switch (dataField) {
                    case "userlevel":
                    if (cellValue ==1) {
                        return "admin";
                    }
                    return "normal";
                }
            }

            $("#table").jqxDataTable(
            {
                width: '70%',
                source: dataAdapter,
                pageable: true,
                sortable: true,
                editable: true,
                autoRowHeight: false,
                localization: getLocalization(),
                showToolbar: true,
                toolbarHeight: 50,
                renderToolbar: function(toolBar)
                {
                    var toTheme = function (className) {
                        theme = "Arctic";
                        if (theme == "") return className;
                        return className + " " + className + "-" + theme;
                    }
                    // appends buttons to the status bar.
                    var container = $("<div style='overflow: hidden; position: relative; height: 100%; width: 100%;'></div>");
                    var buttonTemplate = "<div style='float: left; padding: 3px; margin: 2px;'><div style='margin: 4px; width: 16px; height: 16px;'></div></div>";
                    var addButton = $(buttonTemplate);
                    container.append(addButton);
                    toolBar.append(container);
                    addButton.jqxButton({cursor: "pointer", enableDefault: false,  height: 25, width: 25 });
                    addButton.find('div:first').addClass(toTheme('jqx-icon-plus'));

                    var rowIndex = null;
                    addButton.click(function (event) {
                        if (!addButton.jqxButton('disabled')) {
                        // update the widgets inside jqxWindow.
                        $("#dialog").jqxWindow('setTitle', "Yeni Kullanıcı Ekle");
                        $("#dialog").jqxWindow('open');
                        $("#table").jqxDataTable({ disabled: true });
                        $("#userid").val("");
                        $("#userName").val("");
                        $("#userLevel").jqxDropDownList('selectItem', -1);
                        $("#userEmail").val("");                           
                        }
                    });
                },
                ready: function () {
                    $("#userName").jqxInput({width: 150, height: 30 });
                    $("#userEmail").jqxInput({width: 150, height: 30 });
                    var levelSource = [{"value": 1, "display": "Yönetici"}, {"value": 0, "display": "Kullanıcı"}];
                    var levelAdapter = new $.jqx.dataAdapter(levelSource);
                    $("#userLevel").jqxDropDownList({  source: levelAdapter, displayMember: "display", valueMember: "value", selectedIndex: -1, width: '150px', height: '30px', promptText: "Yetki Seviyesi", dropDownHeight: "50px" });
                    $("#userPass").jqxPasswordInput({  width: '150px', height: '30px', showStrength: true, showStrengthPosition: "right" });
                    $("#userPassConfirm").jqxPasswordInput({  width: '150px', height: '30px', showStrength: true, showStrengthPosition: "right" });
                    $("#save").jqxButton({ height: 30, width: 80 });
                    $("#cancel").jqxButton({ height: 30, width: 80 });
                    $(".deleteButton").jqxButton();
                    $(".editButtons").jqxButton();

                    $("#cancel").mousedown(function () {
                        $("#dialog").jqxWindow('close');
                    });
                    
                    $("#dialog").on('close', function () {
                        // enable jqxDataTable.
                        $("#table").jqxDataTable({ disabled: false });
                        $('#dialog').jqxValidator('hide');
                    });
                    $("#dialog").jqxWindow({
                        resizable: false,
                        position: { left: $("#table").offset().left + 75, top: $("#table").offset().top + 35 },
                        width: 300, height: 280,
                        autoOpen: false
                    });
                    $("#dialog").css('visibility', 'visible');
                },
                pagerButtonsCount: 8,
                editSettings: { saveOnPageChange: false, saveOnBlur: false, saveOnSelectionChange: false, cancelOnEsc: true, saveOnEnter: false, editOnDoubleClick: false, editOnF2: false },
                // called when jqxtable is rendered.
                rendered: function () {

                    var editClick = function (event) {
                        var rowIndex = parseInt(event.target.getAttribute('data-row'));
                        var selection = $("#table").jqxDataTable('getSelection');

                        for (var i = 0; i < selection.length; i++) {
                        // get a selected row.
                            var row = selection[i];
                        }
                        $("#dialog").jqxWindow('setTitle', "Düzenlenen Kullanıcı: " + row.userisim+ "  " + rowIndex);
                        $("#dialog").jqxWindow('open');
                        $("#dialog").attr('data-row', rowIndex);
                        $("#table").jqxDataTable({ disabled: true });
                        $("#userid").val(row.userid);
                        $("#userName").val(row.userisim);
                        $("#userLevel").jqxDropDownList('selectItem', row.userlevel);
                        $("#userEmail").val(row.useremail);
                        $("#userPass").val("");
                        $("#userPassConfirm").val("");

                        $("#save").mousedown(function () {
                            sonuc = $('#dialog').jqxValidator('validate');
                            if (sonuc) {
                                $('#dialog').jqxValidator('hide');
                                $("#dialog").jqxWindow('close');
                                // update edited row.
                                var editRow = parseInt($("#dialog").attr('data-row'));
                                var rowData = {
                                    userid: $("#userid").val(), username: $("#userName").val(),
                                    userlevel: $("#userLevel").val(), useremail: $("#userEmail").val(), userpass: $("#userPass").val()
                                };
                                if (rowData.userid>0) return $("#table").jqxDataTable('updateRow', editRow, rowData);    
                                else  $("#table").jqxDataTable('addRow', null, rowData, 'first');
                            }
                        });
                        return false;                        
                    }

                    var deleteClick = function (event) {
                        var selection = $("#table").jqxDataTable('getSelection');
                        var rowIndex = selection[0].userid;
                        $("#userIsim").html("<strong>" + selection[0].userisim + "</strong>");
                        return rowIndex;
                    }

                    $(".editButtons").on('click', function (event) {
                        editClick(event);
                        return false;
                    });

                    $(".deleteButton").on('click', function (event) {
                        delID=deleteClick(event);
                        $("#confirm").jqxWindow('open');
                        $('#confirm').on('close', function (olay) {
                            if (olay.args.dialogResult.OK) {
                                $("#table").jqxDataTable('deleteRow', delID);
                                console.log("Delete..." + delID);
                            }
                        });
                        return false;
                    });
                },
                columns: [
                    { text: 'Kullanıcı ID', editable: false, dataField: 'userid', hidden: true },
                    { text: 'Kullanıcı İsim', dataField: 'userisim'},
                    { text: 'Email', dataField: 'useremail', align: 'left', width: 250 },
                    { text: 'Yetki Seviyesi', dataField: 'userlevelt', cellClassName: yetkiClass, width: 150 },
                    { text: 'Son giriş tarihi', dataField: 'lvd', width: 150, align: 'center', editable: false, cellsFormat: 'd' },
                    { text: 'İşlemler', cellsAlign: 'center', align: "center", columnType: 'none', width: 90, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
                          // render custom column.
                          return "<div class='editButtons' style='float: left; padding: 3px; margin: 2px; width: 25px; height: 25px;' role='button' class='jqx-rc-all jqx-rc-all-arctic jqx-widget jqx-widget-arctic jqx-fill-state-enabled jqx-fill-state-enabled-arctic' aria-disabled='false'> <div style='margin: 4px; width: 16px; height: 16px;' class='jqx-icon-edit jqx-icon-edit-arctic' data-row='" + row + "'></div></div><div class='deleteButton' style='float: left; margin-left 15px; padding: 3px; margin: 2px; width: 25px; height: 25px;' role='button' class='jqx-rc-all jqx-rc-all-arctic jqx-widget jqx-widget-arctic jqx-fill-state-enabled jqx-fill-state-enabled-arctic' aria-disabled='false'> <div data-row='" + row + "' style='margin: 4px; width: 16px; height: 16px;' class='jqx-icon-delete jqx-icon-delete-arctic'></div></div>";
                      }
                     }
                ]
            });

            $('#dialog').jqxValidator({
                rules: [
                    { input: '#userName', message: 'Kullanıcınızın gerçek adı gerekli bir alandır!', action: 'keyup, blur', rule: 'required' },
                    { input: '#userName', message: 'İsim sadece harflerden oluşabilir!', action: 'keyup', rule: 'notNumber' },
                    { input: '#userName', message: 'Kullanıcınızın gerçek adı 3-20 harften oluşabilir!', action: 'keyup', rule: 'length=3,20' },
                    { input: '#userEmail', message: 'Email adresi gerekli bir alandır!', action: 'keyup, blur', rule: 'required' },
                    { input: '#userEmail', message: 'Lütfen geçerli bir email adresi giriniz!', action: 'keyup, blur', rule: 'email' },
                    { input: '#userPassConfirm', message: 'Şifreler uyuşmuyor!', action: 'keyup, focus', rule: function (input, commit) {
                           // call commit with false, when you are doing server validation and you want to display a validation error on this field. 
                           if (input.val() === $('#userPass').val()) {
                               return true;
                           }
                           return false;
                       }
                    },
                ],
            });

            $("#confirm").jqxWindow({
                position: { left: $("#table").offset().left + 250, top: $("#table").offset().top + 35 },
                width: 270, height: 150,
                autoOpen: false,
                theme: 'energyblue',
                isModal: true,
                resizable: false,
                okButton: $('#deleteok'),
                cancelButton: $('#deletecancel'),
                initContent: function () {
                    $('#deleteok').jqxButton({
                        width: '65px',
                        theme: 'energyblue'
                    });
                    $('#deletecancel').jqxButton({
                        width: '65px',
                        theme: 'energyblue'
                    });
                    $('#deleteok').focus();
                },
            });

        });            
    </script>
<!-- end: JavaScript-->
    <style>
        .normal {
            color: black\9;
            background-color: #63be7b\9;
        }
        .admin {
            color: black\9;
            background-color: #f8696b\9;
        }
    </style>
</body>
</html>

    I saw console.log(“Delete…” + delID); but not delete event not triggered 🙁

    February 22, 2016 at 10:46 am Deleterow is not trigger… #81674

    Dimitar
    Participant

    Hi darkelf,

    With the following code:

    $(".deleteButton").on('click', function(event) {
    delID = deleteClick(event);
    $("#confirm").jqxWindow('open');
    $('#confirm').on('close', function(olay) {
        if (olay.args.dialogResult.OK) {
            $("#table").jqxDataTable('deleteRow', delID);
            console.log("Delete..." + delID);
        }
    });
    return false;
});

    you bind to the close event each time the deleteButton is clicked. This is not a correct implementation and it can lead to unexpected behaviour. Please change it to:

    $(".deleteButton").on('click', function(event) {
    delID = deleteClick(event);
    $("#confirm").jqxWindow('open');
    return false;
});

$('#confirm').on('close', function(olay) {
    if (olay.args.dialogResult.OK) {
        $("#table").jqxDataTable('deleteRow', delID);
        console.log("Delete..." + delID);
    }
});

    Please also share if any errors are thrown in your browser’s console and make sure that you are using the latest version of jQWidgets (4.0.0).

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.