what is the mistake?

[shaliapin777Participant]

I have this code for JQSgrid

function userpage(){
    var theme = 'orange';
    var fullheight = $('#middle').height() - 20;
    fullheight += 'px';
    var $_users = $(document.createElement('div'));
    $_users.attr({'id': 'users'});
    $_users.css({margin: '0 10px'});
    $('#middle').append($_users);
    var $_popwindow = $(document.createElement('div'));
    $_popwindow.attr({id:'popupWindow'});
    var $_poptitle = $(document.createElement('div'));
    $_poptitle.html('Edit user');
    var $_popform = $(document.createElement('div'));
    $_popform.css({overflow: 'hidden'});
    var $_poptable = $(document.createElement('table'));

    var $_popusername = $(document.createElement('tr'));
    var $_popusernametd = $(document.createElement('td'));
    $_popusernametd.attr({'align': 'right'});
    $_popusernametd.html('username');
    $_popusername.append($_popusernametd);
    var $_popusernametd2 = $(document.createElement('td'));
    $_popusernametd2.attr({'align': 'left'});
    var $_popusernameinput = $(document.createElement('input'));
    $_popusernameinput.attr({'id': 'username'});
    $_popusernametd2.append($_popusernameinput);
    $_popusername.append($_popusernametd2);
    $_poptable.append($_popusername);

    var $_poppsw = $(document.createElement('tr'));
    var $_poppswtd = $(document.createElement('td'));
    $_poppswtd.attr({'align': 'right'});
    $_poppswtd.html('password');
    $_poppsw.append($_poppswtd);
    var $_poppswtd2 = $(document.createElement('td'));
    $_poppswtd2.attr({'align': 'left'});
    var $_poppswinput = $(document.createElement('input'));
    $_poppswinput.attr({'id': 'password', type: 'password'});
    $_poppswtd2.append($_poppswinput);
    $_poppsw.append($_poppswtd2);
    $_poptable.append($_poppsw);

    var $_popretypepsw = $(document.createElement('tr'));
    var $_popretypepswtd = $(document.createElement('td'));
    $_popretypepswtd.attr({'align': 'right'});
    $_popretypepswtd.html('retypepsw');
    $_popretypepsw.append($_popretypepswtd);
    var $_popretypepswtd2 = $(document.createElement('td'));
    $_popretypepswtd2.attr({'align': 'left'});
    var $_popretypepswinput = $(document.createElement('input'));
    $_popretypepswinput.attr({'id': 'password', type: 'password'});
    $_popretypepswtd2.append($_popretypepswinput);
    $_popretypepsw.append($_popretypepswtd2);
    $_poptable.append($_popretypepsw);

    var $_popemail = $(document.createElement('tr'));
    var $_popemailtd = $(document.createElement('td'));
    $_popemailtd.attr({'align': 'right'});
    $_popemailtd.html('email');
    $_popemail.append($_popemailtd);
    var $_popemailtd2 = $(document.createElement('td'));
    $_popemailtd2.attr({'align': 'left'});
    var $_popemailinput = $(document.createElement('input'));
    $_popemailinput.attr({'id': 'password'});
    $_popemailtd2.append($_popemailinput);
    $_popemail.append($_popemailtd2);
    $_poptable.append($_popemail);

    var $_popsabecancel = $(document.createElement('tr'));
    var $_popsabecanceltd = $(document.createElement('td'));
    $_popsabecanceltd.attr({'align': 'right'});
    $_popsabecancel.append($_popsabecanceltd);
    var $_popsabecanceltd2 = $(document.createElement('td'));
    $_popsabecanceltd2.attr({'align': 'right'});
    $_popsabecanceltd2.css({
        'padding-top': '10px'
    });
    var $_popsaveinput = $(document.createElement('input'));
    $_popsaveinput.attr({'id': 'Save', 'type': 'button', 'value': 'Save'});
    $_popsaveinput.css({'margin-right': '5px'});
    $_popsabecanceltd2.append($_popsaveinput);

    var $_popcancelinput = $(document.createElement('input'));
    $_popcancelinput.attr({'id': 'button', 'type': 'button', 'value': 'button'});
    $_popcancelinput.css({'margin-right': '5px'});
    $_popsabecanceltd2.append($_popcancelinput);
    $_poptable.append($_popsabecanceltd2);

    $_popform.append($_poptable);
    $_popwindow.append($_poptitle);
    $_popwindow.append($_popform);
    $_popwindow.append($_popwindow);
    $('#middle').append($_popwindow);

    var usersinfo = [];
    for(var i=0; i < Users.length;i++){
        usersinfo.push({
            id: Users[i].id,
            username: Users[i].username,
            password: '******',
            email: Users[i].email
        });
    }

    var source = {
        localdata: usersinfo,
        datatype: "array",
        datafields: [
            { name: 'id', type: 'number' },
            { name: 'username', type: 'string'},
            { name: 'password', type: 'string'},
            { name: 'email', type: 'string'}
        ],
        updaterow: function (rowid, rowdata, commit) {
            for(var i=0;i<users.length;i++) {
                if (users[i].id == rowdata.id) {
                    users[i].username = rowdata.username;
                    users[i].password = rowdata.password;
                    users[i].email = rowdata.email;
                    break;
                }
            }
            commit(true);
        }
    };

    // initialize the input fields.
    $("#username").jqxInput({ theme: theme });
    $("#password").jqxInput({ theme: theme });
    $("#retypepsw").jqxInput({ theme: theme });
    $("#email").jqxInput({ theme: theme });

    $("#username").width(150);
    $("#username").height(23);
    $("#password").width(150);
    $("#password").height(23);
    $("#retypepsw").width(150);
    $("#retypepsw").height(23);
    $("#email").width(150);
    $("#email").height(23);

    var dataAdapter = new $.jqx.dataAdapter(source);
    var editrow = -1;

    // initialize jqxGrid
    $("#users").jqxGrid({
        width: 850,
        source: dataAdapter,
        pageable: true,
        autoheight: true,
        columns: [
            { text: 'ID', datafield: 'id', editable: false, width: 50 },
            { text: 'Username', datafield: 'username', width: 150 },
            { text: 'Password', datafield: 'password', width: 150 },
            { text: 'Email', datafield: 'email', width: 200 },
            { text: 'Edit', datafield: 'Edit', columntype: 'button', cellsrenderer: function () {
                return "Edit";
                }, buttonclick: function (row) {
                    // open the popup window when the user clicks a button.
                    editrow = row;
                    var offset = $("#users").offset();
                    $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });

                    // get the clicked row's data and initialize the input fields.
                    var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                    $("#username").val(dataRecord.username);
                    $("#password").val(dataRecord.password);
                    $("#retypepsw").val(dataRecord.retypepsw);
                    $("#email").val(dataRecord.email);

                    // show the popup window.
                    $("#popupWindow").jqxWindow('open');
                }
            }
        ]
    });

    // initialize the popup window and buttons.
    $("#popupWindow").jqxWindow({
        width: 250, resizable: false,  isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01
    });

    $("#popupWindow").on('open', function () {
        $("#username").jqxInput('selectAll');
    });

    $("#Cancel").jqxButton({ theme: theme });
    $("#Save").jqxButton({ theme: theme });

    // update the edited row when the user clicks the 'Save' button.
    $("#Save").click(function () {
        if (editrow >= 0) {
            var row = { username: $("#username").val(), password: $("#password").val(), retypepsw: $("#retypepsw").val(), email: $("#email").val()};
            var rowID = $('#users').jqxGrid('getrowid', editrow);
            $('#users').jqxGrid('updaterow', rowID, row);
            $("#popupWindow").jqxWindow('hide');
        }
    });
}

