I have recently got stuck in the following situation.
I have a script which works perfectly in FF and GC,but not in IE10.
The IE is not loading the jQuery src files,so therefore it triggers the error '$' is undefined.The loading part looks like this:
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/jquery.js"></script>
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/jquery.jqplot.js"></script>
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/plugins/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<link rel="stylesheet" type="text/css" hrf="/RequestCenter/modules/resources/dist/jquery.jqplot.css" />
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/plugins/jqplot.highlighter.min.js"></script>
my function is simple:
$(document).ready(function() { .... });
so,the IE10 doesn't load the jQuery and triggers the error on this line.
Any ideas how to find a work around would be really appreciated.
Thanks
It might be a browser mode or document mode compatibility issue, press F12 in IE and change your document mode to highest standard
Related
I just downloaded the auth0 quickstart vanilla JS single page application. The menu that you get when you resize the app, does not work.
instead, you get a error that says the collapse.js has a object error.
Okay, this should save some time to other folks who are using auth0.
The problem is here, in the second line.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
For some reason, jquery-3.5.0 has some problems with the dropdown menu working. The following worked for me.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-3.4.1.slim.js"
integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
I am using 3.4.1 jQuery (second line again, above). That got the menu working.
what seems to be wrong here i dont get any error but at the same time no progress in routing. .
index.html
<!DOCTYPE html>
<html>
<head>
<title>My Angular App</title>
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/style.css">
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>
</head>
<body ng-app="myApp">
<h1> this is index.html </h1>
<div ng-view></div>
</body>
</html>
mainpage.js // where my controller is
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'ngResource', 'ui.bootstrap']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'index.html'
})
.when('/home', {
templateUrl : 'homepage.html'
})
.otherwise({
templateUrl : 'index.html'
});
});
when i load '/' in my browser nothins is happening same with /home i dont know where did i get wrong since there is no error in my console
The template for a route should be a partial view. Here index.html is the root of the single page app , this page should never reload (unless you want to destroy and rebootstrap the app). Try changing the templateUrl for / to a file that just has <h2> HELLO WORLD!</h2> and monitor the console (dev tools) for any 404 errors related to fetching the template
I think problem is with your javascript file name. In index you mentioned mainpage.js and in description its homepage.js.
Edit : Okay. Then try arranging files list like
<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>
As mentioned in the answer by user Priyanka, the filename can be the issue. But that should produce an error on the console and according to you there was no error on the console.
The other possible reason can be the sequence in which you've imported your files. I generally sequence my files this way -
<head>
<!-- 1. External CSS Libraries likes bootstrap, jquery -->
<!-- 2. My Application specific CSS files -->
<!-- 3. External JS libraries like Angular, bootstrap, JQuery -->
<!-- 4. My Application specific JS files like my controllers, services, directives etc.
</head>
Again the sequence in which you import the external JS libraries may also cause problems.
I have a map with google maps api, and a table, which I want to connect to the map with dHTMLx Layout. (I'm a beginner, so sorry about the question, but I haven't found any solution yet, and I already checked the references in the code) I have this code:
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<title>Map</title>
<link rel="stylesheet" type="text/css" href="dhtmlxlayout_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="dhtmlxlayout.css">
<script type="text/javascript" src="dhtmlxlayout.js"></script>
<script type="text/javascript" src="dhtmlxcommon.js"></script>
<script type="text/javascript" src="dhtmlxcontainer.js"></script>
<script type="text/javascript" src="dhtmlxlayout_deprecated.js"></script>
</head>
<body>
<script>
var dhxLayout = new dhtmlXLayoutObject(document.body, "2U");
dhxLayout.cells("a").setText("Térkép");
dhxLayout.cells("a").attachURL("googleapi.html");
dhxLayout.cells("b").setText("Táblázat");
dhxLayout.cells("b").setWidth(500);
dhxLayout.cells("b").attachURL("list.html");
</script>
</body>
What does the 2 error means? ReferenceError: dhtmlxCellObject is not defined & TypeError: this._hdrInit is not a function both in dhtmlxlayout.js
What should I correct? The googleapi.html and list.html are working fine separate.
Thanks!
There is a special option for using google maps in dhtmlx layout - attachMap
Online sample
and
Documentation
will help you
By the way Google doesn't allow to use its servise in iframes
Plus if you don't use deprecated dhtmlx methods, you don't need to include this file in the page
I have created a dojo based Worklight project and a hybrid application it.
I did a drag and drop of a dojo mobile button which gets added inside a dojo mobile view. All of this works fine and renders fine in the various environments (common, android etc.). It also correctly shows the look and feel in Rich Page Editor.
But then i added a script that has a very simple dojo.ready call. Now when i run this application i get a console error saying ReferenceError: dojo is not defined. Any idea why that is happening?
I know that i have correctly setup the dojo as other pieces seem to work. I have also checked that the dojo.js is loading (which is obvious as the other pieces are working). I am using IBM Worklight 6.0 developer edition with all capabilities installed.
Here is my sample code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>jmdwl</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/jmdwl.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
<script>
dojo.ready(function() {
alert("Here");
});
</script>
</head>
<body id="content" style="display: none;">
<div data-dojo-type="dojox.mobile.ScrollableView" id="view0" data-dojo-props="selected:true">
<!--application UI goes here-->
<button data-dojo-type="dojox.mobile.Button">Label</button>
</div>
<script src="js/initOptions.js"></script>
<script src="js/jmdwl.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
Thanks,
Gaurav
If you want to use dojo.ready you must initialize it first.
<script>
require(["dojo/ready"], function(ready){
ready(function() {
alert("Here");
});
});
Here's the reference : http://dojotoolkit.org/reference-guide/1.8/dojo/ready.html#dojo-ready
Update 1
Which Version of dojo do you use by now? 1.6 or 1.7+ ?
The new AMD requires to initialize the modules like i write before.
Have you read this threads? There seem to be an failure while importing the dojo Libarys. I guess this could have something to do with your error.
worklight fail to require DOJO Combobx on real device -fail to load ... /dijit/form/nls/it/ComboBox.js
and
Worklight core-web-layer.js errors
Regards, Miriam
I am trying to add a code sample to a self hosted mediawiki page, but every time I try to add this and save the page I get a Forbidden error stating "You don't have permission to access /index.php on this server.".
The code sample is:
<script src="jquery/jquery-1.6.1.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery/placeholder/jquery.placeholder.js"></script>
<link rel="stylesheet" href="jquery/uniform/uniform.default.css" type="text/css" media="screen" />
<script src="jquery/uniform/jquery.uniform.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$("input, textarea, select, button").uniform();
});
$(function() {
// Invoke the plugin
$('input, textarea').placeholder();
});
</script>
If I remove the <script... and <link... lines it saves the page and displays correctly. Any ideas how I can overcome this error?
Cheers
Steve
Solved.
This was a security setting on my shared host. A quick support email sorted it out.