jQWidgets Forums

Tagged: gird error while updating

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

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

Author

SyntaxError: invalid character Posts

June 1, 2014 at 3:45 pm SyntaxError: invalid character #55156

dippy

Participant

Hi,

While using updaterow method. on celledit I’m getting the “Syntaxerror: invalid character error”.

Please find the below code. Kindly help.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css"/>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css"/>
	<link rel="stylesheet" href="../../jqwidgets/styles/jqx.bootstrap.css" type="text/css"/>
	<link rel="stylesheet" href="../../jqwidgets/styles/jqx.arctic.css" type="text/css" />
	<link rel="stylesheet" href="../../jqwidgets/styles/jqx.metro.css" type="text/css"/>
	<link rel="stylesheet" href="../../jqwidgets/styles/jqx.fresh.css" type="text/css"/>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> 
	<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
  	<script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
	<script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>  
	<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>     

	<script type="text/javascript">
	        $(document).ready(function () {
            // prepare the data
			
			$('#mainSplitter').jqxSplitter({ width: 1400, height: 650, panels: [{ size: 220 }, { size: 450 }] });
            //$('#rightSplitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{ size: 400, collapsible: false }] });
			$('#rightSplitter').jqxSplitter({ width: '100%', height: '100%',  orientation: 'horizontal', panels: [{ size: 225, min: 100, collapsible: true }, { min: 400, collapsible: true}] });			
			$("#MenuExpander").jqxExpander({toggleMode: 'none', showArrow: false, width: "100%", height: "100%", 
                        initContent: function () {
                            $('#jqxTree').jqxTree({ height: '50%', width: '100%'});
                        }
                    });			
            var source =
            {
                datatype: "json",
                datafields: [
					{ name: 'AccInvoiceNo', type: 'string'},
                    { name: 'CustomInvoiceNo', type: 'string'},
					{ name: 'AccInvoiceDate', type: 'date'},
                    { name: 'TerrCode', type: 'number'},
                    { name: 'Volume', type: 'number'},
                    { name: 'AiValue', type: 'number'},
                    { name: 'Ageing', type: 'number'} 					
                ],
				id: 'AccInvoiceNo',
                url: 'ainv_dtl.php',
				cache: false,
				root: 'Rows',
                beforeprocessing: function (data) {
                    source.totalrecords = data[0].TotalRows;
                }     
            };			
            var dataAdapter = new $.jqx.dataAdapter(source);
			
			//########## CPS HEADER GRID ##########//
			
			$("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                theme: 'fresh',
				width: 1100,
				height:200,
				editable:true,
			    virtualmode: false,
				filterable: true,
				showfilterrow: true,				
				sortable: true,				
				//multiselect:true,
				//cache: false,
				keyboardnavigation: true,
                rendergridrows: function () {
                return dataAdapter.records;
                },				
               columns: 
				[
                  { text: 'Acc Inv No', datafield: 'AccInvoiceNo', editable:false, filtertype: 'textbox', filtercondition: 'CONTAINS', columntype: 'textbox', width: 160},
		          { text: 'Customs Inv No', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'CONTAINS', datafield: 'CustomInvoiceNo', width: 160},
				  { text: 'Acc Inv Date', columntype: 'date', filtertype: 'date', datafield: 'AccInvoiceDate', cellsformat: 'd', width: 90,cellsalign: 'center'},
				  { text: 'Territory', columntype: 'textbox', datafield: 'TerrCode',filtercondition: 'CONTAINS', width:75,cellsalign: 'center'},
				  { text: 'Volume', columntype: 'textbox', filtertype: 'number',datafield: 'Volume', width: 75,cellsalign: 'right'},
				  { text: 'Ai Value', columntype: 'textbox', filtertype: 'number',datafield: 'AiValue', width: 75,cellsalign: 'right',cellsformat: 'n1'},
				  { text: 'Ageing', columntype: 'textbox', filtertype: 'number',datafield: 'Ageing', width: 75,cellsalign: 'right'}				  
                ]
            });       
			
			//########## INITIALISE CPS DETAIL GRID ##########//
			
			$("#jqxgrid2").jqxGrid(
			{
				virtualmode: false,
				width: 1150,
				height:300,
				editable:true,
				theme: 'fresh',
				//selectionmode: 'checkbox',
				filterable: true,
				showfilterrow: true,
				showtoolbar: true,			
				rendertoolbar: function (toolbar) {
                    var me = this;
                    var container = $("<div style='margin: 5px;'></div>");
                    toolbar.append(container);
                    container.append('<input style="margin-left: 5px;" id="updaterowbutton" type="button" value="Approve Selected RSPs" />');  
				   
					$("#updaterowbutton").jqxButton({
					theme: 'arctic',
					width: 200,
					height: 25
					});
					
				$("#updaterowbutton").bind('click', function () {

                //var datarow = generaterow();
				alert("Hi");
                var selectedrowindex = $("#jqxgrid2").jqxGrid('getselectedrowindex');
                var rowscount = $("#jqxgrid2").jqxGrid('getdatainformation').rowscount;
                if (selectedrowindex >= 0 && selectedrowindex < rowscount) 
				{
                    var id = $("#jqxgrid2").jqxGrid('getrowid', selectedrowindex);
                    $("#jqxgrid2").jqxGrid('updaterow', id, datarow);
                }
				});
				   
                   // update row.
                   /* $("#updaterowbutton").on('click', function () 
					{
					//var rowindexes = $('#jqxgrid2').jqxGrid('getselectedrowindexes');
					 var rows = $("#jqxgrid2").jqxGrid('getboundrows');				
						
						//rows=0;
						
						var rows = $("#jqxgrid2").jqxGrid('getboundrows');
						// prepare an array with new rows.					
						// prepare an array with row ids to update.						
										 
                        //var datarow = generaterow();                       
											
						var selectedrowindex = $("#jqxgrid2").jqxGrid('getselectedrowindex');
                        
						var rowscount = $("#jqxgrid2").jqxGrid('getdatainformation').rowscount;
						
                        if (selectedrowindex >= 0 && selectedrowindex < rowscount) 
						{
                           var id = $("#jqxgrid2").jqxGrid('getrowid', selectedrowindex);
                           //var commit = $("#jqxgrid2").jqxGrid('updaterow', id, datarow);
                           $("#jqxgrid2").jqxGrid('ensurerowvisible', selectedrowindex);
						   alert('Selected Prices Approved'); 		
						   $("#jqxgrid2").jqxGrid('clearselection');
                        }
                    });*/
                 },
				
				//rendergridrows: function (obj) {
					//return [];
				//},
				columns: [
                  { text: 'SNo', datafield: 'LineNo', editable: false, columntype: 'textbox', width: 35,cellsalign: 'right'},
                  { text: 'Accounting Invoice', datafield: 'AccInvoiceNo', editable: false, columntype: 'textbox', width: 160},
                  { text: 'Item Code', columntype: 'textbox', datafield: 'ItemCode', editable: false, width: 120},
				  { text: 'Item Description', columntype: 'textbox', datafield: 'ItemDesc', editable: false, width: 330},
				  { text: 'Estm Cost', columntype: 'textbox', datafield: 'EstTerrLndCst', width: 75, editable: false,cellsalign: 'right'},
				  { text: 'Sugg RSP', columntype: 'textbox', datafield: 'SuggRSP', width: 70, editable: false,cellsalign: 'right'},
				  { text: 'Final RSP', columntype: 'textbox', datafield: 'FinalRSP', width: 70,editable: true,cellsalign: 'right',
				  /*cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) 
					  {						 
						  var finalRSP1=parseFloat(rowdata.SuggRSP);
                          return "<div class='jqx-right-align'>" + dataAdapter.formatNumber(finalRSP1, "n2") + "</div>";
                         
                    }*/},
				  { text: 'VAT %', columntype: 'textbox', datafield: 'VATPer', width: 60, editable: false,cellsalign: 'right'},
				  { text: 'Margin', editable: false, datafield: 'Margin',width: 65,
                      cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
						 if ((parseFloat(rowdata.FinalRSP)>0) && parseFloat(rowdata.EstTerrLndCst)>0)
						 {
						  var FinalRSPNetVat=((parseFloat(rowdata.FinalRSP)*100)/(100+parseFloat(rowdata.VATPer)))
                          var margin = ((parseFloat(FinalRSPNetVat)-parseFloat(rowdata.EstTerrLndCst))/parseFloat(FinalRSPNetVat))*100;

						  return "<div class='jqx-right-align'>" + dataAdapter.formatNumber(margin, "p2") + "</div>";
                         }						                        
                      }
                  },
				  { text: 'Markup', editable: false, datafield: 'Markup',width: 65,
                      cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) 
					  {
						 if (parseFloat(rowdata.FinalRSP)>0 &&  parseFloat(rowdata.EstTerrLndCst)>0)
						 {
						  var FinalRSPNetVat=((parseFloat(rowdata.FinalRSP)*100)/(100+parseFloat(rowdata.VATPer)))
                          var markup = ((parseFloat(FinalRSPNetVat)-parseFloat(rowdata.EstTerrLndCst))/parseFloat(rowdata.EstTerrLndCst))*100;
						  return "<div class='jqx-right-align'>" + dataAdapter.formatNumber(markup, "p2") + "</div>";
                         }						                       
                    }
                  }
		         //{ text: 'Available', datafield: 'available', columntype: 'checkbox', twostatecheckbox: true,width: 75,cellsalign: 'right'}
                ]
			});	
			
			$("#jqxgrid2").on('cellbeginedit', function (event) {
                var args = event.args;
                if(args.datafield=="available" && args.value==false )
				{				
					   var SuggRSPValue = $("#jqxgrid2").jqxGrid('getcellvalue', (args.rowindex), 'SuggRSP');
					   var FinalRSPValue = $("#jqxgrid2").jqxGrid('getcellvalue', (args.rowindex), 'FinalRSP');
					   $("#jqxgrid2").jqxGrid('setcellvalue', (args.rowindex), 'FinalRSP', SuggRSPValue);
					   $("#jqxgrid2").jqxGrid('endcelledit', (args.rowindex), 'FinalRSP', true);  
			   }
			   else
			   {
					$("#jqxgrid2").jqxGrid('setcellvalue', (args.rowindex), 'FinalRSP', 0);
				}
            });
			
			 $("#jqxgrid").bind('rowselect', function (event) {
				var row = event.args.rowindex;	
				var id = $("#jqxgrid").jqxGrid('getrowdata', row)['AccInvoiceNo'];				
				var source =
				{
					url: 'ainv_dtl.php',
					dataType: 'json',
					data: {accinvoiceno: id},
					datatype: "json",
					filterable: true,
					keyboardnavigation: true,
					multiselect:true,
					cache: false,
					datafieldsdtl: 
					[
						{ name: 'LineNo', type: 'number'},
						{ name: 'AccInvoiceNoDtl', type: 'string'},
						{ name: 'ItemCode', type: 'string'},
						{ name: 'ItemDesc', type: 'string'},
						{ name: 'EstTerrLndCst', type: 'number'},
						{ name: 'SuggRSP', type: 'number'},
						{ name: 'FinalRSP', type: 'number'},
						{ name: 'Margin', type: 'number'},
						{ name: 'Markup', type: 'number'},
						
					],				
					root: 'Rows',					
					beforeprocessing: function (data) 
					{
						source.totalrecords = data[0].TotalRows;
					},
					
					updaterow: function (rowid, rowdata, commit)
					{	// synchronize with the server - send update command        
			
					var data = "update=true&FinalRSP=" + rowdata.FinalRSP + "&Margin=" + rowdata.Margin + "&Markup=" + rowdata.Markup;          	
					$.ajax({            
					dataType: "json",            
					url: 'data.php',			
					cache: false,            
					data: data,            
					success: function (data, status, xhr) {				
							// update command is executed.				
							commit(true);
							alert("committed");		
							},			
							error: function(jqXHR, textStatus, errorThrown)
							{	
							alert("ERROR"+errorThrown);									
							commit(false);
							}
							});
					}							
 				};
				
				var adapter = new $.jqx.dataAdapter(source);
					// initialize jqxGrid
					$("#jqxgrid2").jqxGrid(
					{
						source: adapter,						
						rendergridrows: function (obj) 
						{
							return obj.data;
						}
					});
			  });
        });
    </script>
