jQuery UI Widgets Forums Grid Grid Update with php

Tagged: ,

This topic contains 6 replies, has 3 voices, and was last updated by  ggg 8 years, 9 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Grid Update with php #4821

    hardcode
    Member
    <!DOCTYPE html>
    <html>
    <head>
    <title>Home::Child Labour Intervention Strategies-Ghana</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <!-- ccs links-->
    <link href="../css/admin.css" rel="stylesheet" type="text/css" />
    <link href="../css/imgSlidder.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../js/jqwidgets/styles/jqx.base.css" type="text/css" />
    <!-- brings slidder on the main page-->
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/easySlider1.5.js"></script>
    <!-- gridbox, menu and validation of the forms-->
    <script type="text/javascript" src="../js/scripts/jquery-1.7.2.min.js"></script>
    <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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../js/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../js/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../js/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../js/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../js/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../js/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../js/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../js/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../js/scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getTheme();
    var url = "../phpfiles/viewAllDistrictGrid.php";
    var parentsLength = $("#realContent").parents().length;
    if (parentsLength > 3) {
    url = '../phpfiles/viewAllDistrictGrid.php';
    }
    // prepare the data
    var source =
    {
    datatype: "json",
    datafields: [
    { name: 'districtName' },
    { name: 'region'}
    ],
    id: 'districtCode',
    url: url,
    root: 'data',
    addrow: function (rowid, rowdata) {
    // synchronize with the server - send insert command
    alert("hello");
    },
    deleterow: function (rowid) {
    var data = "delete=true&districtCode=" + rowid;
    $.ajax({
    dataType: 'json',
    url: '../phpfiles/viewAllDistrictGrid.php',
    data: data,
    success: function (data, status, xhr) {
    alert("Record successufully deleted");
    }
    });
    },
    updaterow: function (rowid, rowdata) {
    var data = "update=true&districtCode="+rowid+"&districtName="+rowdata.districtName+"&region="+rowdata.region;
    $.ajax({
    dataType: 'json',
    url: '../phpfiles/viewAllDistrictGrid.php',
    data: data,
    success: function (data, status, xhr) {
    alert("Record successufully updated"); }
    });
    }
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    $("#districtGrid").jqxGrid(
    {
    width: 380,
    source: dataAdapter,
    editable: true,
    pageable: true,
    selectionmode: 'singlerow',
    theme: theme,
    columnsresize: true,
    columns: [
    { text: 'District Name', dataField: 'districtName', width: 200},
    { text: 'Region', dataField: 'region', width: 180}
    ]
    });
    $("#jqxUpdateButton").jqxButton({ width: '100', height: '25', theme: theme });
    $("#jqxDeleteButton").jqxButton({ width: '100', height: '25', theme: theme });
    // update row.
    $("#jqxUpdateButton").bind('click', function () {
    var selectedrowindex = $("#districtGrid").jqxGrid('getselectedrowindex');
    var rowscount = $("#districtGrid").jqxGrid('getdatainformation').rowscount;
    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
    var id = $("#districtGrid").jqxGrid('getrowid', selectedrowindex);
    $("#districtGrid").jqxGrid('updaterow', id);
    //$("#districtGrid").jqxGrid('ensurerowvisible', selectedrowindex);
    }
    });
    // delete row.
    $("#jqxDeleteButton").bind('click', function () {
    var selectedrowindex = $("#districtGrid").jqxGrid('getselectedrowindex');
    var rowscount = $("#districtGrid").jqxGrid('getdatainformation').rowscount;
    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
    var id = $("#districtGrid").jqxGrid('getrowid', selectedrowindex);
    $("#districtGrid").jqxGrid('deleterow', id);
    }
    });
    });
    </script>
    </head>
    <body>
    <div id="main">
    <div id="header"> <a href="index.php" class="logo">
    <div id="mainlogo"></div>
    </a>
    <!--Place menu here -->
    </div>
    <div id="middle">
    <div class="top-bar" style="border:none;">
    <h1>View all districts</h1>
    </div>
    <div class="select-bar"></div>
    <div id ="realContent" style=" margin-left:300px; height:450px;">
    <div id="districtGrid"> </div>
    <div class="select" style="margin-top:5px;">
    <table width="200" border="1" style=" border:1px #999 solid;">
    <tr >
    <td style="border:none"><input type="button" value="Update Row" id='jqxUpdateButton' /></td>
    <td style="border:none"><input type="button" value="Delete Row" id='jqxDeleteButton' /></td>
    </tr>
    </table>
    </div>
    </div>
    </div>
    <div id="footer">
    <hr />
    <p>Copyright @ Ministry of Employment And Socal Welfare-Child Labour Unit 2012::Developed by Lawrence Ameku</p>
    </div>
    </div>
    </div>
    </body>
    </html>

    Please take a look at this code, All things are working except the update. The delete is working and grid population is work. All parts of the code is working as expected but the UPDATE part does not work. It does not even call the php code. That means that when I click on the update the button the update:function is never called.
    What am i getting wrong?

    • This topic was modified 12 years ago by  hardcode.
    Grid Update with php #4833

    Peter Stoev
    Keymaster

    Hi hardcode,

    This help topic demonstrates how to implement Create, Remove and Update with jqxGrid and PHP: php-server-side-grid-crud.htm.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Grid Update with php #4847

    hardcode
    Member

    Hello Peter,

    I followed the example and came out with that code… yet i cannot see where the problem is coming from so take a loot at the code above and comment on the possible errors for me please.

    The the problem is that all other functions including the delete is working but the update and add functions are not working
    addrow: function (rowid, rowdata)
    updaterow: function (rowid, rowdata)

    please loot at these functions for ya.

    Thanks

    Grid Update with php #4906

    hardcode
    Member

    I have tried all I could and I cannot see where my problem lies. Peter Please look at this code because my head is starting to blow off. I have spent two days with this code and I cannot seem to see where the error is.
    The only problem I have is that the update: function(rowid, rowdata) is not responding. I have tried to place and alert at the very top to ensure that at least it is been called and is the fault of my php code yet the alert does not pop up.

    Peter please help me out.. please

    Grid Update with php #4908

    Peter Stoev
    Keymaster

    Hi hardcode,

    The ‘updaterow’ method of the Grid in your code is called with only 1 param – the id. However, that function requires 2 params – the id and the new data for the row. Take a look at the code called in this sample when the update button is clicked.: createremoveupdatedata.htm. In addition, in your code, you do not call the ‘addrow’ method of the Grid. In general, the Grid’s ‘addrow’, ‘deleterow’ and ‘updaterow’ methods update the Grid’s UI and also invoke the callback functions of the source object – ‘addrow’, ‘deleterow’, and ‘updaterow’ where you can synchronize the UI with a Database. In the sample from the above link, you will see that when any of the buttons is clicked, the appropriate function is being called. In the help topic I already sent you is demonstrated how to update the Database with PHP and MySQL.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Grid Update with php #4910

    hardcode
    Member

    Peter I have perfectly understood now. Indeed theory is the framework on which practice is built. You have the laid the foundation and it worked fine. Now my records are saving. I have another problem should past it or should I create a new topic as i want others to also follow because I know others are facing the same problems.
    THANK YOU

    Grid Update with php #75949

    ggg
    Participant

    Hi @peter stoev, on this example the server rendering is shown keeping virtualmode = true. When i add
    selectionmode: “multiplecellsextended”,
    option i cannot select more than 10 rows using keyboard. The error it throws is
    Uncaught TypeError: Cannot read property ‘boundindex’ of undefined

    Thank you for your help.

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

You must be logged in to reply to this topic.