Avatar of Isaac
Isaac
Flag for United States of America asked on

JavaScript Error in SharePoint

Hi All,

I am using Google charts with my SharePoint 2010 site and it works fine.  The only problem that's bugging me is that in the bottom left corner of the IE 8 browser, there is a yellow icon (Error on page) which signifies a JavaScript error.  I can't figure out what it all means.  Here is a link to the site:  http://isaac.issharepoint.com/Web%20Part%20Page/solCenterDashboard.aspx    (Select any date ranges in May)

Here's my code

<script type="text/javascript" src="http://isaac.issharepoint.com/Script/jquery-1.8.2.min.js" language="javascript"></script>
<script type="text/javascript" src="http://isaac.issharepoint.com/Script/jquery.SPServices-0.7.2.min.js" language="javascript"></script>
<script type="text/javascript" src="http://isaac.issharepoint.com/Script/utilityFunctions.js" language="javascript"></script>
<link rel="stylesheet" href="http://isaac.issharepoint.com/Script/jquery-ui-1.10.4.custom.css">
<script type="text/javascript" src="http://isaac.issharepoint.com/Script/jquery-ui-1.10.4.custom.js" language="javascript"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<style>
.conformanceAlternate
{
	background-color:#BDBDBD
}
.conformanceFooter
{	
	font-weight:bold;
}

#vizTbl tr:last-child {
    font-weight: bold;
}

#vizTbl tr:last-child td {
    background-color: #a7d5b3;
}

</style>

<script type="text/javascript">
//_spBodyOnLoadFunctionNames.push("getDatesFunc");
//The Google Visualization library implements several classes and methods that you'll need to manipulate all charts
google.load("visualization", "1", {packages:["corechart", "table"]});

//Functionality for the calendar dates
 $(function() {  
	$( "#beginDate" ).datepicker( { dateFormat: 'yy-mm-dd',
								  changeMonth: true,      
								  changeYear: true

	} );
	$( "#endDate" ).datepicker( { dateFormat: 'yy-mm-dd',
								  changeMonth: true,      
								  changeYear: true
	} );	
 });
 

 //Declare an array
 var ticketArray = new Array();
function getDatesFunc()
{	

		//Get the dates to compare and subtract
		var beginDate = $('#beginDate').datepicker("getDate");
	    var endDate = $('#endDate').datepicker("getDate");
		var radioSelection = jQuery( 'input[name=received]:checked' ).val() 
			
		var compDate = endDate - beginDate;
		if(compDate<0) 
		{
			alert("Begin Date must be before End Date.");
			return false;
		}	
		else
		{
			//Get the actual Dates entered by the user
			var beginDate = $('#beginDate').datepicker({ dateFormat: 'yy-mm-dd' }).val();
			var endDate = $('#endDate').datepicker({ dateFormat: 'yy-mm-dd' }).val();
		}
		
    // Initialize data object to hold chart data for the Table
    var dataTbl = new google.visualization.DataTable();
    dataTbl.addColumn('string', 'Ticket Type');
    dataTbl.addColumn('number', 'Total Count');	
	
	// Initialize data object to hold data for pie chart
    var dataPie = new google.visualization.DataTable();
    dataPie.addColumn('string', 'Ticket Type');
    dataPie.addColumn('number', 'Total Count');		
	
var i = 0;
$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "TicketType",
	CAMLViewFields: "<ViewFields><FieldRef Name='Title'></FieldRef></ViewFields>",
	CAMLQuery: "<Query><OrderBy><FieldRef Name='Title' /></OrderBy></Query>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
			ticketItem = new Object();
			ticketItem.Title = $(this).attr("ows_Title");
			ticketItem.TotCount = 0;		
			 
			ticketArray[i] = ticketItem;
			i++;
      });
     }
  }); 	
  
if (radioSelection=="Received")
{  
var qry = "<Query>" +
	"<Where>" +
		"<And>" +
			"<Gt>" +
				"<FieldRef Name='ReceivedDate' />" +
					"<Value Type='DateTime'>"+beginDate+"</Value>" +
			"</Gt>" +
			"<Leq>" +
				"<FieldRef Name='ReceivedDate' />" +
					"<Value Type='DateTime'>"+endDate+"</Value>" +
			"</Leq>" +
		"</And>" +
	"</Where>" +
"</Query>";
}
else
{
var qry = "<Query>" +
	"<Where>" +
		"<And>" +
			"<Gt>" +
				"<FieldRef Name='ResolutionDate' />" +
					"<Value Type='DateTime'>"+beginDate+"</Value>" +
			"</Gt>" +
			"<Leq>" +
				"<FieldRef Name='ResolutionDate' />" +
					"<Value Type='DateTime'>"+endDate+"</Value>" +
			"</Leq>" +
		"</And>" +
	"</Where>" +
"</Query>";
}

