There seems to be 2 separate issues behind this error. One is using scriptmanager instead of toolkitscriptmanager. I'm using toolkitscriptmanager but I get this error if I try to $create a control/behavior without already having one on the page. If I have a control on the page, without changing anything else, there's no error.
I'm using using the .net4.0 version of AjaxControlToolkit.
works:
<div id="divTest" style="height:500px; width:500px; background:#ccc">test</div>
<script>
Sys.Application.add_init(function () {
$create(
Sys.Extended.UI.ResizableControlBehavior,
{
"ClientStateFieldID": "ResizableControlExtender1_ClientState",
"HandleCssClass": "handle",
"HandleOffsetX": 0,
"HandleOffsetY": 0,
"MaximumHeight": 800,
"MaximumWidth": 800,
"MinimumHeight": 220,
"MinimumWidth": 478,
"ResizableCssClass": "resizing",
"id": "ResizableControlBehavior1"
}, null, null, $get("divTest"));
});
</script>
<div id="divWrapper" runat="server"></div>
<asp:ResizableControlExtender ID="divWrapper_ResizableControlExtender"
runat="server"
TargetControlID="divWrapper"
HandleCssClass="handle"
ResizableCssClass="resizing"
MaximumHeight="800"
MaximumWidth="800"
MinimumHeight="220"
MinimumWidth="478"
HandleOffsetX="0"
HandleOffsetY="0"></asp:ResizableControlExtender>
doesn't work:
<div id="divTest" style="height:500px; width:500px; background:#ccc">test</div>
<script>
Sys.Application.add_init(function () {
$create(
Sys.Extended.UI.ResizableControlBehavior,
{
"ClientStateFieldID": "ResizableControlExtender1_ClientState",
"HandleCssClass": "handle",
"HandleOffsetX": 0,
"HandleOffsetY": 0,
"MaximumHeight": 800,
"MaximumWidth": 800,
"MinimumHeight": 220,
"MinimumWidth": 478,
"ResizableCssClass": "resizing",
"id": "ResizableControlBehavior1"
}, null, null, $get("divTest"));
});
</script>
Problem solved!
All i needed to do was dig through the source of a working page and find this script tag and then copy it over to the broken version:
<script src="/myapp/mypage.aspx?_TSM_HiddenField_=ScriptManager1_HiddenField&_TSM_CombinedScripts_=%3b%3bAjaxControlToolkit%2c+Version%3d4.1.7.607%2c+Culture%3dneutral%2c+PublicKeyToken%3d28f01b0e84b6d53e%3aen-US%3afc974eef-02bb-4a84-98bd-02b839b496d1%3ade1feab2%3af9cec9bc%3a6beb6cd0" type="text/javascript"></script>
I'm just kidding. I switched to jquery.
Related
I really hope you will be able to help me...
I'm working with several pages...
In a first one, I created a radar chart with Chart.js. It worls perfectly well.
In a another part of my site, I want to summarize a certain number of information, including this chart. I'm creating my PDF with Html2pdf. And this doesn't work at all...
Chart is dynamic and the PDF is static, so not possible in this way...
I looked for other options, but not successfully at this point.
On of these options is converting the chart in image and call it in the PDF. I never found any example to really help me to do this. And I don't even know if this is feasable as the first page is not even issued at the same moment.
Does anybody could help me on this ?
Or is there any other option ?
Thanks
Here is the js code for the chart creation
<div class="holder">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<!-- <script //src="https://parall.ax/parallax/js/jspdf.js"></script> -->
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['Point_A', 'Point_B', 'Point_C', 'Point_D', 'Point_E', 'Point_F', 'Point_G'],
datasets: [{
label: 'Drivers',
data: [<? echo $point_a; ?>, <? echo $point_b; ?>, <? echo $point_c; ?>, <? echo $point_d; ?>, <? echo $point_e; ?>, <? echo $point_f; ?>, <? echo $point_g; ?>],
backgroundColor: [
'rgba(254, 175, 57, 0.8)',
],
borderColor: [
'rgba(254, 175, 57, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
r:{
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 6,
max: 60
}
}
}
}
});
</script>
I'm having a lot of trouble getting masonry to work alongside infinite scrolling. I've done everything I possibly can do and still nothing. Is there something wrong with my code, or did I just miss something completely?
This is my code:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
<script>
$(window).load( function() {
$('#content').masonry({
"itemSelector": ".entry",
"columnWidth": ".grid-sizer",
});
$container.infinitescroll({
itemSelector : ".entry",
navSelector : "#pagination",
nextSelector : "#pagination a",
loadingImg : "",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},
// trigger Masonry as a callback
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>
You are loading infinite-scroll twice (1st and 4th in the following code) and I do not see you are loading jQuery, which should be first. A jsfiddle would help to narrow down other issues.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
I am at the end of my wits. am developing my first chrome app.
manifest.json:
{
"name": "My App",
"description": "My App",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}
background.js:
chrome.app.runtime.onLaunched.addListener(function () {
// Center window on screen.
var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight;
var width = 1024;
var height = 768;
chrome.app.window.create('index.html', {
id: "myappid",
bounds: {
width: width,
height: height,
left: Math.round((screenWidth - width) / 2),
top: Math.round((screenHeight - height) / 2)
}
});
});
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My App</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<div id="main" style="position:relative">
<div id="board" style="position:absolute"></div>
<div id="div1" style="position:absolute;left:800px"></div>
</div>
</body>
</html>
app.js:
window.onload = function () {
console.log("inside main");
// rest of the code hidden
};
result of launching the app from extensions menu:
i click on inspect background:
and get:
i click on inspect index.html and get:
i am able to open index.html directly in browser and verify it works fine as a stand alone html page - the js executes etc.
As far as I can see, the code you have shown is correct.
Your manifest specifies the background page
The background page correctly listens for the event, and creates the main app window
The app window (index.html) appears on screen, and loads app.js
app.js waits for the window to load, and logs "inside main" to the *foreground page's * console.
Your Chrome app has a background page, and a foreground page, and so it has two consoles. What you have shown is exactly what I would expect to see, given the code you've posted. The background page's console (which you inspected first) is empty, and the foreground page's console (which you inspected by right-clicking and selecting "inspect element") contains "inside main".
If you wanted to, you could see a message printed to the background page's console by using the callback to chrome.app.window.create; something like this:
console.log("Going to create the window");
chrome.app.window.create('index.html', {
id: "myappid",
bounds: {
width: width,
height: height,
left: Math.round((screenWidth - width) / 2),
top: Math.round((screenHeight - height) / 2)
}
}, function() {
console.log("Successfully created the window");
});
That callback should execute before window.onload is fired in the foreground window.
Now, there aren't any errors shown in the foreground console, but without knowing what JavaScript, if any, is in this bit:
// rest of the code hidden
I can't tell what, if anything, should be executing.
I am trying to load a number of google charts on one page, however I am falling over trying to add the second.
I am testing the new Google Analytics SuperProxy feature, so the Data is being drawn in from a dataSourceURL
My code is below, as is the code works, however as soon as I uncomment out the section everything fails to load and for the life of me I cannot figure out how to fix this.
Hope someone can help.
<html>
<head>
<title>jmit</title>
<script type="text/javascript"
src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart","geochart"]}]}'>
</script>
<script type="text/javascript">
google.setOnLoadCallback(drawCharts);
function drawCharts(){
/*var data1 = new google.visualization.ChartWrapper({
"containerId":"Chart1_div",
"dataSourceUrl":"https://alexandalexaanalytics.appspot.com/query?id=ahdzfmFsZXhhbmRhbGV4YWFuYWx5dGljc3IVCxIIQXBpUXVlcnkYgICAgIDwiwoM&format=data-table-response",
"refreshInterval":3600,
"chartType":"GeoChart",
"options":{
"width": 630,
"height": 440,
"title": "test"
}
});
data1.draw();
}
*/
var data2 = new google.visualization.ChartWrapper({
"containerId":"Chart2_div",
"dataSourceUrl":"https://alexandalexaanalytics.appspot.com/query?id=ahdzfmFsZXhhbmRhbGV4YWFuYWx5dGljc3IVCxIIQXBpUXVlcnkYgICAgIDwiwoM&format=data-table-response",
"refreshInterval":3600,
"chartType":"ColumnChart",
"options":{
"width": 630,
"height": 440,
"title": "test"
}
});
data2.draw();
}
</script>
</head>
<body>
<h1>Test</h1>
<div id="Chart1_div"></div>
<p></p>
<div id="Chart2_div"></div>
</body>
</html>
You have an extra "}" after the data1.draw(); line, which is closing the drawCharts function. Removing that allows the queries to run, but you end up with conflicts between the two charts sending out queries to the same source for the same data. Since they are both running off the same data, it makes sense to use one query that populates both charts at the same time:
function drawCharts(){
var query = new google.visualization.Query('https://alexandalexaanalytics.appspot.com/query?id=ahdzfmFsZXhhbmRhbGV4YWFuYWx5dGljc3IVCxIIQXBpUXVlcnkYgICAgIDwiwoM&format=data-table-response');
query.setRefreshInterval(3600);
query.send(function (response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var dataTable = response.getDataTable();
var data1 = new google.visualization.ChartWrapper({
"containerId":"Chart1_div",
"dataTable":dataTable,
"refreshInterval":3600,
"chartType":"GeoChart",
"options":{
"width": 630,
"height": 440,
"title": "test"
}
});
data1.draw();
var data2 = new google.visualization.ChartWrapper({
"containerId":"Chart2_div",
"dataTable":dataTable,
"refreshInterval":3600,
"chartType":"ColumnChart",
"options":{
"width": 630,
"height": 440,
"title": "test"
}
});
data2.draw();
});
}
see it working here: http://jsfiddle.net/asgallant/j5eea/
There was a bug in the Google Analytics SuperProxy code which stopped multiple charts from running on a single page. This has now been updated, example html from githb is below.
Loads of thanks to asgallant for looking into this without his comments I wouldnt have know what to search for to answer this.
<! --
Based on demo video: https://www.youtube.com/watch?v=8Or8KIhpsqg
This shows you how to power 2 Pie Charts using the Google Analytics
superProxy. Each chart uses, as a data source, a public superProxy URL
with the format set to Data Table Response.
-->
<html>
<head>
<title>Pie!</title>
<!--Load the AJAX API-->
<script type="text/javascript"
src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1"}]}'>
</script>
<!-- Visualization -->
<!-- https://developers.google.com/chart/interactive/docs/reference#google.visualization.drawchart -->
<script type="text/javascript">
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var browserWrapper = new google.visualization.ChartWrapper({
// Example Browser Share Query
"containerId": "browser",
// Example URL: http://your-application-id.appspot.com/query?id=QUERY_ID&format=data-table-response
"dataSourceUrl": "REPLACE WITH Google Analytics superProxy PUBLIC URL, DATA TABLE RESPONSE FORMAT",
"refreshInterval": REPLACE_WITH_A_TIME_INTERVAL,
"chartType": "PieChart",
"options": {
"showRowNumber" : true,
"width": 630,
"height": 440,
"is3D": true,
"title": "REPLACE WITH TITLE"
}
});
var countryWrapper = new google.visualization.ChartWrapper({
// Example Country Share Query
"containerId": "country",
"dataSourceUrl": "REPLACE WITH Google Analytics superProxy PUBLIC URL, DATA TABLE RESPONSE FORMAT",
"refreshInterval": REPLACE_WITH_A_TIME_INTERVAL,
"chartType": "PieChart",
"options": {
"showRowNumber" : true,
"width": 630,
"height": 440,
"is3D": true,
"title": "REPLACE WITH TITLE"
}
});
browserWrapper.draw();
countryWrapper.draw();
}
</script>
</head>
<body>
<h1>Pie!</h1>
<div id="browser" style="margin:auto;width:630px;"></div>
<div id="country" style="margin:auto;width:630px;"></div>
</body>
</html>
I am using a fancy box iframe to create an overlay to display the contents of another page. I have a webhierarchicaldatagrid and on clicking a template column link the overlay is created. It seems to be working only for the first row of the grid and for all the other rows it is just opening the page without any overlay.Is there anything which I am missing in the code. Below is the code I am using:
<ig:TemplateDataField Key="Sipoc" Width ="06%">
<ItemTemplate>
<a class="iframe" id="ifrm" href="<%# String.Format("Sipoc.aspx?proj_id={0}&func_id={1}&subfunc={2}&jurisdiction_id={3}&proj_name={4}&owner_id={5}", Eval("Proj_Type_ID"), Eval("Function_Name"), Eval("Sub_Function_Name"), Eval("Jurisdiction_Name"),Eval("Proj_Type_Name"),Eval("Proj_Type_Owner_ID")) %>">
<asp:Image ID="Image1" ImageUrl='<%# Convert.ToString(Eval("Sipoc")) == "True"? "Sipoc.jpg": " " %>' runat="server" Visible='<%# Convert.ToString(Eval("Sipoc")) == "True"? true: false %>' ></asp:Image>
</a>
</ItemTemplate><header Text="Sipoc" />
</ig:TemplateDataField>
$(document).ready(function () {
$("#ifrm").fancybox({
'width': '100%',
'height': '100%',
"padding": 0,
"overlayShow": true,
"overlayOpacity": 0.5,
"zoomSpeedIn": 500, // has nothing to do with AJAX-ZOOM
"zoomSpeedOut": 500, // has nothing to do with AJAX-ZOOM
"hideOnContentClick": false, // important
"centerOnScroll": false,
"imageScale": true,
"easingIn": "swing",
"easingOut": "swing"
});
});