I want to make grid with jquery.I read data from xml. when I run it on Chrome browser it works.But when I try it on IE it gives this error.
Grid can not be used in this ('quirks') mode!
I write this code:
var datasource_url = "/Data/XML_Data.xml";
function makeID(string) {
return string.toLowerCase().replace(/\s/g, "_")
}
$(function() {
$.loadGrid = function() {
$.ajax({
cache: false,
url :datasource_url ,
dataType: "xml",
success: function(data, res) {
var colNames = new Array;
var colIDs = new Array;
var colModel = new Array;
var datas = new Array;
var metadata = $(data).find("metadata").each(function() {
$(this).find('item').each(function() {
var colname = $(this).attr('name');
var colid = makeID($(this).attr('name'));
var coltype = $(this).attr('type');
var collength = $(this).attr('length');
var sorttype = null;
var sortable = false;
switch(coltype) {
case "xs:double":
sorttype = "float";
sortable = true;
break;
case "xs:string":
default:
sorttype = "text";
sortable = true;
break;
}
colNames[colNames.length] = colname;
colIDs[colIDs.length] = colid;
colModel[colModel.length] = {name: colid, index: colid, width: 200, align: "center", sorttype: sorttype, sortable: sortable}
});
});
var options = {
datatype: "local",
height: 500,
colNames: colNames,
colModel: colModel,
multiselect: false,
caption : "Data Grid",
rowNum : 1000,
rownumbers: true
}
$("#datagrid").jqGrid(options);
$(data).find("data").each(function() {
var i=0;
$(this).find('row').each(function() {
var idx = 0;
var rowdata = new Object;
$(this).find('value').each(function() {
var ccolid = colIDs[idx];
if (ccolid) {
rowdata[ccolid] = $(this).text();
}
idx++;
})
$("#datagrid").jqGrid('addRowData', i+1, rowdata)
i++
})
})
}
})
}
$.loadGrid();
/*
$("#btnLoadGrid").click(function() {
//$(this).attr("disabled", "disabled")
$.loadGrid();
})
*/
});
</script>
How can I fix this.
I recommend you to include
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
at the beginning of <head> of your XHTML document. It will switch off the "Compatibility View" for the page. Some time ago I included the line in all code examples which I found on the official jqGrid wiki (see here) because the problem which you describe is common.
As mentioned in the comments, you'll need a correct doctype to force IE out of quirks mode. It looks like you are using an XHTML doctype, which is not compatible with some aspects of HTML5. Try using the HTML5 doctype on the first line of your HTML page: <!DOCTYPE html>
Here's a good article on the different doctypes and their relationship to HTML5.
Related
Hello I am trying to implement the share of facebook in my javascript code, however I get this error, I tried several solutions suggested but none was successful in its my implementation.
Could someone help me correct this error?
Thanks in advance. Any help is welcome.
Full code:
https://pastebin.com/kSgFDf0L
Error on console.
FB Share JavaScript "share_button is not defined"
$(document).ready(function() {
window.fbAsyncInit = function() {
FB.init({appId: 'xxxx', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'This is the content of the "name" field.',
link: 'http://www.groupstudy.in/articlePost.php?id=A_111213073144',
picture: 'http://www.groupstudy.in/img/logo3.jpeg',
caption: 'Top 3 reasons why you should care about your finance',
description: "What happens when you don't take care of your finances? Just look at our country -- you spend irresponsibly, get in debt up to your eyeballs, and stress about how you're going to make ends meet. The difference is that you don't have a glut of taxpayers…",
message: ""
});
});
});
$(".result").on("click", function() {
var id = $(this).attr("data-linkId");
var url = $(this).attr("href");
if(!id) {
alert("data-linkId attribute not found");
}
increaseLinkClicks(id, url);
return false;
});
var grid = $(".imageResults");
grid.on("layoutComplete", function() {
$(".gridItem img").css("visibility", "visible");
});
grid.masonry({
itemSelector: ".gridItem",
columnWidth: 200,
gutter: 5,
isInitLayout: false
});
$("[data-fancybox]").fancybox({
caption : function( instance, item ) {
var caption = $(this).data('caption') || '';
var siteUrl = $(this).data('siteurl') || '';
if ( item.type === 'image' ) {
caption = (caption.length ? caption + '<br />' : '')
+ 'View image<br>'
+ 'Visit page<br>'
+ 'Share';
}
I believe that by declaring the variable it will be possible to execute the function. I just don't know if it will work according to what you expect.
Well. I believe this works ->
caption : function( instance, item ) {
var caption = $(this).data('caption') || '';
var siteUrl = $(this).data('siteurl') || '';
var share_button = $('#share_button') || '';
I can't find a way to export my data from a pie chart to CSV or XLSX. I checked this link from amCharts.js but I can manage to adapt it to my need.
Here's my code:
function getDataProviderForEventsByFlow(){
$.ajax({
url: restURI,
success: function(data) {
am4core.useTheme(am4themes_kelly);
chartEventsByFLow = am4core.create("events-by-flow", am4charts.PieChart);
chartEventsByFLow.hiddenState.properties.opacity = 0;
chartEventsByFLow.legend = new am4charts.Legend();
var marker = chartEventsByFLow.legend.markers.template.children.getIndex(0);
marker.cornerRadius(12, 12, 12, 12);
marker.strokeWidth = 2;
marker.strokeOpacity = 1;
marker.stroke = am4core.color("#ccc");
chartEventsByFLow.data = data;
var series = chartEventsByFLow.series.push(new am4charts.PieSeries());
series.dataFields.value = "number";
series.dataFields.category = "category";
series.dataFields.color = "color";
series.labels.template.disabled = true;
series.ticks.template.disabled = true;
series.slices.template.tooltipText = "";
}
});
}
And the export functions :
function exportCSVbyFlow() {
chartEventsByFLow.export.toCSV({}, function(data) {
this.download(data, this.defaults.formats.CSV.mimeType, "exportCSVvolumetryByFlow.csv");
});
}
function exportXLSXbyFlow() {
chartEventsByFLow.export.toXLSX({}, function(data) {
this.download(data, this.defaults.formats.XLSX.mimeType, "exportXLSXvolumetryByFlow.xlsx");
});
}
This is the output in console:
Cannot read property 'toCSV' of undefined
Cannot read property 'toXLSX' of undefined
Thank you !
The code you give is using v4 but the link you're trying to use as an example is using v3.
Have you seen this page? It shows a way to add a menu to a chart with different export options. It also talks about programatically exporting using code like:
chart.exporting.export("csv");
I have a case where i need to load a char based on the input from another javascript. But it doesn't work in my case. I have added the code below:
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart', 'table']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var json = $.ajax({
url: fileURL, // make this url point to the data file
dataType: 'json',
cahce:false,
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(json);
var options = {
title: graphTitle,
is3D: 'true',
width: 800,
height: 600
};
var tableOptions = {
title: 'App Listing'
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
and I pass the value for graphtitle and fileURL as below:
<script type="text/javascript">
$(document).ready(function () {
var fileURL = "";
var graphTitle = "";
function showDiv() {
if($firstCheck) {
var selText;
$("#dd4 li a").show(function () {
selText = $(this).text();
});
if(selText !== "Factor"){
if(selText == "IA Architecture Usage"){
fileURL = "get_json.php";
graphTitle = "IA Architecture Variation";
}else if(selText == "Tablet to Phone"){
fileURL = "get_tablet_support.php";
graphTitle = "Tablet Usage Variation";
}
document.getElementById('chart_div').style.display = "block";
}
}else{
document.getElementById('chart_div').style.display = "none";
}
}
</script>
Both these javascript are within the same file. I can't pass the fileURL and graphTitle when I used the above code. Any idea how to solve this issue?
Use global variables with window. E.g.
$(document).ready(function () {
window.fileURL = "";
window.graphTitle = "";
});
Don't specify "var" or it will only be within the scope of the function.
EDIT: Also make sure that the script in which your variables are assigned initially is before the other one.
How about something a bit more OO oriented (not really OO, but less inline code) ? It's cleaner and easier to read/maintain ..example could still use some work, but i"m sure you get the idea.
function loadChart(title, url) {
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart', 'table']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var json = $.ajax({
url : url, // make this url point to the data file
dataType: 'json',
cahce : false,
async : false
});
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(json);
var options = {
title : title,
is3D : 'true',
width : 800,
height: 600
};
var tableOptions = {
title: 'App Listing'
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
}
$(document).ready(function () {
var fileURL = "";
var graphTitle = "";
function showDiv() {
if($firstCheck) {
var selText;
$("#dd4 li a").show(function () {
selText = $(this).text();
});
if(selText !== "Factor") {
if(selText == "IA Architecture Usage"){
fileURL = "get_json.php";
graphTitle = "IA Architecture Variation";
} else if(selText == "Tablet to Phone"){
fileURL = "get_tablet_support.php";
graphTitle = "Tablet Usage Variation";
}
document.getElementById('chart_div').style.display = "block";
}
} else {
document.getElementById('chart_div').style.display = "none";
}
loadChart(graphTitle, fileURL);
}
}
btw i think you have an error in your code: .responseText seems pretty useless to me, and most likely throws an error in itself. Also i have no idea who is calling showDiv() in the code. From the example, i'd say it never fires.
I'm moderatley new to ASP.NET and very new to Javascript. I'm writing a ASP.NET UserControl. I had the following:
<head>
<title>Select Asset </title>
<script src="../Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function CheckThenCloseActiveToolTip(supplierID) {
var radGrid = $find('ctl00_MainContent_SelectAssetGrid1_gridAssetList_ctl00');
var selectedItems = radGrid.get_masterTableView().get_selectedItems()
if (selectedItems == null || selectedItems.length == 0) return 'You must select an asset first';
else {
DoPartialPostBack('selectasset', selectedItems[0]._dataItem.Id);
CloseActiveToolTip();
}
}
function PopulateRooms(e) {
var idx = e.selectedIndex;
if (idx > -1) {
var dcId = JSON.stringify({ dataCenterId: e.options[idx].value });
var pageUrl = '/WebService/AVWebService.asmx';
$.ajax({
url: pageUrl + '/GetRooms',
type: 'post',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: dcId,
success: OnRoomsReceived,
error: OnErrorCall
});
}
else {
var ddlRooms = document.getElementById('MainContent_SelectAssetGrid1_ddlRooms');
ddlRooms.disabled = true;
$('#ddlRooms').empty();
ddlRooms.options[0] = new Option('', '-1');
getAssets(0);
}
}
function OnRoomsReceived(result) {
var ddlRooms = document.getElementById('MainContent_SelectAssetGrid1_ddlRooms');
if (result.d.length > 0) {
ddlRooms.disabled = false;
$('#ddlRooms').empty();
ddlRooms.options[0] = new Option('', '-1');
for (var i = 0; i < result.d.length; i++) {
ddlRooms.options[i + 1] = new Option(result.d[i].Name, result.d[i].Id);
}
}
if (result.d.length = 1)
ddlRooms.selectedIndex = 1;
getAssets(0);
}
function resetGridData() {
getAssets(0);
}
function getAssets(startAt) {
var cpId = document.getElementById('hfldCompanyId').value;
var pageUrl = '/WebService/AVWebService.asmx';
var tableView = $find('ctl00_MainContent_SelectAssetGrid1_gridAssetList').get_masterTableView();
var ddldc = document.getElementById('MainContent_SelectAssetGrid1_ddlDataCenter');
var dcIdx = ddldc.selectedIndex;
var dcId = '';
if (dcIdx > -1)
dcId = ddldc.options[dcIdx].value;
var ddlrm = document.getElementById('MainContent_SelectAssetGrid1_ddlRooms');
var rmIdx = ddlrm.selectedIndex;
var rmId = '';
if (rmIdx > -1)
rmId = ddlrm.options[rmIdx].value;
var ddlStatuses = $find('ctl00_MainContent_SelectAssetGrid1_ddlStatuses';
var rbgAssetClass = document.getElementById('MainContent_SelectAssetGrid1_rbgAssetClass');
var ac = 0;
var rbgInputs = rbgAssetClass.getElementsByTagName('input');
for (var i = 0; i < rbgInputs.length; i++) {
if (rbgInputs[i].checked) {
ac = i;
}
}
var filters = [];
var fbs = document.getElementsByClassName('rgFilterBox');
for (var i = 0; i < fbs.length; i++)
if (fbs[i].value != '')
filters[filters.length] = { field: fbs[i].alt, value: fbs[i].value };
var params = JSON.stringify({ companyId: cpId,
startIndex: startAt,
maximumRows: tableView.get_pageSize(),
filterExpressions: filters,
dataCenterId: ddldc.options[ddldc.selectedIndex].value,
roomId: rmId,
Statuses: ddlStatuses._checkedIndices,
assetClass: ac
});
$.ajax({
url: pageUrl + '/GetSelectAssetData',
type: 'post',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: params,
success: updateGrid,
error: OnErrorCall
});
}
function updateGrid(result) {
var tableView = $find('ctl00_MainContent_SelectAssetGrid1_gridAssetList').get_masterTableView();
tableView.set_dataSource(result.d.gridData);
tableView.dataBind();
tableView.set_virtualItemCount(result.d.count);
}
function gridAssetList_Command(sender, args) {
args.set_cancel(true);
var pageSize = sender.get_masterTableView().get_pageSize();
var currentPageIndex = sender.get_masterTableView().get_currentPageIndex();
if (args.get_commandName() == 'Filter')
currentPageIndex = 0;
getAssets(pageSize * currentPageIndex);
}
function gridAssetList_Created(sender, args) {
var fbtns = document.getElementsByClassName('rgFilter');
for (var i = 0; i < fbtns.length; i++)
fbtns[i].style.visibility = 'hidden';
var fbs = document.getElementsByClassName('rgFilterBox');
for (var i = 0; i < fbs.length; i++)
fbs[i].onkeypress = applyFilter;
}
function applyFilter(args) {
if (args.keyCode == 13)
resetGridData();
}
</script>
This works most of the time, but if I'm loading the UserControl using Page.LoadControl(), it didn't always load the scripts correctly. For a couple of reasons (maybe poor ones) I thought I'd move the scripts to an external file.
<script src="../Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../Scripts/SelectAsset.js" type="text/javascript"></script>
There's no additional code or setup in the .js file, just
function CheckThenCloseActiveToolTip(supplierID) {
var radGrid = $find('ctl00_MainContent_SelectAssetGrid1_gridAssetList_ctl00');
var selectedItems = radGrid.get_masterTableView().get_selectedItems()
if (selectedItems == null || selectedItems.length == 0) return 'You must select an asset first';
...
But now I get a RunTime error that "function gridAssetList_Command" us undefined. That function is bound to a grid's OnCommand event in the page .
When I examine the page in Firebug, it doesn't list my .js file in the list of script files.
I'm loading my scripts in the . I didn't change them, just moved them. What am I missing?
MORE INFO:
It appears to be using different ClientIds when adding the functions to the controls. The error I'm getting drops be in a dynamic resource with the following:
Sys.Application.add_init(function() {
$create(Telerik.Web.UI.RadGrid, {"ClientID":"ctl00_MainContent_ctl03_gridAssetList","ClientSettings": ...
I'm going to try changing referenes to getElementByClass()
The best way to add javascript reference on asp.net web form is using ScriptManager on parent element or parent page such as a Master Page, And use ScriptManagerProxy on content pages and user controls.
Try use ScriptManager or combination of both to resolve your problem. Also use root application alias (~) for refer to file ex. src="~/Scripts/jquery-1.9.1.min.js"
So for simple way change your script reference to become:
<asp:ScriptManager ID="ScriptManagerProxy1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.9.1.min.js" />
<asp:ScriptReference Path="~/Scripts/SelectAsset.js" />
</Scripts>
</asp:ScriptManager>
Update:
use for example:
$('table[id*="gridAssetList"]') for table with id = ctl00_gridAssetList_xx
$('input[id*="inputTxt"]') for input with id = ctl100_inputTxt
etc
to call html tag that rendered by asp.net component using jquery selector.
hi steve i think its shows error due to script source path please check that first then to verify the script loaded or not try this below code
if(typeof(yourfunction_name=='function')
{
// this code will make sure that the function is present in the page
//function exits do your functionality.
}else
{
alert('Script not loaded');
}
I use the library Highcharts in order to generate some graphics.
I would like to send them to the server and also to do a mysql request in order to save the data informations into my database. The thing is that It just download the file into my compuer.
I really would like to keep it on the server on a predefined folder. It just dowload it.
I wrote this code with many efforts.
I met many problems but I don't know how to pass this last.
Here is the code for generating the image and to download it auomatically:
<script type="text/javascript">//<![CDATA[
$(function(){
/**
* Create a global getSVG method that takes an array of charts as an argument
*/
Highcharts.getSVG = function(charts) {
var svgArr = [],
top = 0,
width = 0;
$.each(charts, function(i, chart) {
var svg = chart.getSVG();
svg = svg.replace('<svg', '<g transform="translate(0,' + top + ')" ');
svg = svg.replace('</svg>', '</g>');
top += chart.chartHeight;
width = Math.max(width, chart.chartWidth);
svgArr.push(svg);
});
return '<svg height="2400px" width="1200px" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>';
};
/**
* Create a global exportCharts method that takes an array of charts as an argument,
* and exporting options as the second argument
*/
Highcharts.exportCharts = function(charts, options) {
var form
svg = Highcharts.getSVG(charts);
// merge the options
options = Highcharts.merge(Highcharts.getOptions().exporting, options);
// create the form
form = Highcharts.createElement('form', {
method: 'post',
action: options.url
}, {
display: 'none'
}, document.body);
// add the values
Highcharts.each(['filename', 'type', 'width', 'svg'], function(name) {
Highcharts.createElement('input', {
type: 'hidden',
name: name,
value: {
filename: options.filename || 'chart',
type: options.type,
width: 1200,
svg: svg
}[name]
}, null, form);
});
//console.log(svg); return;
// submit
form.submit();
// clean up
form.parentNode.removeChild(form);
};
$('#export').click(function() {
Highcharts.exportCharts([chart1, chart2, chart3]);
});
});//]]>
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script type="text/javascript" src="http://highcharts.com/js/testing-exporting.js"></script>
<div id="container" style="height: 400px; width:1200px"></div>
<div id="container2" style="height: 400px; width:1200px"></div>
<div id="container3" style="height: 400px; width:1200px"></div>
<button id="export">Export all</button>
I just try to send it to to server.
Thank you all verry much in advance for the help.
Receive my Utmost Respect.
Kind Regards SP.
you can try this
var chart = $('#yourchart').highcharts();
svg = chart.getSVG();
var base_image = new Image();
svg = "data:image/svg+xml,"+svg;
base_image.src = svg;
$('#mock').attr('src', svg);
var dataString = $('#mock').html() ; // or just binary code
$.ajax({
type: 'POST',
data: dataString,
url: 'your-server/',
success: function(data){
}
});
Save highchart as binary image