We help IT Professionals succeed at work.

JavaScript Error in SharePoint

2,626 Views
Last Modified: 2014-05-20
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

Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2011
Awarded 2010

Commented:
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
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.
IsaacSharePoint Client Side Developer

Author

Commented:
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?
CERTIFIED EXPERT
Most Valuable Expert 2011
Awarded 2010
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.