I can't get Ext.get to work in IE. Works great in FF, Chrome and even Safari.
My HTML looks like this:
<select id="products" onchange="getReleases()">
<option value="select">Select</option>
</select>
The Ext call is this:
...
success: function(response) {
alert("response.responseText: " + response.responseText);
Ext.get("products").update(response.responseText);
}
I see results in my alert function. What am I missing?
It doesn't appear as if this is an actual issue with Ext but an issue with IE. You can see this by looking at the result of Ext.get("products") to a variable.
var result = Ext.get("products");
console.log(typeof result !== "undefined");
We can see from the log statement that it result is not undefined (Also, if it was undefined it wouldn't have been able to do the update()).
This is all assuming that the response.responseText was of the form '<option value="select">Select1</option>' which I think it was because you were getting it to work correctly in all browsers but IE.
Looks like it is a known issue with IE's select element's innerHTML property. Following provides explanation and link for work around:
Javascript - innerHTML not working with HTML select menus
Here is a link to the MS bug: http://support.microsoft.com/kb/276228
Related
If I have this select: <select name="custType" ng-model="vm.custType" ng-options="c.name.toUpperCase() as c.name for c in vm.customers"...>
Is there a way to break into the devtools debugger when the expression inside ng-options starts to run?
Different reasons:
- I would like to know when the expression runs during the lifecycle of the web page.
- I would like to know the current values of c.name and vm.customers at
a point of time during the expression lifecycle.
- I also want to know if vm.customers is being used before it gets loaded with data.
find ng-options directive at angular src code and place a breakpoint.
ng-options
Have a try using the following:
HTML
<select name="custType"
ng-model="vm.custType"
ng-options="c.name.toUpperCase() as c.name for debugCustomer(c) in vm.customers"
... ></select>
JS
...
$scope.debugCustomer = function (customer) {
console.log(customer);
debugger;
return customer;
}
...
I have this element on my html page:
<div class="section-title" id="bladeSectionTitle"
ng-transclude="title">
</div>
I want to get the value displayed.
I have tried the following in my typescript page & only get null:
var title = document.getElementById("bladeSectionTitle").getAttribute('section-title');
The view source gives me this:
<dpn-blade-section is-checkbox-visible="true" is-checked="$component.showAll">
<section-title>
<h4>Show All</h4>
</section-title>
In this instance, the value I would be looking for is 'Show All'.
Which version of angular are you running? We really need more information here. Although accessing the DOM directly isn't the way to go with angular, you're looking at something like this
var title = document.querySelector('dpn-blade-section section-title h4').innerHTML;
This sounds wacky but we're currently consistently able to reproduce this issue, and I wanted to know if anyone has seen anything like it, or knows what could be causing it.
We have an Angular 1.4.1 application, and in some of our html partials we have conditions in the following form:
<div ng-if="!obj.myvar">
... contents ...
</div>
Where in your JS you've set up your scope accordingly:
$scope.obj = { myvar: false }
This works as expected in all browsers, except iOS Safari (we've seen this on iPhone and iPad):
On the initial load, all elements following the ng-if fail to load
If you manually refresh the page, it will then work as expected
We've found that changing the syntax to this fixes the issue:
<div ng-if="obj.myvar === false">
... contents ...
</div>
But I'm not hugely satisfied with that as a solution, and it doesn't explain why this issue is happening at all.
Word of warning if you're trying to replicate this - this isn't reproducible on jsFiddle. I assume that's because the results window isn't a "true" browser.
I have a custom directive (to exposecertain fields), and inside that I have another directive (the drop down box for the field). It's working well on Chrome, but on IE9 it appears the ng-show and ng-if is failing to evaluate. It appears not to even enter the function I defined (I put console.log inside the isAllowed function and it appears in Chrome but not in IE9).
<div>
<select id="" class="form-control" ng-model="measure" name="{{name}}">
<option ng-if="isAllowed(name, 1)" value="1">Kilowatt Hours</option>
<option ng-if="isAllowed(name, 2)" value="2">mmBTU</option>
<option ng-if="isAllowed(name, 3)" value="3">Therms</option>
<option ng-if="isAllowed(name, 4)" value="4">Decatherms</option>
</select>
</div>
I have tried ng-show instead of ng-if and it behaves the same in IE9. It appears the replace: true I put on my first directive is not honoured in IE9:
Whereas in Chrome this is replaced as expected with surrounding DIV elements and my custom directives cannot be seen anywhere, which is good.
Has anyone had experience of this before? Is it something to do with having a directive inside of a directive? Seems like IE9 does the first one OK then stops.
(I wish I could drop IE9 but it's an internal app and they're still on IE9 everywhere, so I've got to make it work somehow).
PS: The aim here is to only show the options that are relevant to the given field. In this case Electricity can be measured in kWh and mmBTUs but not in Therms and Decatherms. Inside the isAllowed function is supposed to be some switch logic. It works fine in Chrome, just not IE9, so I might need another method as a workaround.
PPS: Angular 1.3.2. IE9 - Browser Mode: IE9, Document Mode: IE9 Standards.
Figured it out. Isolated scope. Somehow Chrome was dealing with it OK, but IE9 was not.
In my app I have the fields I want to show to my user defined in a Partials module, but the drop-down lists is something I want to use in multiple places and they may change, so I defined them in a directive called BusinessRulesDirectives.
All I needed to do was drop in the BusinessRulesDirectives as a dependency to my Partials module and it works across both Chrome and IE9.
angular.module( 'ActualsPartials', [
'BusinessRulesDirectives'
] )
For some reason Chrome was able to run fine with this, but IE9 did not like it:
angular.module( 'ActualsPartials', [] )
Also, no errors were being output. I just happened to double-check for isolated scope as a wild guess.
Would be interested to know why Chrome was OK but IE9 was not.
I am developing web application with AngularJS v1.2.15, Google Chrome Version 33.0.1750.152, Firefox version 26.0.
Problems that I found:
1.When I choose ng-options in select tags via keyboard, model updates, but to the ng-model writes first value the first two clicks. Using the mouse works fine. This problem found in Google Chrome. In Firefox all works good. Example: plunker
<div class="controls">
<select id="model" ng-model="safe.model.id"
ng-options="model.id as model.name for model in models" required>
</select>
</div>
2.In Google Chrome styles are not working for input elements (bootstrap input style and angular invalid class style). I took some screenshots.
Google Chrome:
Firefox:
Does anyone else have these issues? Or maybe I'm doing something wrong.
For issue #1, I think its a bug. It's been reported here: https://github.com/angular/angular.js/issues/4836
There seems to be an alternative though - if you specify an option with a null value, then it fixes it.
So, you can just add <option value="">Select one</option> and it works.
Here's a modified plunkr that shows it.
Can you post code for second issue so that we can figure out what is wrong with it? Just images are not helping.
As far as I know - there aren't any (keyboard) issues with ng-options or the select element with angular which probably means that it just isn't doing what you expect it to do. I have created a fiddle loosely based on the code you provided. The following is my controller:
app.controller('Test', function ($scope) {
$scope.models = [{id: 0, name: 'abc'}, {id: 1, name: 'def'}, {id: 2, name: 'ghi'}, {id: 3, name: 'jkl'}];
// safe has to be defined
$scope.safe = {model: $scope.models[2]};
});
For the select element, I started with what you had but simplified it a little bit:
<select id="model" ng-model="safe.model"
ng-options="model.name for model in models"
required=""></select>
If you take a look at plunker, it is working here. Note that I wrote and tested this in Chrome Version 33.0.1750.154 m. I added a focus button so you can test keyboard input (it is hard to focus on the select otherwise).
As to the styling - by default the select box in chrome does look different but I can't tell from your screen shots what you consider to be the exact issue here. Hopefully this at least helps with part of your concerns.
I created videos that show issue №1.
Google Chrome example, Firefox example
I anwsered this question at other post, but basically as others said, you can:
1) Add a empty option
2) Force to select a member of the list.
Bellow I have the two solutions and the problem at jsfiddle too.
Select options through ng-click is not working in chrome browser using AngularJS
For me this error is a bug on Chrome, not angular, because in firefox worked(when it loses the focus updates the model).
:)