</head>
<body class='default'>
 <div id="mainSplitter"> 
 <div>
                <div style="border: none;" id="MenuExpander">
                    <div class="jqx-hideborder">
                      <b>Logged User :<br> Deepak Sharma</b></div>
                    <div class="jqx-hideborder jqx-hidescrollbars">
                        <div class="jqx-hideborder" id='jqxTree'>
						<ul>
						<li item-expanded='true' id="t1">
                                <img style='float: left; margin-right: 5px;' src='../../images/contactsicon.png' />
								<span item-title="true">Pricing Details</span>
						</li>							
                              <ul>
                                <li item-expanded='true' id="t1">
                                <img style='float: left; margin-right: 5px;' src='../../images/new.png' />
								<span item-title="true">New Pricing <b><br>(100)</b></span>
								</li>								
                                <li>								
								<img style='float: left; margin-right: 5px;' src='../../images/favorites.png' />
								<span item-title="true">Completed Pricing<b><br>(500)</b></span>
								</li>								                                
								<li>
                                <img style='float: left; margin-right: 5px;' src='../../images/mailIcon.png' />
								<span item-title="true">Pricing Reports</span>
								</li>                                                               
								<!--<li>
                                <img style='float: left; margin-right: 5px;' src='../../images/mailIcon.png' />
								<span item-title="true">Reports-2</span> 
					            </li>
                                <li>
                                <img style='float: left; margin-right: 5px;' src='../../images/mailIcon.png' />
								<span item-title="true">Reports-3</span>
								</li>                               -->
                            </ul>
						</ul>	
                        </div>
                    </div>
                </div>
            </div>
        <!--<div><b>User: Deepak Sharma</b></div>-->
		<div>
            <div id="rightSplitter">
				<div id='jqxWidget'><b>Pending Pricing Header</b>
				<div id="jqxgrid">
				</div>
				</div>
            <div id='jqxWidget'><b>Pending Pricing Details</b>
				<div id="jqxgrid2">
				</div>
			<div>
            </div>
		</div>
    </div>    