$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Ticketing System",
	CAMLViewFields: "<ViewFields><FieldRef Name='TicketType'></FieldRef><FieldRef Name='ReceivedDate'></FieldRef></ViewFields>",
	CAMLQuery: qry,
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() { 	  
		for (var x=0; x < ticketArray.length; x++)
		{		
			if (valSplit($(this).attr("ows_TicketType")) == ticketArray[x].Title)
			{					
						ticketArray[x].TotCount += 1;
						x++;												
			}
		}			
      });
     }
  });	
  
	  var totalConfRecCount = 0;	
	  //Data for table chart
	  $.each(ticketArray, function (index, value) {																													
        dataTbl.addRow([ticketArray[index].Title, ticketArray[index].TotCount]);
		totalConfRecCount += ticketArray[index].TotCount;
    }); 
		dataTbl.addRow(["Total Count", totalConfRecCount]);
		
		//Data for pie chart
		$.each(ticketArray, function (index, value) {																													
        dataPie.addRow([ticketArray[index].Title, ticketArray[index].TotCount]);
    }); 
		
    var options = {
        pieSliceText: 'value',
		is3D: false,
        legend: {
            position: 'labeled'
        },
    	  width: 700,
		  height: 400,
        chartArea: {
            height: '85%',
            width: '90%'
        },
        pieStartAngle: 90
    };

		var tblOption = {
			showRowNumber: true,
			height:305,
			width:200,
			alternatingRowStyle: true,
			cssClassNames: {
            tableRow: 'conformanceAlternate',
			selectedTableRow: 'conformanceFooter'
			}
		};
<!-- Step 4 - Instantiate the Chart class -->
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));    
  	  var table = new google.visualization.Table(document.getElementById('vizTbl')); 
		   

<!-- Step 6 - Call chart.draw() function, passing in 'data' and 'options'	-->	
        chart.draw(dataPie, options);  
		  
		table.draw(dataTbl, tblOption);	
}

</script>
<table align="center" border=0 width="25%">
	<tr><td style="font-weight:bold">Begin Date:</td><td><input type="text" id="beginDate" style="background-color:#99FFCC"></td>
		<td>
			<input name="received" type="radio" value="Received" />
		Received</td></tr>
	<tr><td style="font-weight:bold">End Date:</td><td><input type="text" id="endDate" style="background-color:#99FFCC"></td>
		<td>
			<input name="received" type="radio" value="Closed" />
		Closed</td></tr>
	<tr><td colspan="3" align="center"><button type="text" id="submitDates"  onclick="getDatesFunc(); return false;">Submit</button></td></tr>
</table>

<table align="left">
	<td>
		<table>
			<tr><td><div id="chart_div" style="width: 700px; height: 80px;"></div></td></tr>
		</table>
	</td>
	<td>
		<table id="conformTbl">
			<tr><td><br /><br /><br /><br /><div id="vizTbl" style="width: 400px; height: 450px;"></div></td></tr>
		</table>
	</td>
</table>

Open in new window

Microsoft SharePointJavaScriptjQuery

Avatar of undefined
Last Comment
Ingeborg Hawighorst (Microsoft MVP / EE MVE)

8/22/2022 - Mon
Ingeborg Hawighorst (Microsoft MVP / EE MVE)

Hello,

double click the yellow alert icon. It will open up a dialog that shows you details about the error.  In this case I see the following over and over again:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.3; .NET CLR 1.1.4322)
Timestamp: Wed, 14 May 2014 21:19:33 UTC


Message: Script error
Line: 0
Char: 0
Code: 0
URI: https://www.google.com/uds/api/visualization/1.0/ce05bcf99b897caacb56a7105ca4b6ed/format+en,default+en,ui+en,table+en,corechart+en.I.js

It does not show any error when debugging with the Developer Tools. Maybe it's a time-out issue since you load the js files from the internet. Place all script files and libraries into your site and see if that helps.

cheers, teylyn
buttonMASTER

This probably isn't helpful, but I got a different error than teylyn in IE8 when selecting a Begin Date of 2014-05-05, and End Date of 2014-05-15, and selecting the Closed radio button.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727)
Timestamp: Thu, 15 May 2014 21:28:52 UTC


Message: Permission denied
Line: 86
Char: 16
Code: 0
URI: https://www.google.com/uds/api/visualization/1.0/ce05bcf99b897caacb56a7105ca4b6ed/format+en,default+en,ui+en,table+en,corechart+en.I.js

Different error (Permission denied), but it looks like the same file is causing the problem though.
Isaac

ASKER
I think it might be due to the files that is needed for the datepicker.
When I downloaded the files for the date picker functionality, there were a lot of files.  http://jqueryui.com/datepicker/
I only added about 3 to the site and a few images.  

Is there anything else I might need from the site?
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
ASKER CERTIFIED SOLUTION
Ingeborg Hawighorst (Microsoft MVP / EE MVE)

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question