jQuery UI Widgets Forums DataTable Deleterow is not trigger…

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • 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 ­čÖü

    • This topic was modified 7 years, 9 months ago by  darkelf.
    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/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.