</body>
</html>

June 1, 2014 at 7:29 pm SyntaxError: invalid character #55159

Peter Stoev

Keymaster

Hi dippy,

Sorry, but we cannot reproduce such error with the provided code and the current version. Please, check: http://jsfiddle.net/jqwidgets/KCqqG/ which demonstrates how to use the “updaterow” method.

Best Regards,
Peter Stoev

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

June 1, 2014 at 7:51 pm SyntaxError: invalid character #55160

dippy

Participant

Hi Peter,

The Error comes when I click on the FinalRSP column. It calls the updaterow function which throws error.

If I comment the

updaterow: function (rowid, rowdata, commit)
					{	// synchronize with the server - send update command        
			
					var data = "update=true&FinalRSP=" + rowdata.FinalRSP + "&Margin=" + rowdata.Margin + "&Markup=" + rowdata.Markup;          	
					$.ajax({            
					dataType: "json",            
					url: 'data.php',			
					cache: false,            
					data: data,            
					success: function (data, status, xhr) {				
							// update command is executed.				
							commit(true);
							alert("committed");		
							},			
							error: function(jqXHR, textStatus, errorThrown)
							{	
							alert("ERROR"+errorThrown);									
							commit(false);
							}
							});
					}

code I don’t get the error. There is something wrong I’m doing in the ajax call.

