I have this code, where the example runs perfect, but If I open Chrome console it always raises highchart error #16, do anybody knows why?
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
"exporting":{"enabled":true},
"title":{"text":"Fruit Consumption"},
"xAxis":{"categories":["Apples","Bananas","Oranges"]},
"yAxis":{"title":{"text":"Fruit eaten"}},
"series":[{"name":"Jane","data":[1,0,4]},{"name":"John","data":[5,7,3]}],
chart:{renderTo:'container'}
});
});
});
</script>
Looks like you're loading Highcharts.js in the HTML body. If you look at the installation docs, it says to load the script in the <head></head> tags. I was having the same problem as you so I threw in a break point at the line referenced in the comments above:
windows.Highcharts = windows.Highcharts ? error(16, true) : {};
What I found was that the breakpoint would break twice. the first time it fired, during the browser parsing the Highcharts.js would establish the Highcharts namespace. Next time around, it would fire error #16. this would only occur when I loaded the script at the end of the Html page which was part of an effort to improve the performance of the JavaScript loading on our site. Putting it back in the head eliminated the problem. I'm not sure if there's a workaround yet. Still looking into it.
Related
I have problem with mobile/tablet version of page which I create
I need this: When someone look at product detail and move him to right/left (touch/swipe) then I need load next/previous product detail (= Example: Now I on page with id=2 when I go right, then I load page with id=3, npw I on page with id=3 and I go left then I load page with id=2.. etc.. with different pages id).
I look in thread here, but this solution is not dynamic and I have problem applicate it. Next I inspirated in W3C here.
Now I have these codes which not work:
JS file:
$(document).on('pageinit', function() {
$('.epicFullscreen').bind('swipeleft', function(event,ui)
{
$.mobile.changePage("http://www.some_domain.cz/category/page_name-1/","slide");
});
$('.epicFullscreen').bind('swiperight', function()
{
$.mobile.changePage("http://www.some_domain.cz/category/page_name-3/","slide");
});
});
$(document).on('pagehide', function () { $(this).off('swipeleft swiperight'); });
HTML:
<script src="funkce/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="funkce/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script src="funkce/skripty.js" type="text/javascript"></script>
I need use old JQuery 1.7.1. because this site using it and everything works fine, with newer JQuery I can have new problems. For that I use older JQuery-mobile 1.3.2. which must work with JQuery 1.7.1. ("jQuery Mobile 1.3 supports jQuery 1.7 and newer") . I can´t include "jquery.mobile-1.3.2.min.css" because this styles not work together with my styles correctly.
HTML in body is like that:
<div class="epicFullscreen">
<img class="epicImg" src="../../data_9/11normal.jpg" alt="inspirace č.2" title="inspirace č.2" border="0" />
</div>
Now I have dynamic solution with arrows (right/left) and with adding correct urls with PHP, but on tablet/mobile user like using touch not clicking on arrows etc...
=> Where I have problem and why not work my current solution? And how I can change this static JS to dynamic JS?
try this simple code .....
$(document).on("swipeleft", '#'+event.target.id, function () {
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
alert(nextpage.attr('id'));
$.mobile.changePage(nextpage, "slide", false, true);
}
});
$(document).on("swiperight", '#'+event.target.id, function () {
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, { transition: "slide", reverse: true }, true, true);
}
});
I found solution for that I make this answer. I simplify my problem and create simple page.
Code
<!DOCTYPE html>
<html>
<head>
<!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">-->
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).on("pageinit",function(){
var pathname = $(location).attr('href');
var leva = $('#le').attr("href");
var prava = $('#pr').attr("href");
$("body").on("swiperight",function(){
<!--alert("You swiped right!");-->
location.href=prava;
});
$("body").on("swipeleft",function(){
<!--alert("You swiped left!");-->
location.href=leva;
});
});
</script>
</head>
<body>
<div id="test_div" style="display: block;">
<img src="test.gif" width="100px">
<a id="le" href="http://www.some_domain.cz/category/page_name-1/">left</a>
<a id="pr" href="http://www.some_domain.cz/category/page_name-3/">right</a>
</div>
</body>
</html>
I have this one hack - in PHP I know on which page I am, which page is before and which is next, I add this links it to arrows (which have tag "a"). This function working perfect. But I use this functional code to get correct URL => I don´t need some big function in JQuery which can split actual url with RegEx, know on which page I am, know if exist next page etc... Now I must only style this code to my page, but this is working.
I thank Omar for his time and I close this topic.
I am experiencing some very odd problems with Polymer.dart when compiled to javascript. It works fine in Dartium. This app did work a couple of months ago. However Polymer has undergone lots of changes since then, so I have had to make loads of changes just to get it to compile. I have tried this in polymer 3.2 through to the latest build in pub, all behave the same. I am running an up to date Dart install on the stable branch.
I get the following Javascript error:
TypeError: $document.register is not a function
On the last line of the js below. The tag variable is "polymer-element".
})(H.convertDartClosureToJS(W._callAttributeChanged$closure(), 4)))};
proto = Object.create(baseConstructor.prototype, properties);
t2 = H.makeLeafDispatchRecord(interceptor);
Object.defineProperty(proto, init.dispatchPropertyName, {value: t2, enumerable: false, writable: true, configurable: true});
options = {prototype: proto};
if (!t1)
options.extends = extendsTagName;
$document.register(tag, options);
From what I can see the polyfills aren't loading so the document.register method hasn't been declared.
Below is from my HTML File
<head>
<script src="index.dart" type="application/dart"></script>
<script src="packages/browser/dart.js"></script>
<script src="packages/browser/interop.js"></script>
</head>
My index.dart looks like
void main() {
window.alert("Dart Lives!");
initPolymer().run(() => initPresentation());
}
void initPresentation() {
//Show the first screen
}
When running under Javascript I get the alert box showing followed by the Javascript error. So I don't think there is anything wrong with the basic dart environment.
EDIT
This has changed.
An up-to-date answer is here
Polymer querySelector working on DartVM but not in Chrome after compile
OLD
Hard to tell.
I think index.dart should look like
<head>
<script type='application/dart'>
export 'index.dart';
</script>
</head>
or
<body>
...
<script type='application/dart' src='index.dart'></script>
</body>
see https://code.google.com/p/dart/issues/detail?id=17546#c16
The problem is that placing a C# variable within a JS function within a #Section produces incorrect javascript (in MVC 4 only).
In a JS function in MVC 3, everything executes as expected.
#section test {
<script type="text/javascript">
$(function () {
alert(#DateTime.Now);
});
</script>
}
Take this exact same code and place it in an MVC4 app and you will get malformed JS.
The HTML on the page will actually render the following:
<script type="text/javascript">
$(function () {
alert(12/27/2011 11:04:04 AM);
and the html will emit
); }
Note the closing script tag is not produced.
It appears the closing curly brace in the JS function is confused the be the closing curly brace in Razor.
Note that I am also declaring a RenderSection("test",false") in my _Layout.cshtml file.
Slightly old reply, but I was experiencing the same issue, soI have submitted a feedback report on Microsoft.Connect hopefully it should get sorted before full release.
https://connect.microsoft.com/VisualStudio/feedback/details/720079/mvc-4-javascript-in-section-issue
I know have been a wile since the question was asked, but you can also try something like this.
#section test {
<script type="text/javascript">
$(function () {
alert(#(DateTime.Now));
});
</script>
}
Note the "()" after the #.
Hope this help.
Sorry, I just couldn't help but chime in here... I don't see how the syntax in the initial question would actually work. When I try it in MVC3, in VS2010, it puts a green squiggly line under the "DateTime", and when you hover over that, it says "Conditional compilation is turned off". But if I surround it in quotes, it does work, as in:
#section test {
<script type="text/javascript">
$(function () {
alert("#DateTime.Now");
});
</script>
}
And then when I run it (F5) it displays the JavaScript alert as expected, and when I view source it renders:
<script type="text/javascript">
$(function () {
alert("07/09/2012 10:41:26");
});
</script>
What I ended up doing for now was emitting the closing JS func in #Html.Raw().
Since this is so easy to recreate, I'm going to submit this as a bug to Microsoft.
#section test {
<script type="text/javascript">
$(function () {
alert(#DateTime.Now);
#(Html.Raw("});"))
</script>
}
I've seen problems like this. Wrap your alert statement in <text></text> tags
Definitely a bug. I prefer this workaround over the one you posted. For some reason, other razor elements seem to interpret the brackets correctly, so I simply wrap the script content in another set of braces.
#section test {
if (true) {
<script type="text/javascript">
$(function () {
alert(#DateTime.Now);
});
</script>
}
}
What's the right way to initialize objects on a jquery mobile page? The events docs say to use "pageInit()" with no examples of that function, but give examples of binding to the "pageinit" method (note case difference). However, I don't see the event firing at all in this simple test page:
<html>
<body>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<div data-role="page" id="myPage">
test
</div>
<script>
$("#myPage").live('pageinit',function() {
alert("This never happens");
});
</script>
</body>
</html>
What am I missing? I should add that if you change pageinit to another event like pagecreate this code works.
---- UPDATE ----
This bug is marked as "closed" in the JQM issue tracker. Apparently opinions differ about whether this is working properly or not.
It started working when I embedded script within page div:
<body>
<div id="indexPage" data-role="page">
<script type="text/javascript">
$("#indexPage").live('pageinit', function() {
// do something here...
});
</script>
</div>
</body>
Used jQuery Mobile 1.0RC1
.live() is deprecated, suggestion is to use .on() in jQuery 1.7+ :
<script type="text/javascript">
$(document).on('pageinit', '#indexPage', function(){
// code
});
</script>
Check the online doc for more information about .on(): http://api.jquery.com/on/
Turns out this is a bug in 1.0b3 that is fixed in the current head. So if you want a fix now, you gotta grab the latest from git. Or wait for the next release.
jQuery(document).live('pageinit',function(event){
centerHeaderDiv();
updateOrientation();
settingsMenu.init();
menu();
hideMenuPopupOnBodyClick();
})
This is working now. Now all page transitions and all JQM AJAX functionality would work along with your defined javascript functions! Enjoy!
pageinit will not fire in case it is on secondary pages ( NOT MAIN page ) if it is written in common <script> tag...
I have such a problem - on secondary pages that are not loaded with 'rel="external"', the code in the common <script> tag is never executed...
really this code is always executed...
<body>
<div id="indexPage" data-role="page">
<script type="text/javascript">
$("#indexPage").live('pageinit', function() {
// do something here...
});
</script>
</div>
</body>
althrough if you made "tabbed interface", using of "pageshow" is better
I had to put the script in the HTML page section which to me is a bug. It is loaded normally in a browser (not via AJAX) and all on a single page including javascript. We're not supposed to have to use document ready.
The easiest way I found to deal with this was to use JQM + Steal. It works like a charm as long as you put:
<script type='text/javascript' src='../steal/steal.js?mypage'></script>
Inside of the data-role='page' div.
Then use AJAX to connect anything that can use the same mypage.js and use an external link (by using the rel="external" tag) to anything that requires a different steal page.
#Wojciech Bańcer
From the jQuery docs:
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
Try this:
$('div.page').live('pageinit', function(e) {
console.log("Event Fired");
});
$(document).on("pageinit", "#myPage", function(event) {
alert("This page was just enhanced by jQuery Mobile!");
});
The events don't fire on the initial page, only on pages you load via Ajax. In the above case you can just:
<script>
$(document).ready(function() {
alert("This happens");
});
</script>
Does jQuery UI support showing the number inside the Progressbar, like this:
Not to drudge up an old thread, but I was attempting this earlier tonight and used the following in my CSS:
.progressBarClass{
height:20px;
width:300px;
margin:0 auto;
}
.progressBarClassspan {
width:300px;
position:absolute;
text-align:center;
font-weight:bold;
}
And have the following in my HTML:
<script type="text/javascript">
$(function() {
$( ".progressBarClass" ).progressbar({
value: 50
});
});
</script>
<div class="progressBarClass"><span>50%</span></div>
Does the trick for me, although I need to come up with a better method to allow for percentages on the .ui-progressbar class instead of fixed values.
If it isn't any official way, you can add it. Just inspect the generated code with FireBug on Mozzila, get the id/class of the container and add the numbers in there yourself.
I never used jQuery UI's progressbar so I can't do that right now, but I'm sure it's not hard...