jQuery UI Widgets Forums Grid can not open popup windows on grid

This topic contains 3 replies, has 2 voices, and was last updated by  Nadezhda 10 years, 3 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • can not open popup windows on grid #62137

    shaliapin777
    Participant

    Hi ALL.

    I have little grid with user list
    I need to edit this rows with popup.
    but when I click on EDIT button. it is canceling the window.
    please help me!

    this is my code:

    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 0 0 100px'});
        $('#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': 'retypepsw', 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': 'email'});
        $_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': 'Cancel', '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,
            height: fullheight,
            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', width: 150, 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 = $("#users").jqxGrid('getrowdata', editrow);
                        $("#username").val(dataRecord.username);
                        $("#password").val('');
                        $("#retypepsw").val('');
                        $("#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');
            }
        });
    }

    I do not understand what is the problem.
    P.S. no errors and no warnings in developer tools.

    can not open popup windows on grid #62165

    Nadezhda
    Participant

    Hello shaliapin777,

    Please, provide us with data or sample at JSFiddle.

    Best Regards,
    Nadezhda

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

    can not open popup windows on grid #62180

    shaliapin777
    Participant

    ok
    here is the fiddle
    http://jsfiddle.net/shaliapin777/g8q27adm/
    but I have not host to upload and add the links on the fiddle
    so the code is same as I write here

    P.S. Ket me know if you need screenshot.

    can not open popup windows on grid #62211

    Nadezhda
    Participant

    Hello shaliapin777,

    Here is your code with uploaded javascript and css links: http://jsfiddle.net/abpnja51/. Please, add html code for jqxGrid in the fiddle. You can find working functionality in Popup Editing demo .

    Best Regards,
    Nadezhda

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

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

You must be logged in to reply to this topic.