jQuery UI Widgets Forums DataTable update doesn't work

This topic contains 4 replies, has 2 voices, and was last updated by  cpuin 9 years, 3 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • update doesn't work #67104

    cpuin
    Participant

    I have no idea why addRow doesn’t work:

    
    
    	<script type="text/javascript">
    		$(document).ready(function () {			   
    				
    				
    	// CREATE TABLE ------------------------------------------------------------------------------------
    			
    			function createTable() {
    			
    			var source =
    						{
    							datatype: "json",
    							datafields: [
    								{ name: 'ID', type: 'int'},
    								{ name: 'Acct', type: 'int'},
    								{ name: 'PartnerID' , type: 'string'},
    								{ name: 'ObjectID' , type: 'string'},
    								{ name: 'Date' , type: 'string'}
    							],
    							url: url,
    							cache: false,
    							addRow: function (rowID, rowData, position, commit) {
    							           var data = "insert=true&" + $.param(rowData);
    							           $.ajax({
    							               dataType: 'json',
    							               url: 'json_documents.php',
    							               cache: false,
    							               data: data,
    							               success: function (data, status, xhr) {
    							                   // update command is executed.
    							                   commit(true);
    							               },
    							               error: function (jqXHR, textStatus, errorThrown) {
    							                   commit(false);
    							                   alert('Does not work :(');
    							                   }
    							                  });
    							                },
    							updateRow: function (rowID, rowData, commit) {
    									   var data = "" + $.param(rowData);
    									   $.ajax({
    										   dataType: 'json',
    										   url: '',
    										   cache: false,
    										   data: data,
    										   success: function (data, status, xhr) {
    											   // update command is executed.
    											   commit(true);
    										   },
    										   error: function (jqXHR, textStatus, errorThrown) {
    											   commit(false);
    											   alert('Does not work :(');
    											   }
    											  });
    											},
    							deleteRow: function (rowID, commit) {
    												// synchronize with the server - send delete command
    												// call commit with parameter true if the synchronization with the server is successful 
    												// and with parameter false if the synchronization failed.
    												commit(true);
    											}
    						};
    						
    				 var dataAdapter = new $.jqx.dataAdapter(source);
    				 
    				 $("#dataTable").jqxDataTable(
    				 {
    					 width: 650,
    					 pageable: true,
    					 pagerButtonsCount: 10,
    					 source: dataAdapter,
    					 filterable: true,
    					 filtermode: 'simple',
    					 sortable: true,
    					 columnsResize: false,
    					 altRows: true,
    					 showAggregates: false,
    					 aggregatesHeight: 60,
    					 columns: [
    						 { text: 'Продажба', dataField: 'Acct', width: 100 },
    						 { text: 'Обект:', dataField: 'ObjectID', cellsFormat: 'f', width: 150 },
    						 { text: 'Партньор:', dataField: 'PartnerID', width:250},
    						 { text: 'Дата:', dataField: 'Date' , width: 150}
    						 ]
    						 
    				 });
    			
    			}
    	// END CREATE TABLE ----------------------------------------------------------------------------------
    	
    //END-----------------------------------------------------------------------------------------------
    			
    			$("#startDate").jqxDateTimeInput({width: '100px', height: '25px', formatString: "yyyy-MM-dd"});
    		   		
    		   		
    		   		$("#endDate").jqxDateTimeInput({width: '100px', height: '25px', formatString: "yyyy-MM-dd"});
    		   		
    		   		$("#submitButton").jqxButton({width: '100px', height: '25px'});
    		   		$("#submitButton").mousedown(function() {
    		   					var start = $('#startDate').val();
    		   					var end = $('#endDate').val();
    		   					
    		   					//check which arguments are selected
    		   					
    		   					url = 'json_documents.php?' + "startDate=" + start + "&endDate=" + end;
    		   									createTable();
    		   									//window.alert(url);
    		   					
    		   					
    		   		});
    		   		
    		   		
    		   		//$('#joinall').jqxCheckBox({ width: 130 });
    		   
    		   		
    		   		
    		   		$("#excelExport").jqxButton();
    		   					$("#xmlExport").jqxButton();
    		   					$("#csvExport").jqxButton();
    		   					$("#tsvExport").jqxButton();
    		   					$("#htmlExport").jqxButton();
    		   					$("#jsonExport").jqxButton();
    		   					$("#excelExport").click(function () {
    		   						$("#dataTable").jqxDataTable('exportData', 'xls');
    		   					});
    		   					$("#xmlExport").click(function () {
    		   						$("#dataTable").jqxDataTable('exportData', 'xml');
    		   					});
    		   					$("#csvExport").click(function () {
    		   						$("#dataTable").jqxDataTable('exportData', 'csv');
    		   					});
    		   					$("#tsvExport").click(function () {
    		   						$("#dataTable").jqxDataTable('exportData', 'tsv');
    		   					});
    		   					$("#htmlExport").click(function () {
    		   						$("#dataTable").jqxDataTable('exportData', 'html');
    		   					});
    		   					$("#jsonExport").click(function () {
    		   						$("#dataTable").jqxDataTable('exportData', 'json');
    		   					});
    		   					
    		   		 $("#printButton").jqxButton({ width: 80 });
    		   				  
    		   					$("#printButton").click(function () {
    		   						 var gridContent = $("#dataTable").jqxDataTable('exportData', 'html');
    		   						 var newWindow = window.open('', '', 'width=800, height=500'),
    		   						 document = newWindow.document.open(),
    		   						 pageContent =
    		   							 '<!DOCTYPE html>' +
    		   							 '<html>' +
    		   							 '<head>' +
    		   							 '<meta charset="utf-8" />' +
    		   							 '<title>jQWidgets DataTable</title>' +
    		   							 '</head>' +
    		   							 '<body>' + gridContent + '</body></html>';
    		   						 document.write(pageContent);
    		   						 document.close();
    		   						 newWindow.print();
    		   					 });
    //ADD DIALOG -----------------------------------------------------------------------------------------      
    	         
    	         $("#addDialog").jqxWindow({
    	                                 resizable: true,
    	                                 isModal: true,
    	                                 position: { left: $("#dataTable").offset().left + 400, top: $("#dataTable").offset().top + 35 },
    	                                 width: 500, height: 360,
    	                                 autoOpen: false
    	                             });
    	                             
    	         $("#invCompany").jqxInput({height: 25, width: 350, minLength: 1});
    	         $("#invDate").jqxDateTimeInput({width: '100px', height: '25px', formatString: "yyyy-MM-dd"});
    	         $("#invAcct").jqxInput({height: 25, width: 350, minLength: 1});
    	         $("#invRecipient").jqxInput({height: 25, width: 350, minLength: 1});
    	         $("#invIDCard").jqxInput({height: 25, width: 350, minLength: 1});
    	         $("#invPublisher").jqxInput({height: 25, width: 350, minLength: 1});
    	         var payments = [
    	                             "В брой",
    	                             "По банков път",
    	                             "С карта"
    	         		        ];
    	         $("#invPayment").jqxDropDownList({ source: payments, selectedIndex: 0, width: '150', height: '25'});
    	         $("#invOsnovanie").jqxInput({height: 25, width: 350, minLength: 1});
    	         $("#invOpisanie").jqxInput({height: 25, width: 350, minLength: 1});
    	         
    	         $("#cancelButton").jqxButton({height: 25, width: 80});
    	         $("#cancelButton").mousedown(function () {
    	                                 // close jqxWindow.
    	                                 $("#addDialog").jqxWindow('close');
    	                             });
    	         $("#saveButton").jqxButton({height: 25, width: 80});
    	         $("#saveButton").mousedown(function () {
    	                         // close jqxWindow.
    	                         $("#addDialog").jqxWindow('close');
    	                         // update edited row.     
    	                         var row = parseInt($("#addDialog").attr('data-row'));
    	                         var rowData = {
    	                         Acct: $("#invAcct").val(),
    	                         Date: $("#invDate").val(), 
    	                         Recipient: $("#invRecipient").val(),
    	                         IDCard: $("#invIDCard").val(), 
    	                         Publisher: $("#invPublisher").val(),
    	                         Payment: $("#invPayment").val(),
    	                         Osnovanie: $("#invOsnovanie").val(),
    	                         Opisanie: $("#invOpisanie").val()
    	                         
    	                                        };
    	                         $("#dataTable").jqxDataTable('addRow', row, rowData);
    	                         console.log(row);
    	                             });
    	                             
    	         
    	                             
    	         $("#addDialog").css('visibility', 'visible');
    	         $("#addDialog").on('close', function () {
    	                                 // enable jqxDataTable.
    	                                 $("#dataTable").jqxDataTable({ disabled: false });
    	                             });
    	         
    	         
    	                             
    			
    			
    			
    			$("#dataTable").on('rowDoubleClick', function (event) {
    			                var args = event.args;
    			                var index = args.index;
    			                var row = args.row;
    			                // update the widgets inside jqxWindow.
    			                $("#addDialog").jqxWindow('setTitle', "Издаване на фактура към продажба номер: " + row.Acct);
    			                $("#addDialog").jqxWindow('open');
    			                $("#addDialog").attr('data-row', index);
    			                $("#dataTable").jqxDataTable({ disabled: true });
    			                $("#invAcct").val(row.Acct);
    			                $("#invCompany").val(row.PartnerID);
    			                $("#invDate").val(row.Date);
    			                $("#invAcct").val(row.Acct);
    			                
    		   					 });
    		   					 
    		   				
    		   					 
    			});
    	</script>
    	<div style='margin-top: 20px;'>
    		<div style='float: left;' id="startDate" type="date" name="startdate"></div>
    		<div style='float: left;' id="endDate" type="date" name="endDate" /></div>
    	<input type="button" value="Изпрати" id='submitButton' />
    	</div>
    	<br>
    	<div id="dataTable"></div>
    	<div style='margin-top: 20px;'>
    		<div style='float: left;'>
    			<input type="button" value="Export to Excel" id='excelExport' />
    			<br />
    			<br />
    			<input type="button" value="Export to XML" id='xmlExport' />
    		</div>
    		<div style='margin-left: 10px; float: left;'>
    			<input type="button" value="Export to CSV" id='csvExport' />
    			<br />
    			<br />
    			<input type="button" value="Export to TSV" id='tsvExport' />
    		</div>
    		<div style='margin-left: 10px; float: left;'>
    			<input type="button" value="Export to HTML" id='htmlExport' />
    			<br />
    			<br />
    			<input type="button" value="Export to JSON" id='jsonExport' />
    		</div>
    	</div>
    	<div style='margin-top: 20px;'>
    		<div style='margin-left: 10px; float: left;'>
    			<input type="button" value="Print" id='printButton' />
    		</div>
    	</div>
    	
    	<div style="visibility: hidden;" id="addDialog">
    	        <div style="overflow: hidden;">
    	        <table>
    	        	<tr>
    	        		<td>Партньор:</td>
    	        		<td><input type="text" id='invCompany' name='invCompany' /></td>
    	        	</tr>
    	        	<tr>
    	        		<td>Дата:</td>
    	        		<td><div id="invDate" type="date" name="invDate"></div>
    	        		<input id="invAcct" type="number" name="invAcct" hidden="false" /></td>
    	        	</tr>
    	        	<tr>
    	        		<td>Получател:</td>
    	        		<td><input id="invRecipient" type="text" name="invRecipient" /></td>
    	        	</tr>
    	        	<tr>
    	        		<td>ЕГН/Лична карта:</td>
    	        		<td><input id="invIDCard" type="text" name="invRecipient" /></td>
    	        	</tr>
    	        	<tr>
    	        		<td>Издал документа:</td>
    	        		<td><input id="invPublisher" type="text" name="invRecipient" /></td>
    	        	</tr>
    	        	<tr>
    	        		<td colspan="2"><br></td>
    	        	</tr>
    	        	<tr>
    	        		<td>Начин на плащане:</td>
    	        		<td><div id="invPayment"></div></td>
    	        	</tr>
    	        	<tr>
    	        		<td>Основание:</td>
    	        		<td><input id="invOsnovanie" type="text" name="invRecipient" /></td>
    	        	</tr>
    	        	<tr>
    	        		<td>Описание:</td>
    	        		<td><input id="invOpisanie" type="text" name="invRecipient" /></td>
    	        	</tr>
    	        	<tr>
    	        		<td colspan="2"><br></td>
    	        	</tr>
    	        	<tr>
    	        		<td></td>
    	        		<td><button id="saveButton">Запази</button> <button style="margin-left: 5px;" id="cancelButton">Откажи</button></td>
    	        	</tr>
    	        </table>	        
    	        </div>
    	      </div>
    	     
    • This topic was modified 9 years, 4 months ago by  cpuin.
    update doesn't work #67162

    Dimitar
    Participant

    Hello cpuin,

    Your code seems fine but there may be issues on your server-side. What is the error thrown (passed as the errorThrown parameter)?

    Best Regards,
    Dimitar

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

    update doesn't work #67175

    cpuin
    Participant

    I go this in the console: ReferenceError: Can’t find variable: Globalize
    The error thrown is: Syntax error: JSON parse error, unexpected identifier.

    It’s strange because i don’t expect any JSON.
    I moved the dunction outside the dataTable like this

    function saveInvoice(rowData) {
    			
    				var data = "insert=true&" + $.param(rowData);
    				$.ajax({
    				    dataType: 'json',
    				    url: 'json_documents.php',
    				    cache: false,
    				    data: data,
    				    success: function (data, status, xhr) {
    				        // update command is executed.
    				        //commit(true);
    				    },
    				    error: function (jqXHR, textStatus, errorThrown) {
    				        //commit(false);
    				        alert(errorThrown);
    				        }
    				       });
    			
    			}

    Because i want simply send data w/out updating the #dataTable.

    update doesn't work #67212

    Dimitar
    Participant

    Hi cpuin,

    To send data without updating the data table itself, call commit(false) even in the Ajax success callback.

    As for the error – try passing the following data to the server:

    var data = rowData;
    data.insert = true;

    Best Regards,
    Dimitar

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

    update doesn't work #67270

    cpuin
    Participant

    Thank you for the support Dimitar.
    It was the server side, i have sent wrong variable.

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

You must be logged in to reply to this topic.