Please can you help.

regards

June 2, 2014 at 4:32 am SyntaxError: invalid character #55162

Peter Stoev

Keymaster

Hi dippy,

It is very wrong to call setcellvalue or endcelledit within cellbeginedit event. By doing that you break the whole editing process so I suggest you to remove your code from cellbeginedit

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 2, 2014 at 12:48 pm SyntaxError: invalid character #55187

dippy

Participant

Dear Peter,

What is the best way for the same can you suggest some examples.

regards

June 2, 2014 at 1:50 pm SyntaxError: invalid character #55191

Peter Stoev

Keymaster

Hi dippy,

When the error message is shown? In your ALert alert(“ERROR”+errorThrown); ? If that is so, this means that the Ajax call fails for some reason.

Best Regards,
Peter Stoev

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

June 2, 2014 at 4:46 pm SyntaxError: invalid character #55202

dippy

Participant

Hi Peter,

Yes it shows the error when In your ALert alert(“ERROR”+errorThrown); I’m trying to resolve the same. Please can you try from your side as well.
Will post if I am able to resolve it.

June 2, 2014 at 7:10 pm SyntaxError: invalid character #55208

Peter Stoev

Keymaster

Hi dippy,

I would not be able to try this locally, because the error comes from your server code. My suggestion is to debug that on your side. It could be related to missing contentType setting of the Ajax call, invalid URL or code which fails on the server side. I am sorry, but I do not know what could other be the reason of a failing Ajax call.

