I am working with a new angular app and need to make it backward compatible to IE8. From what it looks like it loads in my routing info, loads the template (to a point) but in the concole log i see the following error.
TypeError: Object doesn't support this property or method <div
class=ng-scope ng-view>
This is what my index html page looks like:
<!DOCTYPE html>
<html id="ng-app" ng-app="app">
<head>
<!--Add dependencies-->
<script src="jquery.min.js"></script>
<link rel="stylesheet" src="bootstrap.min.css" />
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<script src="ui-bootstrap.js"></script>
<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('menu');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
</head>
<body>
<div id="wrapper">
<header class="header header-fixed">
<section class="navbar navbar-inverse docs-navbar-primary">
<div class="container">
<div class="row">
<div class="col-md-7" style="color:white; margin-top:14px;">Thinflash: Fullscreen Demo</div>
</div>
</div>
</section>
</header>
<section role="main" class="container main-body">
<div ng-view></div>
</section>
<!--Add AngularJs Files-->
<script src="swfObject.js"></script>
<script src="app.js"></script>
<script src="appControllers.js"></script>
<script src="thinflash.js"></script>
</div>
</body>
</html>
Template.html :
<div ng-controller="thinflash.controllers.playback">
<div ng-controller="app.controllers.fullscreen">
<div class="mainWrapper" id="stageWrapper">
<label>SWF Object Display </label>
<div class="swfWrapper" style="width:320px; height:240px;" id="swfStage">
<div class="tf-container" tf-swf tf-interface="flashInterface" tf-src="thin.swf" tf-min-version="11.0.0"></div>
</div>
</div>
<div class="col-md-5">
<form role="form">
<!-- Video Playback Controls -->
<div class="row">
<div class="form-group col-md-7">
<label>Select Preloaded Video:</label>
<select class="form-control" ng-model="myVideo" ng-init="myVideo = videos[2]" ng-change="changeVideo(myVideo)" ng-options="v for v in videos"><option></option></select>
</div>
</div>
<div class="row">
<div class="form-group col-md-7">
<button type="button" class="btn btn-primary" ng-click="pausePlaybackToggle()">Pause</button>
<button type="button" class="btn btn-primary" ng-click="playVideo()">Play</button>
</div>
</div>
<div class="row">
<div class="form-group col-md-7">
<label>Volume Control:</label>
<input style="width:50%;" type="range" id="slider" min="1" max="100" step="1" ng-model="volume" ng-change="changeVolume()">
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label>Size Controls:</label><br/>
<button type="button" class="btn btn-primary" ng-click="changeVideoSize(1)">Small</button>
<button type="button" class="btn btn-primary" ng-click="changeVideoSize(2)">Medium</button>
<button type="button" class="btn btn-primary" ng-click="changeVideoSize(3)">Large</button>
</div>
</div>
</form>
</div>
</div>
</div>
Again when the app loads in IE8 it appears that the template loads (or starts too ... but i get this error)
Add html5 support for IE8 by using something like html5shiv or this little snippet:
<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('menu');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
Edit
Fixing an "Object does not support this method or property" on IE can be a beast, cause it isn't telling you anything. It's not telling you what object, it's not telling you what property, it's not telling you what method and worst of all it's not telling you where this actually occurred. See the pattern? Effectively it's saying; something bad has happened somewhere, go figure. This is one of the reasons why everyone loves IE.
Adding the above snippet has probably solved a problem but then another problem popped up, which produced the same brilliant error message. Fixing this breadcrumb adventure of error messages by posting each new involved piece of html can take a very long time and should rather be discussed with the helpdesk of IE. They have an answering machine telling you to upgrade to their new crappy box of other issues. Troubleshooting this problem via Stackoverflow is like shooting satellites out of the sky with a water pistol, in the dark, blindfolded and drunk.
Some other things you might consider:
Move the snippet to above any other script include
Replace the snippet with html5shiv
Downgrade the include version AngularJS. Version 1.1.5 seems to work for IE7. Version 1.3 does not support IE8 at all.
Check the guide lines of Angular IE compatibility
Start commenting code (javascript/html) to better isolate the part that is causing the problem. Keep in mind that multiple problems generate the same error message in IE.
Upgrade to their new crappy box of other issues.
I wanted to take a second and answer this incase someone else has the same type of thing happen. I tried to polyFill and that didnt work so I tried running the code in IE9 while running in IE8 mode hoping to get a different error .... Voila ....
null hit the nail on the head ... it was in the JS and it was because I was doing document.addListener(). Luckily I was able to quicly decide that the functionality that this supported was not important enough to pull my hair out so i removed that line in my js...
Everything else worked .... Hopefully this can be of some help to someone in the future as IE provides stellar error messages
Related
In Chrome version 72.0.3626.96, I have a simple example where I set up an anchor <a> (styled as a button using bootstrap) and I also setup an <input type="file">. I hide the <input type="file"> using CSS and then use some JavaScript to trigger the file selection dialog when the anchor is clicked.
For example:
$('#upload-button').on('click', function(e) {
if (confirm('Are you sure?')) {
$('#upload-file').trigger('click');
}
});
#upload-file {
display: none;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.2.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<a id="upload-button" class="btn btn-primary">
<span>Upload Something!</span>
</a>
<input type="file" id="upload-file">
</div>
</div>
</div>
The way it should work is that the user clicks on the <a> button, this launches a confirmation dialog, then, the user clicks "OK" and this opens the file selection dialog.
This works in Firefox and in earlier versions of Chrome, and oddly enough it even works in Chrome version 72.0.3626.96, as long as you click the "OK" button in the confirm message fast enough after it opens.
The bug is that if you wait 2-4 seconds after the confirm message opens and then click "OK" it will not open the file selection dialog.
Any ideas about how to make this work? Does it look like this is a legitimate bug in this release of Chrome that should be submitted?
UPDATE: I have come to the conclusion this is probably somehow related to security updates for User Activation (although I am not sure specifically why)... however it seems easier and cleaner in the long run anyway to just replace the old school confirm() with a more modern modal approach. Clicking an actual button within a bootstrap modal seems to always work correctly.
New Example Here:
$('#upload-button').on('click', function() {
$('#upload-confirm-modal').modal();
});
$('#upload-confirm-button').on('click', function() {
$('#upload-file').trigger('click');
$('#upload-confirm-modal').modal('hide');
});
#upload-file {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
<a id="upload-button" class="btn btn-primary">
<span>Upload Something!</span>
</a>
<input type="file" id="upload-file">
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="upload-confirm-modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<h4>Are you sure?</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary" id="upload-confirm-button">Yes</button>
</div>
</div>
</div>
</div>
The Chrome team has resolved this issue as By Design with the note that this was an intentional change made to prevent a user-activation flag from remaining set for too long. crbug.com/936505
I've asked them to consider adding a console warning for this scenario to aid future debuggers.
I'm trying to use Affectiva's Web SDK (Javascript) to detect emotions via a Camera Stream. I tried using it in JS Fiddle. It works fine but when I got the code from JSFiddle and used in on my Java Web Project in Eclipse, the Web Camera prompt isn't showing up. Nor can it access the Web Cam. Here's the code:
HTML:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8" id="affdex_elements" style="width:680px;height:480px;"></div>
<div class="col-md-4">
<div style="height:25em;">
<strong>EMOTION TRACKING RESULTS</strong>
<div id="results" style="word-wrap:break-word;"></div>
</div>
<div>
<strong>DETECTOR LOG MSGS</strong>
</div>
<div id="logs"></div>
</div>
</div>
<div>
<button id="start" onclick="onStart()">Start</button>
<button id="stop" onclick="onStop()">Stop</button>
<button id="reset" onclick="onReset()">Reset</button>
<h3>Affectiva JS SDK CameraDetector to track different emotions.</h3>
<p>
<strong>Instructions</strong>
</br>
Press the start button to start the detector.
<br/> When a face is detected, the probabilities of the different emotions are written to the DOM.
<br/> Press the stop button to end the detector.
</p>
</div>
</div>
</body>
The Javascript file is similar to the contents in https://jsfiddle.net/affectiva/opyh5e8d/show/
I copied the code but the camera doesn't work on my end when I used it on Eclipse. I'm using Chrome as my browser.
I need some help over here, I'm trying to load 'NgMap' module, to render a Google Map in my application builded with Ionic Framework. I get the right response in my browser, without any error in my developer console, but when I emulate the App in Android or going to Ionic View with my iPhone, i get a blank screen. I don't know what I am doing wrong, i'll appreciate any help. Here is my code:
index.html:
<script src="//maps.google.com/maps/api/js"></script>
<script src="//rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>
app.js:
angular.module('starter', ['ionic', 'ui.router', 'starter.controllers', 'ngMap'])
map.html:
<ion-view view-title="Get Directions">
<ion-content data-tap-disabled="true">
<div class="row nomargin">
<div class="col text-center">
<h4>7810 NW 98th Street </br> Miami Lakes, FL 33016</h4>
</div>
</div>
<div class="row nomargin">
<div class="col">
<button class="button button-block map-button">
<h4>Open in Maps</h4>
</button>
</div>
</div>
<div class="row nomargin nopadding">
<div class="col nomargin nopadding">
<map class="map-height" center="25.862359, -80.324403" zoom="13">
<marker position="[25.862359, -80.324403]" />
</map>
</div>
</div>
</ion-content>
As I said, I'm not getting any error in my browser and the map render properly, but in the emulator or Ionic View, appears a white screen. Thanks in advance.
PD: Sorry for my awful english
I had similar issue. I installed GapDebug in my case the error was that the App running in 'Android emulator' could not find the two external libraries used for 'ngMap':
<script src="//maps.google.com/maps/api/js"></script>
<script src="//rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>
Screenshot of the error caught by using GapDebug:
I had to change the tags to include "https(http can also work)" to make it work:
<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>
Changing these links also fixed the "Ionic View- Blank page" issue.
I'm not using any JS code, but the console gives me the error
Uncaught TypeError: Cannot read property 'addEventListener' of null
Here is my html code
<div id="navbar">
<div class="width2">
<div class="navbarchild right">
<div class="NBsearch right">
<input type="text" placeholder="search" />
</div>
<div class="NBuser right">
<div class="NBpicture left">
</div>
<div class="NBreputation left">
</div>
<div class="NBbadge left">
</div>
</div>
</div>
<div class="navbarchild left">
</div>
</div>
</div>
*I tried to see where the problem come from,and it seems that it comes from
<input type="text" placeholder="search" />
because when I delete this line the error don't appear.
Disable your extensions one by one from chrome://extensions (i'm supposing you're using chrome, for FF check this link) and see which one causes the problem there's no point in disabling all of them.
And as an answer to you're question about how a can an extension do that the simple answer is that it's just javascript, html and css injected into you page(not really experienced in this field).
For more information about chrome extensions check here
To know which Extension was loaded on your page you can go (when extensions are activated) in the Dev Tool (F12) -> Source -> Content scripts.
This is for Chrome.
I have two files. One is an index.html, which essentially is the frame for my website, and the other a main.html which holds the template for my homepage. I have the following code right before all my scripts are imported.
<div class="container">
<div class="well" ng-view=""></div>
<div class="footer">
<p translate="footer">Well hello there Mr. Footer</p>
</div>
</div>
All my typeahead and controllers are imported in my scripts. This defaults to pulling my main.html because of the routed controller. The issue is that when I put the following code into my index.html, the typeahead works fine, but as as soon as I move it into my main.html it stops working. All of my javascript is being ran from files, so it shouldn't be a conflict of which loads first... Thoughts?
<div ng-controller="employeeController">
<table>
<center>
<div id="the-basics">
<input type="text"
ng-model="text"
ng-change="get(text, 'name')"
class="typeahead"
id="search"
placeholder="Search Employees..."/>
</div>
<button class="btn btn-primary btn-md" ng-click="get(text, 'name')">
<span class="glyphicon glyphicon-search"></span>
</button>
</center>
</table>
</div>
Here is a somewhat similar question that was never answered:
Bootstrap Typeahead Not Registering in AngularJS ng-view
I was able to resolve this issue by putting another script import for the controllers directly into the main.html.