I was missing the table corechart package but, the table appears and then disappears.
On Mon, May 19, 2014 at 9:22 PM, Andrew Gallant <[email protected]>wrote: > I think that the page is calling a form submission when you click those > buttons (as if they were "submit" type inputs). According to Chrome's DOM > inspector, there are 5 click event handlers (not including the in-line > "onclick" declaration) on those buttons. Some seem innocuous, but others > are obfuscated, so I can't tell what they are doing. If there is a form > submission firing, then that would explain why the page reloads (as the > form's "action" attribute points back to the same URL). > > As an aside, you have two buttons with the same ID; you should change the > ID's so they are unique. > > On Monday, May 19, 2014 3:08:42 PM UTC-4, TheInnovator wrote: >> >> Can somebody please help me figure out why my page refreshes without >> drawing my table chart? >> Enter in just the first two dates and click submit. It's supposed to >> render a google chart but the page just refreshes >> You can enter the following dates "10/2013" and "11/2013". >> http://isaac.issharepoint.com/Web%20Part%20Page/508Dashboard.aspx >> >> >> Here's my code: >> >> >> <script type="text/javascript"> >> >> anArray = new Array(); >> $(function() { >> $('#autoThisMonth').monthpicker(); >> $('#autoLastMonth').monthpicker(); >> $('#manThisMonth').monthpicker(); >> $('#manLastMonth').monthpicker(); >> >> $('#autoLastMonth').change(function() { >> autoLastMonthDate = $('#autoLastMonth').val(); >> }); >> >> // AND HERE >> $('#autoThisMonth').change(function() { >> autoThisMonthDate = $('#autoThisMonth').val(); >> }); >> var i=0; >> $().SPServices({ >> operation: "GetListItems", >> async: false, >> listName: "508 File Types", >> CAMLViewFields: "<ViewFields><FieldRef >> Name='Title'></FieldRef></ViewFields>", >> CAMLQuery: "<Query><OrderBy><FieldRef Name='Title' >> /></OrderBy></Query>", >> completefunc: function (xData, Status) { >> //alert(xData.responseXML.xml); >> $(xData.responseXML).SPFilterNode("z:row").each(function() { >> scannedItems = new Object(); >> scannedItems.Title = $(this).attr("ows_Title"); >> scannedItems.totalPages = 0; >> scannedItems.totalPassed = 0; >> scannedItems.totalFailed = 0; >> scannedItems.score = 0; >> >> anArray[i] = scannedItems; >> i++; >> }); >> } >> }); >> }); >> >> >> function getMonthsFunc() >> { >> alert("HELLO"); >> alert("Auto This Month: "+autoThisMonthDate); >> alert("Last Month: "+autoLastMonthDate); >> //Initialize each table for Automatic and Manual >> // Initialize data object to hold chart data for the Table >> >> >> >> alert("Call Function"); >> readyPieChart(autoThisMonthDate, "Automatic"); >> readyPieChart(autoLastMonthDate, "Automatic"); >> >> >> >> } >> >> function readyPieChart(autoMan, Type) >> { >> alert("In pie chart function: "+autoMan+" Type: "+Type); >> //This Month Automatic >> var thisAtutoMonthDataTbl = new google.visualization.DataTable(); >> thisAtutoMonthDataTbl.addColumn('string', 'File Type'); >> thisAtutoMonthDataTbl.addColumn('number', 'Total Pages'); >> thisAtutoMonthDataTbl.addColumn('number', 'Total Passed'); >> thisAtutoMonthDataTbl.addColumn('number', 'Total Failed'); >> thisAtutoMonthDataTbl.addColumn('number', 'Score'); >> thisAtutoMonthDataTbl.addColumn('number', 'Variance of Total Pages'); >> thisAtutoMonthDataTbl.addColumn('number', 'Variance of Total Passed'); >> thisAtutoMonthDataTbl.addColumn('number', 'Variance of Total Failed'); >> thisAtutoMonthDataTbl.addColumn('number', 'Variance of Score'); >> >> //Last Month Automatic >> var dataTbl = new google.visualization.DataTable(); >> dataTbl.addColumn('string', 'File Type'); >> dataTbl.addColumn('number', 'Total Pages'); >> dataTbl.addColumn('number', 'Total Passed'); >> dataTbl.addColumn('number', 'Total Failed'); >> dataTbl.addColumn('number', 'Score'); >> dataTbl.addColumn('number', 'Variance of Total Pages'); >> dataTbl.addColumn('number', 'Variance of Total Passed'); >> dataTbl.addColumn('number', 'Variance of Total Failed'); >> dataTbl.addColumn('number', 'Variance of Score'); >> >> >> //This Month Manual >> var dataTbl = new google.visualization.DataTable(); >> dataTbl.addColumn('string', 'File Type'); >> dataTbl.addColumn('number', 'Total Pages'); >> dataTbl.addColumn('number', 'Total Passed'); >> dataTbl.addColumn('number', 'Total Failed'); >> dataTbl.addColumn('number', 'Score'); >> dataTbl.addColumn('number', 'Variance of Total Pages'); >> dataTbl.addColumn('number', 'Variance of Total Passed'); >> dataTbl.addColumn('number', 'Variance of Total Failed'); >> dataTbl.addColumn('number', 'Variance of Score'); >> >> //Last Month Manual >> var dataTbl = new google.visualization.DataTable(); >> dataTbl.addColumn('string', 'File Type'); >> dataTbl.addColumn('number', 'Total Pages'); >> dataTbl.addColumn('number', 'Total Passed'); >> dataTbl.addColumn('number', 'Total Failed'); >> dataTbl.addColumn('number', 'Score'); >> dataTbl.addColumn('number', 'Variance of Total Pages'); >> dataTbl.addColumn('number', 'Variance of Total Passed'); >> dataTbl.addColumn('number', 'Variance of Total Failed'); >> dataTbl.addColumn('number', 'Variance of Score'); >> >> var spltDte = autoMan.split("/"); >> var monthDte = spltDte[0]; >> var yearDte = spltDte[1]; >> >> var qry = "<Query>" + >> "<Where>" + >> "<And>" + >> "<Eq>" + >> "<FieldRef Name='Title' />" + >> "<Value >> Type='Text'>"+monthDte+"</Value>" + >> "</Eq>" + >> "<Eq>" + >> "<FieldRef Name='Year' />" + >> "<Value >> Type='Text'>"+yearDte+"</Value>" + >> "</Eq>" + >> "</And>" + >> "</Where>" + >> "</Query>"; >> >> $().SPServices({ >> operation: "GetListItems", >> async: false, >> listName: "508 Dashboard Data", >> CAMLViewFields: "<ViewFields><FieldRef >> Name='Title'></FieldRef><FieldRef Name='Year'></FieldRef><FieldRef >> Name='FileType'></FieldRef></ViewFields>", >> CAMLQuery: qry, >> completefunc: function (xData, Status) { >> alert(xData.responseXML.xml); >> $(xData.responseXML).SPFilterNode("z:row").each(function() { >> >> for (var x=0; x < anArray.length; x++) >> { >> if >> (valSplit($(this).attr("ows_FileType")) == anArray[x].Title) >> { >> anArray.totalPages += >> $(this).attr("ows_TotalScanned"); >> anArray.totalPassed += >> $(this).attr("ows_TotalPassed"); >> anArray.totalFailed += >> $(this).attr("ows_TotalFailed"); >> x++; >> >> } >> } >> }); >> } >> }); >> >> //Data for table chart >> $.each(anArray, function (index, value) { >> >> >> >> thisAtutoMonthDataTbl.addRow([anArray[index].Title, >> anArray[index].totalPages, anArray[index].totalPassed, >> anArray[index].totalFailed, anArray[index].score]); >> >> var tblOption = { >> showRowNumber: true, >> height:305, >> width:200, >> alternatingRowStyle: true, >> cssClassNames: { >> tableRow: 'Alternate', >> selectedTableRow: 'Footer' >> } >> }; >> >> var table = new >> google.visualization.Table(document.getElementById('ThisAutoMonth')); >> >> }); >> //thisAtutoMonthDataTbl.addRow(["Total Count", >> totalConfRecCount]); >> >> table.draw(thisAtutoMonthDataTbl, tblOption); >> >> >> } >> >> </script> >> >> <table style="width: 75%"> >> <tr> >> <td >> colspan="3">Automatic Scan Results</td> >> </tr> >> <tr> >> <td >> style="width: 210px">This Month: <input type="text" id="autoThisMonth" >> style="background-color:#99FFCC"></td> >> <td >> style="width: 238px">Last Month: <input type="text" id="autoLastMonth" >> style="background-color:#99FFCC"></td> >> <td><button >> type="text" id="submitDates" onclick="getMonthsFunc(); return >> false;">Submit</button></td> >> </tr> >> <tr> >> <td >> style="width: 210px"><div id="ThisAutoMonth"></div></td> >> <td >> style="width: 238px">TABLE CHART</td> >> <td>PIE >> CHARTPIE CHART</td> >> >> </tr> >> </table> >> >> <br /> >> <br /> >> <br /> >> >> <table style="width: 75%"> >> <tr> >> <td >> colspan="3">Manual Scan Results</td> >> </tr> >> <tr> >> <td >> style="width: 217px">This Month: <input type="text" id="manThisMonth" >> style="background-color:#99FFCC"></td> >> <td >> style="width: 224px">Last Month: <input type="text" id="manLastMonth" >> style="background-color:#99FFCC"></td> >> <td><button >> type="text" id="submitDates" onclick="getDatesFunc(); return >> false;">Submit</button></td> >> </tr> >> <tr> >> <td >> style="width: 217px">TABLE CHART</td> >> <td >> style="width: 224px">TABLE CHART</td> >> <td>PIE >> CHARTPIE CHART</td> >> >> </tr> >> </table> >> >> -- > You received this message because you are subscribed to a topic in the > Google Groups "Google Visualization API" group. > To unsubscribe from this topic, visit > https://groups.google.com/d/topic/google-visualization-api/q1dkNg2xOQk/unsubscribe > . > To unsubscribe from this group and all its topics, send an email to > [email protected]. > To post to this group, send email to > [email protected]. > Visit this group at > http://groups.google.com/group/google-visualization-api. > For more options, visit https://groups.google.com/d/optout. > -- -Isaac- http://twitter.com/#!/feedy0urmind You are today where your thoughts have brought you; you will be tomorrow where your thoughts take you. - James Allen -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