please help me
this code do not work.

this is full function
I`m trying to create grid from araay

Users = [
{“id”:”1″,”username”:”shako”,”email”:”shalvasoft@gmail.com”},
{“id”:”2″,”username”:”siteadmin”,”email”:”admin@lingo.ge”}
];

and update this array with popup
but nothing is working

please help.
I do not understand what is the issue.

[DimitarParticipant]

Hello shaliapin777,

Please make sure that the function userpage() is called inside $(document).ready() and that you have included references to all the necessary jQWidgets JavaScript and CSS files. Also, if you receive some error in the browser console, please share it with us so that we may better understand the source of the issue.

Best Regards,
Dimitar

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

[shaliapin777Participant]

http://a.pix.ge/b/jsknf.jpg

this is the screenshot of my page
the error text is

Uncaught Error: Invalid jQuery Selector – #retypepsw! Please, check whether the used ID or CSS Class name is correct.
on core.js on line 7
.
please help me.
and if you can
please creat new html file like this function for me

I need add/delete and update concret row

I do not understand rely.
please help!

[DimitarParticipant]

Hello shaliapin777,

This means there is no element with id retypepsw (which you are trying to initialize a jqxInput from) on your HTML page (in the DOM). Maybe the id in the HTML is something similar or there is no such element at all.

Best Regards,
Dimitar

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

[Author]

Posts