jQWidgets Forums
Forum Replies Created
-
Dear Peter,
Thanks for your advice and hints which I now have implemented into my code. But after i did so it still didn’t work and the rows didn’t got updated. To be frankly I was too embarrased to ask you again and started to use firebug for debugging and looking into my code and the example code.The result: nothing. Everything was exactly the same, down to the javascript low level calls. No problems , all variabels matched, the functions called in both codes where exactly the same and everything was propperly poppulated. After pretty much despair and banging my head into the wall several times a day i finally found it.
Remember I stated that I combined both examples found in the jqwidget website for crud php connections and the modal window example. So I investigated both examples and found a remarkable difference naming that in the crud example there is a statement called : “id: ‘EmployeeID’ ” which isn’t present in the modal popup example. Because it is Monkey see Monkey do I used this statement in my code as well.
After removing this part of the code *poof* everything worked like a charm meaning I could have a nice X mas with my family together
(and not beeing grumpy).I still haven’t experienced new problems but have to ask you wath the function is in the var source = variable regarding the “id:” variable. I couldnt got this information from the explanation on the crud page. If it is something important please state so and please give advice how to get the code properly implemented.
I hope this post will be very usefull for other people because it is so very natural to combine the crud grid together with the modal popup functionality.
I updated the code for further reference:
<?phpinclude("../../pdo_dbconnect.php"); //Connection to databasescript?><!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="./jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="./jqwidgets/jqwidgets/styles/jqx.classic.css" type="text/css" /> <link rel="stylesheet" href="./jqwidgets/jqwidgets/styles/opmaakeditform.css" type="text/css" /> <script type="text/javascript" src="./jqwidgets/scripts/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="./jqwidgets/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="./jqwidgets/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="./jqwidgets/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="./jqwidgets/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="./jqwidgets/jqwidgets/jqxmenu.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.grouping.js"></script> <script type="text/javascript" src="./jqwidgets/jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="./jqwidgets/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="./jqwidgets/jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="./jqwidgets/jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="./jqwidgets/jqwidgets/globalization/jquery.global.js"></script> <script type="text/javascript" src="./jqwidgets/scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var data = {}; var theme = 'classic'; var source = { datatype: "json", datafields: [ { name: 'ARTIKEL_ID'}, { name: 'ARTIKEL_CODE'}, { name: 'ARTIKEL_STATUS'}, { name: 'Edit'}, ], //id: 'ARTIKEL_ID', Dont include this paramter url: 'connectie_artikel.php', updaterow: function (rowid, rowdata, commit) { // synchronize with the server - send update command var data = "update=true&" + $.param(rowdata); $.ajax({ dataType: 'json', url: 'connectie_artikel.php', data: data, success: function (data, status, xhr) { // update command is executed. commit(true); } }); } }; // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 600, height: 400, source: source, editable: true, theme: theme, columns: [ { text: 'Id', datafield: 'ARTIKEL_ID', width: 40 }, { text: 'Code', datafield: 'ARTIKEL_CODE', width: 100 }, { text: 'Status', datafield: 'ARTIKEL_STATUS', width: 120 }, { text: 'Edit', columntype: 'button', cellsrenderer: function () { return "Edit"; }, buttonclick: function (row) { // open the popup window when the user clicks a button. editrow = row; var offset = $("#jqxgrid").offset(); $("#EditFormulier").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); $("#artikel_id").val(dataRecord.ARTIKEL_ID); $("#artikel_code").val(dataRecord.ARTIKEL_CODE); $("#artikel_status").val(dataRecord.ARTIKEL_STATUS); // show the popup window. $("#EditFormulier").jqxWindow('show'); } }, ] }); // initialize the popup window and buttons. $("#EditFormulier").jqxWindow({ width: 800, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 }); $("#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 = { ARTIKEL_ID: $("#artikel_id").val(), ARTIKEL_CODE: $("#artikel_code").val(), ARTIKEL_STATUS: $("#artikel_status").val() }; $('#jqxgrid').jqxGrid('updaterow', editrow, row); $("#EditFormulier").jqxWindow('hide'); } }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div style="float: left;" id="jqxgrid"> </div> <div id="EditFormulier"> <div>Edit</div> <div style="overflow: hidden;"> <div class="formeditgroup2"> <div class="formeditgroup1"> <fieldset> <div class="formedittext">Id:</div> <div class="formeditinput"><input disabled="disabled" size="4" id="artikel_id" /></div> <div class="formedittext">Code:</div> <div class="formeditinput"><input size="10" id="artikel_code" /></div> <div class="formedittext">Status:</div> <div class="formeditinput"><input size="10" id="artikel_status" /> </div> </fieldset> </div> <div class="formeditgroup1"> <fieldset> <div> <input style="margin-right: 5px;" type="button" id="Save" value="Save" /> <input id="Cancel" type="button" value="Cancel" /> </div> </fieldset> </div> </div> </div> </div></body></html>