JQuery Signature not working for IE <= 9 - javascript

I am using JQuery Singature and I encountered this Error Message for above IE version:
Message: Canvas element does not support 2d context. jSignature cannot proceed.
update : After Added the (;) in the flashcanvas.js
The Problem is the Same:
Message: Expected ';'
flashcanvas.swf
Code: 0
I have downloaded the flashcanvas.swf and flashcanvas.js from:
https://github.com/brinley/jSignature/blob/master/libs/flashcanvas.js
https://github.com/brinley/jSignature/blob/master/libs/flashcanvas.swf
these two files I placed them in a Folder called Script.
It does not matter if I include or did not include flashcanvas.swf What I need to do?
here the javascript
<!--[if lte IE 9]>
<script type="text/javascript" src="Script/flashcanvas.js"></script>
<script type="text/javascript" src="Script/flashcanvas.swf"></script>
<![endif]-->
<script type="text/javascript" src="Script/jSignature.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("#divSignature").jSignature({width:400, height:140, mousedown:function(){}});
});
</script>

Just a syntax error, simply update the following at line 928 of flashcanvas.js:
function getSwfUrl(window) {
return ( (window[FLASH_CANVAS + "Options"] || {})["swfPath"] || BASE_URL ) + "flashcanvas.swf"; //Added semicolon
}
IE tend to be less lenient towards Javascript errors, which can be a good thing for programmers learning the language. Browsers like Chrome can accommodate a fair amount of JS errors and still correctly execute a script.

Related

Inline Scripting issue in windows 10 apps with Microsoft edge

