jQWidgets Forums

Tagged: grid, jqxgrid, mysql, php, row, send to mysql, update, update grid row, updaterow

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

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

Author

Updating grid row and saving to mysql Posts

February 22, 2015 at 9:33 pm Updating grid row and saving to mysql #67452

Participant

I’ve setuped a grid that is empty at the beginning but where I can add row and update it via a popup windows. I need to be able to add new row which is working and update data in them which is not working. The popup window open, I add the data then save but nothing apear in the grid.
I also need that data to be sent to a php engine which will update a mysql table.

<!DOCTYPE html>
<?php
include "../../db-local.php";  //validation usager
?>

<html lang="fr">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
  <link rel="stylesheet" href="../../java/jqwidgets-3.6/jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../java/jqwidgets-3.6/jqwidgets/styles/jqx.classic.css" type="text/css" />
  <script type="text/javascript" src="../../java/jquery-1.11/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxcore.js"></script>
  <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxbuttons.js"></script>
  <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxscrollbar.js"></script>
  <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxmenu.js"></script>
  <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxcheckbox.js"></script>
  <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxlistbox.js"></script>
  <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxdropdownlist.js"></script>
  <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxgrid.js"></script>
  <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxgrid.selection.js"></script>
  <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxgrid.edit.js"></script>
  <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxdata.js"></script>
  <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxwindow.js"></script>
  <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxinput.js"></script>
  <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxnumberinput.js"></script>
  
<script type="text/javascript">
$(document).ready(function () {
	$("#Button5").jqxLinkButton({ width: '200', height: '28'});
	var generaterow = function (i) {
        var row = {};
        row["no_facture"] = "";
        row["code_prod"] = "";
        row["qtt"] = "";
        row["descrip"] = "";
        row["no_lot"] = "";
        return row;
    }
        var url = "../moteur/index.php";
        // prepare le data pour liste des clients
        var source =
        {
            datatype: "json",
            type:	"POST",
            datafields: [
                { name: 'nocli' },
                { name: 'nom' }
            ],
            url: url,
            async: false,
            data: {
        		select: true,
        		dbase: "client",
        		numrow: "*",
        		filtre: "-",
        		ordre: "nom desc",
            	field: "nom,nocli"
        	}
        };
        var dataAdapter = new $.jqx.dataAdapter(source);

        // Creer une jqxDropDownList des clients
        $("#jqxWidget").jqxDropDownList({
            source: dataAdapter,
            displayMember: "nom",
            valueMember: "nocli",
            width: 200,
            height: 25,
            placeHolder: "Choisir le client"
        });
        
       // Initialiser la fenetre popup
        $("#lepopup").jqxWindow('hide');

        // prepare la grille qui s'affiche si on selectionne un item de la liste
        $("#jqxWidget").on('select', function (event)
        		{
        			// get client's ID.
        		  var nocli = event.args.item.value;
					// deuxieme dataadapter pour la grille
      			  var source2 =
       				 {
          				  datatype: "json",
           				  type:	"POST",
            			  datafields: [
               				 { name: 'nocli' },
              				 { name: 'no_facture' },
               				 { name: 'code_prod' },
                			 { name: 'qtt' },
               				 { name: 'descrip' },
               				 { name: 'no_lot' }
            			  ],
            			  url: url,
           				  async: false,
           				  updaterow: function (rowid, rowdata, commit) {
              				// synchronize with the server - send insert command
                              var data = "insert=true&dbase=retour_client&no_facture=" + rowdata.no_facture.val() + "&nocli=" + nocli + "&code_prod=" + rowdata.code_prod.val();
                              data = data + "&qtt=" + rowdata.qtt.val() + "&descrip=" + rowdata.descrip.val() + "&no_lot=" + rowdata.no_lot.val();
							
                              $.ajax({
                                  dataType: 'json',
                                  url: '../moteur/index.php',
                                  data: data,
                                  success: function (data, status, xhr) {
                                      // insert command is executed.
                                      commit(true);
                                  },
                                  error: function () {
                                      // cancel changes.
                                      commit(false);
                                  }
                              });
                  		}
        			};
					var dataAdapter2 = new $.jqx.dataAdapter(source2);
					
        			// initializer les champs du questionnaire.
                  $("#nofacture").jqxInput({ theme: 'classic', width: 150, height: 23 });
                  $("#nolot").jqxInput({ theme: 'classic', width: 150, height: 23 });
                  $("#codeprod").jqxInput({ theme: 'classic', width: 150, height: 23 });
                  $("#quantite").jqxNumberInput({ spinMode: 'simple', width: 150, height: 23, min: 0, decimalDigits: 0, spinButtons: false });
                  $("#cause").jqxInput({ theme: 'classic', width: 250, height: 23 });

         			
         			var editrow = 0;
         			
   					// initialiser la grille des items retournes
   					$("#jqxgrid").jqxGrid({
   					width: 850,
   					columns: [
   	                  { text: 'No Facture', dataField: 'no_facture', width: 80 },
   	                  { text: 'No Lot', dataField: 'no_lot', width: 60 },
   	                  { text: 'Code Produit', dataField: 'code_prod', width: 90 },
   	                  { text: 'Quantite', dataField: 'qtt', width: 70 },
   	                  { text: 'Cause', dataField: 'descrip', width: 450 },
      	              { text: 'Editer', datafield: 'Edit', width: 50, columntype: 'button', cellsrenderer: function () {
                           return "Editer";
                           },
                           buttonclick: function (row) {
                           // open the popup window when the user clicks a button.
                           editrow = row;
                           var offset = $("#jqxgrid").offset();
                           $("#lepopup").jqxWindow({ position: { x: parseInt(offset.left) + 80, y: parseInt(offset.top) + 80 } });
                           // get the clicked row's data and initialize the input fields.
                           var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                           $("#nofacture").val(dataRecord.no_facture);
                           $("#nolot").val(dataRecord.no_lot);
                           $("#codeprod").val(dataRecord.code_prod);
                           //$("#quantite").jqxNumberInput({ decimal: dataRecord.qtt });
                           $("#quantite").jqxNumberInput({ decimal: dataRecord.qtt});
                           $("#cause").val(dataRecord.descrip);
                           // show the popup window.
                           $("#lepopup").jqxWindow('open');
                       	   }
                       }
   	              	 ],
   					source: dataAdapter2
   	   				});
			
     	 			 // initialiser la fenetre d'edition .
        			$("#lepopup").jqxWindow({
         				width: 370, resizable: true,  isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01
        			});
        			$("#lepopup").on('open', function () {
           				$("#nofacture").jqxInput('selectAll');
       				});
     
        			$("#Cancel").jqxButton({ theme: 'classic' });
        			$("#Save").jqxButton({ theme: 'classic' });
        			// update the edited row when the user clicks the 'Save' button.
        			$("#Save").click(function () {
            			if (editrow >= 0) {
                			var row = { no_facture: $("#nofacture").val(), no_lot: $("#nolot").val(), code_produit: $("#codeprod").val(),
                   		 		quantite: parseInt($("#quantite").jqxNumberInput('decimal')), description: $("#cause").val()
                			};
                			var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
                			$('#jqxgrid').jqxGrid('updaterow', rowID, row);
                			$("#lepopup").jqxWindow('hide');
            			}
        			});
    		});
		
        	$('#addrowbutton').click(function () {
       		 // creer nouveau rang dans la grille.
                var datarow = generaterow();
                var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
                //ouvrir le popup
            	$('#lepopup').jqxWindow('open');
        	});

});
</script>
  
