jQuery UI Widgets Forums Grid SyntaxError: invalid character

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

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • 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>
    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/

    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

    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

    SyntaxError: invalid character #55187

    dippy
    Participant

    Dear Peter,

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

    regards

    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/

    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.

    • This reply was modified 4 years, 8 months ago by  dippy.
    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/

    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.

    • This reply was modified 4 years, 8 months ago by  dippy.
    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/

    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

    SyntaxError: invalid character #55988

    dippy
    Participant

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

    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.

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

You must be logged in to reply to this topic.