Im developing Windows 10 store apps Javascript/Html and since there is Microsoft EDGE in apps as the browser, inline scripting no longer works. If i put the code in an external file, the page loads, but none of the click events work. Is there any solution for this. Small example where onclick attribute does not work.
Code
default.html 7 default.js
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
function gored() {
document.body.style.backgroundColor = red;
}
(function () {
"use strict";
WinJS.Binding.optimizeBindingReferences = true;
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
var isFromBackground = false;
app.onactivated = function (args) {
var localSettings = Windows.Storage.ApplicationData.current.localSettings;
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
}
};
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// args.setPromise().
isFromBackground = true;
};
app.start();
})();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App1</title>
<!-- WinJS references -->
<!-- To get the latest version of WinJS, go to: http://go.microsoft.com/fwlink/?LinkId=533245 -->
<link href="WinJS/css/ui-dark.css" rel="stylesheet" />
<script src="WinJS/js/WinJS.js"></script>
<!-- App1 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<p>Content goes here</p>
<button onclick="gored()"> Click Me</button>
</body>
</html>
I went into detail about this in a blog post.
Windows HTML5 apps have a strict security setting, especially when it comes to injecting code at runtime via JavaScript. I ran into this issue before as well.
You can wrap the function that you are using to inject the Javascript with another function, MSApp.execUnsafeLocalFunction().
When attempting to dynamically insert a div, Windows 8 throws an error. Specifically, it’s when trying to use something like:
div.innerHTML = "A string of some stuff"
HTML1701: Unable to add dynamic content ' a' A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement. For more information, see http://go.microsoft.com/fwlink/?LinkID=
Reason:
The reasoning behind all of these problems is the same, so I’ll just state it here once for the sake of brevity. `Microsoft fears that the string can be intercepted somewhere along the line, and malicious content can be added to the values of your string.
Work Around:
The big issue with this method is that you’re trying to use innerHtml. Instead, use .append.
That still won’t work if you just try to pass in a string, however. What you need to do is set your string to a variable, then pass in that variable. If you do not create an object (that is, setting the string to a variable) then this will not work. If you just try to use a string, then you’ll see nothing but text where the div should be.
Here’s a single line example:
$panel.append('<'img src="' + item.thumbImageUrl +'" >');
If you try to pass that in, Windows 8 will throw the error seen above. Even if I wrap that in MSApp.execUnsafeLocalFunction() I will still see an error.
The workaround is as follow:
var appendString = '<'img src="' + item.thumbImageUrl '" >';
$panel.append(appendString);
Because I’m now taking that string and setting it to a variable (thereby turning it into an object), Windows 8 will allow me to pass in that object and create dynamic content.
Even then, it will occasionally throw the error above. HOWEVER, if you were to wrap that object in MSApp.execUnsafeLocalFunction(), you would then be in the clear. WinJS offers a function to wrap your own functions in, which allows you to basically say “I take responsibility for this function, and I assure you it’s safe.” That function is called: MSApp.execUnsafeLocalFunction().
So the final solution looks like this:
var appendString = '<'img src="' + item.thumbImageUrl '" >';
MSApp.execUnsafeLocalFunction(function() {
$panel.append(appendString);
});
You can read more about this issue here.
Further Reading:
execUnsafeLocalFunction from MSDN
TutsPlus tutorial on jQuery and Win8
I had a similar problem and found that a script read in the header did not work but when I moved it to the body, it did:
WORKS ON MOST BUT NOT ALL PAGES WITH 'EDGE'. WORKS WITH ALL PAGES ON ALL OTHER BROWSERS:
LT script type="text/javascript" src="../ie5.js" GT LT /script GT
LT script type="text/javascript" src="../common_functions.js" GT LT /script GT
LT /head GT
LT body GT
WORKS ON ALL PAGES WITH 'EDGE' AND OTHER BROWSERS:
LT /head GT
LT body GT
LT script type="text/javascript" src="../ie5.js" GT LT /script GT
LT script type="text/javascript" src="../common_functions.js" GT LT /script GT
Why? Only Microsoft will know.

Framework.js gives error on internet explorer 8

I'm facing a problem on internet explorer 8 while including the IN API. Here's the code, I'm not doing anything fancy at all, just including some files.
<script type="text/javascript" src="https://platform.linkedin.com/in.js">
api_key: <?php echo API_KEY . "\n"; ?>
credentials_cookie: true
authorize: true
</script>
<script type="in/login" data-onAuth="onLinkedInAuth"></script>
And then I have this onLinkedInAuth function defined that isn't doing much right now. This piece of code produces an error in IE8, coming from the framework.js file, refering to line 1070 :
b.fn.apply((b.scope||window),c)
Has anyone fixed that before ?!

Html to Haml conversion javascript

I have this html code. I want it to convert to haml format.
-->
<script type="text/javascript">
window.jQuery || document.write("<script src='assets/jquery-2.0.3.min.js'>"+"<"+"/script>");
</script>
<!--<![endif]-->
This is how I convert it to haml.
/ [if !IE]>
:javascript
window.jQuery || document.write("<script src='assets/jquery-2.0.3.min.js'>"+"<"+"/script>");
/ <![endif]
but I got this error Illegal nesting: nesting within a tag that already has content is illegal. Any idea why? or what is the right way to convert this code to haml?
Haml includes support for IE conditional comments, the sytax is / [cond], without the closing >
In your first line:
/ [if !IE]>
the last > is being treated as content, and you also nest the :javascript filter as content. This is why you get the nesting within a tag that already has content is illegal error.
However, you can’t use the !IE condition this way, you’ll end up with a single comment that all browsers will ignore. You’ll need to no something like this, using literal HTML:
<!--[if !IE]> -->
:javascript
window.jQuery || document.write("<script src='assets/jquery-2.0.3.min.js'>"+"<"+"/script>");
<!-- <![endif]-->

What would make Internet Explorer NOT process conditional comments properly?

I'm writing JSP pages and using Tomcat, and it needs to work for IE 7 in addition to Firefox and Chrome (client needs).
In my program, I include both pieces of code. It works properly for non-IE browsers.
My problem is that CODE A does not work properly for IE, in that it treats it like a comment rather than a conditional comment that it should be reading. Any idea why this would happen and how to fix it?
<script type="text/javascript">
...
<!-- CODE A -->
<!--[if IE]>
url = "http://" + "..." + "&var=1";
<![endif]-->
<!-- CODE B -->
<!--[if !IE]> -->
url = "http://" + "..." + "&var=1";
<!-- <![endif]-->
...
</script>
Conditional HTML comments only work in HTML. JavaScript is not HTML. Rather use conditional JS comments in JS:
var IE = /*#cc_on!#*/false;
(only IE will interpret the ! which effectively makes it true)
Then you can use it as follows
if (IE) {
url = "http://" + "..." + "&var=1";
} else {
url = "http://" + "..." + "&var=1";
}
Feature detection should however be preferred in JS.

Scriptaculous load parameter in FF 2.0.x

Greetings all,
I am attempting to explicitly load the effects.js and builder.js Scriptaculous libraries on a page, using this code:
<script type="text/javascript" src="/javascripts/scriptaculous.js?load=builder,effects"></script>
This works like a charm in FF 3.0.x, IE7 and Opera 9.6.x. It does not work in Firefox 2.0.x, however. The libraries never become loaded. In order to get them to load in FF 2.0.x, I must explicitly reference them with two extra <script /> tags, i.e.:
<script type="text/javascript" src="/javascripts/scriptaculous.js?load=builder,effects"></script>
<script type="text/javascript" src="/javascripts/builder.js"></script>
<script type="text/javascript" src="/javascripts/effects.js"></script>
Does anyone happen to know what the discrepency between FF 2.0 and 3.0 is that causes this behavior? Is there a better solution to my problem?
Thanks for your help!
I've had too much coffee today, so I figure I will give this a go.
One possibility is the load function in scriptaculous.js does not correctly do the processing to include the libraries passed to it as parameters (scriptaculous.js?load=builder,effects).
Try putting in an alert to see if the load function in scriptaculous.js is being entered into, if it is, then the process probably doesn't do what it's supposed to on FF2:
load: function() {
alert('In the load function!');
...rest of code here...
If it isn't, then (maybe) firefox 2 does not want to execute load.
The last part of load seems to do the work for including other libs:
$A(document.getElementsByTagName("script")).findAll( function(s) {
return (s.src && s.src.match(/scriptaculous\.js(\?.*)?$/))
}).each( function(s) {
var path = s.src.replace(/scriptaculous\.js(\?.*)?$/,'');
var includes = s.src.match(/\?.*load=([a-z,]*)/);
(includes ? includes[1] : 'builder,effects,dragdrop,controls,slider,sound').split(',').each(
function(include) { Scriptaculous.require(path+include+'.js') });
});
From the above code, I can see that the includes variable should parse out the library names, see if that's being assigned anything, replace it with something like:
var includes = s.src.match(/\?.*load=([a-z,]*)/);
alert(includes[0] + ' ' + includes[1]);
That should give you a better idea of what's going on. While this is an interesting little problem, I would definitely go with the solution you proposed:
<script type="text/javascript" src="/javascripts/scriptaculous.js"></script>
<script type="text/javascript" src="/javascripts/builder.js"></script>
<script type="text/javascript" src="/javascripts/effects.js"></script>

Categories