</head>
<body class="default">

<div id="jqxWidget" style="font-size: 13px; font-family: verdana; float: left;">
<br>
</div>

		<div style="margin-left: 30px; float: left;">
			<div>
				<input id="addrowbutton" type="button" value="Ajouter" />
				<input id="deleterowbutton" type="button" value="Effacer" />
			</div>
		</div>
<br><br>
<div id="jqxgrid"></div>
<div style="float: left;" id="selectionlog">
	</div>
<div id="lepopup">
            
            <div style="overflow: hidden;">
                <table>
                <th><td colspan="2" align="center">
                Compléter la grille
                </td></th>
                    <tr>
                        <td align="right">No_Facture:</td>
                        <td align="left"><input id="nofacture" /></td>
                    </tr>
                    <tr>
                        <td align="right">No_Lot:</td>
                        <td align="left"><input id="nolot" /></td>
                    </tr>
                    <tr>
                        <td align="right">Code_Produit:</td>
                        <td align="left"><input id="codeprod" /></td>
                    </tr>
                    <tr>
                        <td align="right">Quantite:</td>
                        <td align="left"><input id="quantite"></td>
                    </tr>
                    <tr>
                        <td align="right">Description:</td>
                        <td align="left"><input id="cause"></td>
                    </tr>
                    <tr>
                        <td align="right"></td>
                        <td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /></td>
                    </tr>
                </table>
            </div>
       </div>
<div><a style='margin: 25px;' target="_blank" href="../menu.php" id='Button5'>Retour au menu</a>
</div>
</body>
</HTML>

Can’t find why it is not working. The best I can get is ‘undefined’ for the value I pas to the hphp engine

February 23, 2015 at 8:10 am Updating grid row and saving to mysql #67474

Dimitar

Participant

Hello claudegel,

Please take a look at the tutorial Build CRUD Web App with jqxGrid using PHP and MySQL which shows how to correctly implement the updaterow functionality, among others.

Best Regards,
Dimitar

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

February 24, 2015 at 2:01 am Updating grid row and saving to mysql #67538

claudegel

Participant

Thanks will take a look and let you know

Author

Posts

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

You must be logged in to reply to this topic.