I'm having some weird issue with extjs. I have a form and a grid, each works great separately but when I put the grid inside the form, everything starts to fall to pieces.
My point by doig so would be to be able to submit ids from rows of the grid and at the same time, stuff from the form.
To do so, I put the standardSubmit to false and added a javascript method to the onSubmit attriobute of my form.
However, when I submit the form this way, I get a weird error :
Uncaught SynthaxError: Unexpected token <
But the form values are submitted and visible in the request's header. Of course, when I put the standard submit to true, the error goes away but the values from the grid are not submitted anymore...
This SyntaxError usually relates to a loaded JavaScript resource. These are common mistakes that can trigger this error message:
<script type="text/javascript">
<script type="text/javascript">
[...]
</script>
</script>
<script type="text/javascript">
var s = I forgot the opening quotes so this <html> tag will break the script';
</script>
<script type="text/javascript"
var s = 'Here we forgot to close the opening <script> tag! Boom!';
</script>
It could also be triggered by the server setting the content type to 'application/javascript' for a non-JS resource (which then again includes this tags).
I also remember reading that this happened to someone using a minified version of a JavaScript library, but no details on the exact reason were given (other than that the problem was solved by using the non-minified version.
You can also wrap your JS resources in a CDATA tag for debugging purposes which should get rid of the SyntaxError and probably bring up a standard JS error message for the invalid script.
<script><![CDATA[
/* Code here */
]]></script>
Once you identify the resource that triggers the exception it should be possible to spot the problem by doing a through study of the source with your CSI sunglasses on.
Note: my assumption is that it can*not* be triggered by data that is sent to the server, but only data that is returned from the server. This is because the error refers to the parsing process on the client. But I'm not 100% sure on this one.
If this doesn't help you should really post the involved code and/or explain what you do exactly when you 'added a javascript method to the onSubmit attribute of [your] form'.
Related
this undefined error is thrown by Azure B2C when i try to signup an existing user can i fix this issue somhow?
Workaround
To workaround this issue and display the correct error message, you can do the following:
If you haven't already, follow these steps to add a custom HTML template for the page.
If you haven't already, follow these steps to enable JavaScript in your custom template.
In the B2C authentication screens, open the browser dev tools and reproduce the error that causes "undefined" to be displayed. Then, locate the last network request and inspect the response JSON, noting the errorCode and message properties.
Add the following script to the bottom of your custom HTML template (inside the <body> tag), replacing the error code and message with the one from your devtools. If you like, you can also customise the error message.
<script type="text/javascript">
if (CONTENT) {
CONTENT['UserAccountNotFound'] = CONTENT['UserAccountNotFound'] ?? 'A user with the specified credential could not be found.'
}
</script>
Upload the updated HTML template, and the correct error message should not be displayed.
Explanation
It seems that undefined is being displayed due to Microsoft having a bug in the page's JavaScript. The variable u is initially set to the correct message, while f is set to the string 'undefined' as the errorCode is not found in the page's lookup dictionary. Then the next line contains u = f which results in the string 'undefined' being printed as the error.
To workaround this, we need lookupLanguage to return the correct string. To do this, we need to add items to the page's lookup dictionary, which helpfully is a global variable named CONTENT that can be easily modified in a custom script.
In the future, Microsoft will hopefully fix this bug so that the workaround will no longer be needed.
I have been trying to use angular intro js in my mockup angular js project the modal that asks whether the user needs to go through the tutorial is visible, However when I click the ok button that invokes the callMe method , an error is printed in the console stating,
message:"Intro.js is not available. Make sure it is properly loaded."
name:"Introjs not available."
Could anyone suggest where I am going wrong?
Make sure you have refered the angular-intro library and also injected as a dependency.
Reference:
<script src="intro.min.js"></script>
<script src="angular-intro.js"></script>
<script src="app.js"></script>
Module:
var app = angular.module('myApp', ['angular-intro']);
DEMO
Just to add to Sajeetharan's comment: It turns out that the order of dependency MATTERS. You must include the intro.js first, then angular-intro.js, then the main app.js.
Otherwise, you might get
Intro.js is not available. Make sure it is properly loaded." name:"Introjs not available.
I have been trying to use the angular-timer, in my angularjs app, but I keep getting this error "TypeError: moment.locale is not a function".
I added my scripts like so. please can someone help me out?
<script src="assets/_plugins/classroom/angular-timer/angular-timer.min.js"></script>
<script src="assets/_plugins/classroom/moment/min/moment.min.js"></script>
<script src="assets/_plugins/classroom/angular-timer/humanize-duration.js"></script>
<script src="assets/_plugins/classroom/moment/min/locales.min.js"></script>
<script src="assets/_plugins/classroom/moment/min/moment-with-locales.js"></script>
Looks like your order might be wrong. I would guess that angular-timer depends on moment, locals and moment-with-locals, so it should be last in the loading order.
Update:
Alternatively, as plugin implementation can be problematic. I created a working demo of a custom timer/countdown for a user's question here, perhaps it can be adapted for your solution or at least lead you in the right direction.
You set an end time and supply a function to run when that end time is met.
In a recent question (Reference Angular binding from javascript) I asked how to bind a generated SVG to a specific div. I got two good answers which I've been tinkering with since.
I'm trying to display a SVG image which gets built based on specific properties.
Basically I have a tiny Angular script which includes a number of functions for generating svg code, e.g.:
.controller('ctlr',['$scope','$sce', function($scope,$sce) {
$scope.buildSvg(width, height, obj){
var img = ...call a lot of svg-functions
return $sce.trustAsHtml(img);
}
My intention is to include this on the web page via:
<div ng-bind-html="buildSvg(60,140,item)">svg should go here</div>
However, I have a hard time getting this to work, at least with the javascript generated SVG tags, it works if I copy paste the img code into another $scope variable (and add a lot of escaping) and then include it via ng-bind-html.
As the code is available on Plunker here:
Example
I get the following error:
Error: [$sce:itype] http://errors.angularjs.org/1.4.0/$sce/itype?p0=html
at Error (native)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:6:416
at $get.trustAs (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:140:269)
at Object.$get.d.(anonymous function) [as trustAsHtml] (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:142:444)
at m.$scope.buildSvg (file:///C:/Dropbox/workspace/famview/public/javascripts/svgController.js:37:16)
at fn (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:210:400), <anonymous>:2:301)
at Object.get (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:115:108)
at m.$get.m.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:131:221)
at m.$get.m.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:134:361)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:19:362
Do I need to somehow inform $sce to escape string literals in the SVG tags?
I think your problem is more regarding to how you are binding the object in html. I mean, the fact that you are returning the object through a function can be the cause of the problem. Moreover, if you see angular logs, they are complaining about "digest" and "apply", that is the life cycle of all the binding in Angular.
So basically, you will be able to solve that doing $sce.trustAsHtml(SVGSTRING) as you did, but saving it before in a variable like $scope.svg.
SCRIPT.js
$scope.svg = $sce.trustAsHtml(SVGSTRING);
And in the html should be as simple as that
HTML
<div ng-bind-html="svg"></div>
It should work, I am putting you a plunker in which you can see how it even works retrieving data from a request
http://embed.plnkr.co/gQ2Rrn/
Hope this helps
I have a backbone.js CMS of sorts, that accepts html and then renders it in the browser. The following is the template file (in .hamlc) that renders the backbone page object.
%h1.text= #page.get('title')
.text.page-content!= #page.get('content')
This works fine, until I have a <script> tag. I have a script tag for a widget (below)
<script src='http://www.opentable.com/frontdoor/default.aspx?rid=52900&restref=52900&bgcolor=8AA86B&titlecolor=0F0F0F&subtitlecolor=0F0F0F&btnbgimage=http://www.opentable.com/frontdoor/img/ot_btn_black.png&otlink=FFFFFF&icon=light&mode=short&hover=1'></script>
This widget uses document.write (which you can see if you look at the source). First, when I load the page it doesn't show anything (I've tested the widget in an html file by itself and it displays their normal god-awful ). When I inspect the element, it looks like the script tag was removed.
However, when I test with the following:
<script type="text/javascript">
alert(0);
</script>
It runs. Still nothing in the inspector though.
Finally, testing with the following:
<script type="text/javascript">
document.write('test');
</script>
It also runs. However, it completely destroys the page content and just shows 'test'.
According to this article about using document.write for widgets, it says it can't be run after the page load. I'm assuming that's what's happening here is that document.write is being run after page load and destroying all the content, given that's the technique backbone.js uses (appending/replacing elements in the DOM once the page is loaded).
How can I make my Backbone.js CMS accept script tags with document.write widgets without either not showing anything or destroying the entire page?
I cannot reproduce it, the template renders as it should:
$ coffee
coffee> hc = require './src/hamlc'
{ compile: [Function],
template: [Function],
__express: [Function] }
coffee> template = hc.compile ".text.page-content!= #content"
[Function]
coffee> template(content: 'Hello <script>Script</script>')
'<div class=\'page-content text\'>Hello <script>Script</script></div>'
and the script tag is persisted. Do you have the latest version installed?
You're calling document.write after the page has been loaded, so it'll overwrite the whole page. You could try putting the script tag in an iframe, or monkey patch document.write to behave differently after the page has been loaded. See the top answer on this question:
Dynamically added JavaScript overwrite the html page view (not the code)
If I understand correctly, you're trying to include the script tag for the widget inside a template, which means it's being inserted after the initial DOM is ready. That won't work for the reasons you mentioned; when the script executes, it will replace everything in the DOM.
You need to load the script before the initial DOM is complete, that is either in <head> or at the beginning of <body>. That in turn means that you have to include the script tag in your initial HTML as delivered by the server rather than trying to dynamically generate it client-side.