Best Regards,
Peter Stoev

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

June 2, 2014 at 10:41 pm SyntaxError: invalid character #55221

dippy

Participant

Hi Peter,
my var data = “update=true&” + $.param(rowdata);

alert(data);
Looks like this

update=true&LineNo=0&CustomInvoiceNo=CDCRAQA13-021583&AccInvoiceNo=HCQAAECTR13-39717&ItemCode=155125027&ItemDesc=Koala+Bear+5pcs.+Kids+Breakfast+Set+With+Suitcase+Pack&EstTerrLndCst=20.108&SuggRSP=49&FinalRSP=49&VATPer=0&Margin=0&Markup=0&uid=0

is this the correct data format for a row update. the $Column is not same as database. So I hope this is will show grid fieldname.
Also I don’t have a uid column in my database.

rest I have columns in data base table.

June 3, 2014 at 5:40 am SyntaxError: invalid character #55241

Peter Stoev

Keymaster

Hi dippy,

In general, the Ajax call may contain the fields you are only interested for. It is not necessary to send all the fields that the row contains, but I don’t see a problem for sending the row’s uid parameter as well. On your server script, you will decide which fields to use in your DB update and which to omit.

Best Regards,
Peter Stoev

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

June 3, 2014 at 7:27 am SyntaxError: invalid character #55249

dippy

Participant

Hi Peter,

Does the content/ syntax which is getting fired looks ok. update=true&LineNo=0&CustomInvoiceNo=CDCRAQA13-021583&AccInvoiceNo=HCQAAECTR13-39717&ItemCode=155125027&ItemDesc=Koala+Bear+5pcs.+Kids+Breakfast+Set+With+Suitcase+Pack&EstTerrLndCst=20.108&SuggRSP=49&FinalRSP=0

June 17, 2014 at 7:58 pm SyntaxError: invalid character #55988

dippy

Participant

Stuck can some one help on whats the best practice to post data changes to database.

June 17, 2014 at 7:59 pm SyntaxError: invalid character #55990

dippy

Participant

how can do I update specific field vslues only. also I want the update row to fire only when I click a button. not at every cell editing.

Author

Posts

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

You must be logged in to reply to this topic.