jQWidgets Forums

jQuery UI Widgets Forums Grid Grid-Popup edit- save

This topic contains 1 reply, has 1 voice, and was last updated by  Keshavan 10 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Grid-Popup edit- save #70577

    Keshavan
    Participant

    Hi,

    ‘Save’ is not responding to click event and I am getting below mentioned error,

    “Uncaught Error: Invalid Selector – #personnelId! Please, check whether the used ID or CSS Class name is correct. – jqxcore.js:7”.

    I checked my code and the selector exists, Please help , jqwidgets ver 3.7.

    I have pasted the code below.

    Thanks,
    Keshavan

    <html lang="en">
    <head>
        <title id='Description'>
            In order to enter in edit mode, click any of the 'Edit' buttons. To save the changes, click the 'Save' button in the popup dialog. To cancel the changes
            click the 'Cancel' button in the popup dialog.
        </title>
        <link rel="stylesheet" href="/Content/Site.css" type="text/css" />
        <link rel="stylesheet" href="/jqWidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="/jqWidgets/jqwidgets/styles/jqx.ui-sunny.css" type="text/css" />
        <script type="text/javascript" src="/JqWidgets/scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.grouping.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.aggregates.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.columnsreorder.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxgrid.columnsreorder.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxvalidator.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxnumberinput.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="/JqWidgets/scripts/check_browser_close.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                theme = 'ui-sunny';
                var data = {};
                var n1 = 0;
                var editrow = -1;
                var dataSource = ["Male", "Female", "SheMale"];
                $("#addrowbutton").jqxButton({ width: '35', height: '30', theme: 'ui-sunny' });
                $("#deleterowbutton").jqxButton({ width: '35', height: '30', theme: 'ui-sunny' });
                $("#resizebutton").jqxButton({ width: '80', height: '30', theme: 'ui-sunny' });
                $("#sex").jqxDropDownList({ source: dataSource, width: '70%', height: 20 });
                $("#Save").jqxButton({ theme: 'ui-sunny' });
                $("#Cancel").jqxButton({ theme: 'ui-sunny' });
                var generaterow = function (id) {
                    var row = {};
                    row["PersonnelId"] = id;
                    row["EmployeeCode"];
                    row["Name"];
                    row["Sex"];
                    row["EmailId"];
                    row["Mobile"];
                    row["rating"] = 0;
                    row["ResidenceZip"];
                    row["CommPercent"];
                    return row;
                }
                var source =
                {
                    datatype: "json",
                    datafields:
                    [
                        { name: 'PersonnelId' },
                        { name: 'EmployeeCode', type: 'string' },
                        { name: 'Name', type: 'string' },
                        { name: 'Sex', type: 'string' },
                        { name: 'EmailId', type: 'string' },
                        { name: 'Mobile', type: 'string' },
                        { name: 'rating', type: 'number' },
                        { name: 'ResidenceZip', type: 'string' },
                        { name: 'CommPercent', type: 'number' }
                    ],
                    id: 'PersonnelId',
                    url: '/Personnel/GetPersonnels',
                    async: false,
                    addrow: function (rowid, rowdata, position, commit) {
                        // synchronize with the server - send insert command
                        $.ajax
                            ({
                                cache: false,
                                dataType: 'json',
                                url: '/Personnel/Add',
                                data: rowdata,
                                type: "POST",
                                success: function (data, status, xhr) {
                                    // insert command is executed.
                                    commit(true);
                                    //      $('#n1').val(data.GroupCompanyId);
                                    //        alert("n1 value is " + n1);
                                },
                                error: function (jqXHR, textStatus, errorThrown) {
                                    alert("err Occured  " + errorThrown);
                                    commit(false);
                                }
                            });
                    },
                    updaterow: function (rowid, rowdata, commit) {
                        // synchronize with the server - send update command
                        {
                            $.ajax(
                                     {
                                         cache: false,
                                         dataType: 'json',
                                         url: '/Personnel/Update',
                                         data: rowdata,
                                         type: "POST",
                                         success: function (data, status, xhr) {
                                             // update command is executed.
                                             //   alert(success);
                                             //      alert(xhr.responseText);
                                             alert("entry saved!");
                                             console.log(xhr.rowdata);
                                             commit(true);
                                         },
                                         error: function (jqXHR, textStatus, errorThrown) {
                                             alert("Fails ... ");
                                             commit(false);
                                         }
                                     }
                                 );
                        }
                    }
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: '80%',
                    height: 270,
                    source: dataAdapter,
                    theme: 'ui-sunny',
                    pageable: true,
                    sortable: true,
                    filterable: true,
                    groupable: true,
                    columnsresize: true,
                    columnsreorder: true,
                    //   autoheight: true,
                    enabletooltips: true,
                    selectionmode: 'multiplecellsadvanced',
                    columns:
                    [
                    {
                        text: 'Select', datafield: 'select', columntype: 'button', width: '15%', cellsrenderer: function () {
                            return "select";
                        }, buttonclick: function (row) {
                            // open the popup window when the user clicks a button.
                            editrow = row;
                            var offset = $("#jqxgrid").offset();
                            $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 145, y: parseInt(offset.top) + (-65) } });
                            // get the clicked row's data and initialize the input fields.
                            var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                            $("#personnelId").val(dataRecord.PersonnelId);
                            $("#employeeCode").val(dataRecord.EmployeeCode);
                            $("#name").val(dataRecord.Name);
                            $("#sex").val(dataRecord.Sex);
                            $("#emailId").val(dataRecord.EmailId);
                            $("#mobile").val(dataRecord.Mobile);
                            $("#rating").jqxNumberInput({ decimal: dataRecord.rating });
                            $("#residenceZip").val(dataRecord.ResidenceZip);
                            $("#commPercent").val(dataRecord.CommPercent);
                            // show the popup window.
                            $("#popupWindow").jqxWindow('open');
                        }
                    },
                      { text: 'Name', datafield: 'Name', width: 250 },
                      { text: 'Employee Id', datafield: 'EmployeeCode', width: 100 },
                      { text: 'Sex', datafield: 'Sex', width: 80 },
                      { text: 'EmailId', datafield: 'EmailId', width: 250 },
                      { text: 'Mobile', datafield: 'Mobile', width: 110 },
                      { text: 'Rating / 5', datafield: 'rating', width: 100 },
                      { text: 'Zip code', datafield: 'ResidenceZip', width: 100 },
                      { text: '% Commision', datafield: 'CommPercent', width: 100 }
                    ]
                });
                $("#addrowbutton").bind('click', function () {
                    var datainformation = $("#jqxgrid").jqxGrid('getdatainformation');
                    var rowscount = datainformation.rowscount;
                    editrow = rowscount + 1;
                    var datarow = generaterow(rowscount + 1);
                    $("#jqxgrid").jqxGrid('addrow', (rowscount + 1), generaterow(), 'top');
                });
                $("#resizebutton").click(function () {
                    $("#jqxgrid").jqxGrid('autoresizecolumns');
                });
                $("#popupWindow").jqxWindow({
                    width: '30%', resizable: false, theme: 'ui-sunny', isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01
                });
                $("#personnelId").jqxInput({ theme: 'ui-sunny' });
                $("#employeeCode").jqxInput({ theme: 'ui-sunny' });
                $("#name").jqxInput({ theme: 'ui-sunny' });
                $("#emailId").jqxInput({ theme: 'ui-sunny' });
                $("#mobile").jqxInput({ theme: 'ui-sunny' });
                $("#rating").jqxNumberInput({ theme: 'ui-sunny' });
                $("#residenceZip").jqxInput({ theme: 'ui-sunny' });
                $("#commPercent").jqxInput({ theme: 'ui-sunny' });
                $("#personnelId").width('100%');
                $("#personnelId").height(20);
                $("#employeeCode").width('100%');
                $("#employeeCode").height(20);
                $("#name").width('100%');
                $("#name").height(20);
                $("#sex").width('100%');
                $("#sex").height(20);
                $("#emailId").width('100%');
                $("#emailId").height(20);
                $("#mobile").width('100%');
                $("#mobile").height(20);
                $("#rating").jqxNumberInput({ width: '50%', height: 29, min: 1, max: 5, value: 1, inputMode: 'simple', theme: theme, decimalDigits: 0, spinButtons: true });
                $("#residenceZip").width('100%');
                $("#residenceZip").height(20);
                $("#commPercent").width(250);
                $("#commPercent").height(20);
                $("#popupWindow").on('open', function () {
                    $("#personnelId").jqxInput('selectAll');
                });
                $('#testForm').jqxValidator({
                    rules: [
                               { input: '#employeeCode', message: 'Employee code is required!', action: 'keyup, blur', rule: 'required' },
                               { input: '#employeeCode', message: 'Employee code must be between 5 and 10 characters!', action: 'keyup, focus', rule: 'length=5,10' },
                               { input: '#name', message: 'Name is required!', action: 'keyup, blur', rule: 'required' },
                               { input: '#name', message: 'Name must be between 5 and 50 characters!', action: 'keyup, focus', rule: 'length=5,50' },
                               { input: '#emailId', message: 'Description must be between 15 and 50 characters', action: 'keyup, focus', rule: 'email' },
                               { input: '#mobile', message: 'Mobile No is required!', action: 'keyup, blur', rule: 'required' },
                               { input: '#mobile', message: 'Mobile No must be between 10 and 15 characters!', action: 'keyup, focus', rule: 'length=10,15' },
                               { input: '#residenceZip', message: 'Residence Zipcode is required!', action: 'keyup, blur', rule: 'required' },
                               { input: '#residenceZip', message: 'Residence Zipcode No must be between 6 and 10 characters!', action: 'keyup, blur', rule: 'length=6,10' },
                               { input: '#commPercent', message: 'Sales Commision is required!', action: 'keyup, blur', rule: 'required' },
                               { input: '#commPercent', message: 'Sales Commision must be between 1 and 4 characters!', action: 'keyup, blur', rule: 'length=1,4' },
                    ]
                });
                $("#Cancel").click(function () {
                    $('#testForm').jqxValidator('hide');
                });
                $('#Save').bind('click', function () {
                    $('#testForm').jqxValidator('validate');
                });
                var result = false;
                // update the edited row when the user clicks the 'Save' button.
                $("#Save").click(function () {
                    if (editrow >= 0) {
                        result = $('#testForm').jqxValidator('validate');
                        if (result == true) {
                            row =
                            {
                                PersonnelId: $("#personnelId").val(), EmployeeCode: $("#employeeCode").val(), Name: $("#name").val(),
                                Sex: $("#sex").val(), EmailId: $("#emailId").val(), Mobile: $("#mobile").val(), rating: parseInt($("#rating").jqxNumberInput('decimal')),
                                ResidenceZip: $("#residenceZip").val(), CommPercent: $("#commPercent").val()
                            };
                            var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
                            $('#jqxgrid').jqxGrid('updaterow', rowID, row);
                            $("#popupWindow").jqxWindow('hide');
                        }
                    }
                });
            });
        </script>
    </head>
    
    <body class='default'>
        <div>
            <input id="addrowbutton" type="button" style="margin-top: 1px;" value="(+)" />
            <input id="deleterowbutton" type="button" style="margin-top: 1px;" value="(-)" />
            <input id="resizebutton" type="button" style="margin-top: 1px;" value="Resize" />
        </div>
        <div id='jqxWidget'>
            <div id="jqxgrid"></div>
            <div id="popupWindow">
                <div>Edit</div>
                <div style="overflow: hidden;">
                    <form id="testForm" action="./">
                        <table>
                            <tr>
                                <td style="text-align:right">Id:</td>
                                <td style="text-align:left">
                                    <div id="personnelid"> </div>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align:right">Employee Id:</td>
                                <td style="text-align:left">
                                    <input type="text" id="employeeCode" class="text-input" placeholder="Employee code" autofocus required />
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align:right">Name:</td>
                                <td style="text-align:left">
                                    <input type="text" id="name" class="text-input" placeholder="Employee name" required />
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align:right">Sex:</td>
                                <td style="text-align:left">
                                    <div type="text" id="sex"></div>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align:right">EmailId:</td>
                                <td style="text-align:left">
                                    <input type="text" id="emailId" class="text-input" placeholder="Employee emailId" required />
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align:right">Mobile:</td>
                                <td style="text-align:left">
                                    <input type="text" id="mobile" class="text-input" placeholder="Employee mobile" required />
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align:right">Rating / 5 :</td>
                                <td style="text-align:left">
                                    <div type="text" id="rating"></div>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align:right">Zip:</td>
                                <td style="text-align:left">
                                    <input type="text" id="residenceZip" class="text-input" placeholder="Employee residence zip code" required />
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align:right">Sales Commision:</td>
                                <td style="text-align:left">
                                    <input id="commPercent" class="text-input" placeholder="Sales Commision(%)" required />
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align:right"></td>
                                <td style="padding-top: 10px;" align="right">
                                    <input id="Save" style="margin-right: 5px;" type="button" value="Save" />
                                    <input id="Cancel" type="button" value="Cancel" />
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </body>
    </html>
    Grid-Popup edit- save #70580

    Keshavan
    Participant

    Hi,

    Please Ignore post, issue is sorted and there was a typo err in code.

    Thanks,
    Keshavan

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

You must be logged in to reply to this topic.