I'm facing very strange behaviour in Chrome & Mozilla from jQuery. I'm getting very generic Unexpected token ILLEGAL error on my document.ready function.
While playing with a signaturepad sample, I tried it with my own page. It is not working in Mozilla & Chrome, but is working in IE. Then I removed all references of signaturepad and put a simple one alert inside document.ready function and observed (Thanks to Chrome JavaScript Errors Notifier) Unexpected token ILLEGAL error is occurring when system try to use jQuery reference. Then I copied all the text from the sample page (a.html), where it works perfectly inside this page (b.html), and ran the page again. I'm surprised the a.html page is working fine while b.html page is throwing the error. Both pages are on the same directory and have the same content.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title> </title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<link href="css/jquery.signaturepad.css" rel="stylesheet">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
alert('hai');
})
</script>
</body>
</html>
Problem fixed now. Issue was in Encoding through which file was saved. The problematic file was saved with Unicode-1200 while it should be saved with Unicode-65001.
Thanks all for answering/comments.
Regards
I would do a few things that may sound silly --
Add a <!DOCTYPE html> tag to the top -- jquery mobile likes it
remove the indentation in front of your <html lang="en"> tag
redownload or try to use a hosted jquery library (e.g. from google) to see if that's it
add a closing ; after your })
Related
I have a classic asp application which runs on the IE 11 Enterprise mode, where I added the jQuery popup with some search function on it. This functionality works properly with Normal mode but not with Enterprise mode(search functionality and CSS for popup to look decent). Anybody knows the reason?
I have added the below libraries.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="../javascripts/lib/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="../javascripts/lib/chosen_v1.1.0/chosen.jquery.min.js" type="text/javascript"></script>
And there are tow other JavaScript file which is related to the popup functionality.
The page is a part of the iframe and iframe contain the above changes.
I would appreciate your help. Thanks in advance.
I found the answer and below are the changes.
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11">
I'm trying to get the Facebook Post embed working on my own site using their JS SDK but it doesn't seem to show up.
Some inline styles on the embedded iframe and the span it encapsulates it, controls the display of the widget.
I found some hacks but they aren't perfect. I used facebook's JS playground on the same code and it works.
There aren't any stylesheet interfering with this file and no extension as well as I checked in firefox and the result was the same.
edit: posting the code here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.12" async></script>
<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>
</body>
</html>
Kindly see the photo attachment.
Thanks
P.S. Facebook code is directly copied from their docs, HERE
I assume you tried this by just opening the HTML file in your browser. You have to open it using a local or remote server. If i start it with a local server with the exact same code, it works perfectly fine.
For example: https://www.npmjs.com/package/http-server
I have this snippet loading to iframe of a bigger app, having scripts declarations in the <head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="my-script.js"></script>
...
But I'm getting 'Ext' is undefined error thrown from within my-script.js.
Dev tool revealed that both started to load in parallel and my-script.js has finished loaded first as it is much smaller.
So here is a question: why is that IE uses asynchronous mode by default for ordinal scripts definition?
And how could I fix the issue?
Try using defer on both script tags like
<script type="text/javascript" src="ext-all.js" defer></script>
<script type="text/javascript" src="my-script.js" defer></script>
If this won't help, try loading ext-all.js first and use
Ext.onReady(function() {
// load my-script.js
});
to load your own script.
More of "defer": http://www.w3schools.com/tags/att_script_defer.asp
The issue I have is the same as the 2 below:
Link 1
Link 2
The problem I have is that my app is an AngularJS page which use ui-router which is not supported in IE8.
To be able to correctly display SSRS report I have to add this meta to the root page:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
But this cause lots of issues with page display, I need to find different solution.
I was trying something like the below, but no luck:
<iframe class="ssrs-frame" type="text/html" ng-src="{{trustSrc(SSRS.url)}}" frameborder="0">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
</body>
</html>
Is there any way I could force Iframe only to emulate with IE8?
If you want to have specific CSS for IE8 you could use (inside head):
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->
That works. I don't know if HTML also allows this, you should test it:
<!--[if IE 8]><iframe></iframe><![endif]-->
Else you could create 2 iframes, 1 which you show for IE8 and 1 which does not. You could set display: block inside the ie8.css file for the specific iframe.
Hope this helps. Cheers
I have a simple Angular app which is loaded into a third party frameset - yes a frameset.
The app loads fine in Chrome and IE8 but doesn't at all in IE9.
When testing outside the frameset in IE9, it loads fine. As such I think the issue is that the frameset triggers IE9 quirks mode, and Angular just doesn't want to load in quirks mode.
I can't force standards mode because I only have control of the code within the frame.
Essentially my question is - is it possible to get Angular (v1.2.26) working in IE9 quirks mode or is it a lost cause?
I've tried everything from the Angular IE guide, and also disabled sce.
$sceProvider.enabled(false);
Below is the index.html that is loaded within the frameset.
<!DOCTYPE html>
<html
xmlns:ng="http://angularjs.org"
xmlns:ui="http://angular-ui.github.io"
xmlns:az="xxxx"
id="ng-app"
ng-app="xxxx">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>xxxx</title>
<link rel="stylesheet" href="styles/vendor-b543e73e.css">
<link rel="stylesheet" href="styles/main/main-a902793d.css">
<script src="scripts/vendor-55f700d3.js"></script>
</head>
<body>
<ui:view id="view-app"></ui:view>
<script src="scripts/main-bb00ee53.js"></script>
</body>
</html>
As far as I can tell Angular simply doesn't work in Quirks mode.