I've got huge problem when doing HTML compilation with Template Engine build in JavaScript.
Everything is working for Chrome, FF.
IE8 works just in one case - when my HTML is set as variable.
Scenario for HTML:
1). Below example works in all browsers (even in IE8)
var phone_tpl = '<div class="demobile-view">'+
'<div class="heading clearfix">'+
'<span class="attention">{{& attention}}</span>'+
'<h4>aaa</h4>'+
'</div>'+
'</div>';
2). Below example work in CHrome, FF. IE8 won't work with it.
<script type="text/template" id="phone_tpl">
<div class="demobile-view">
<div class="heading clearfix">
<span class="attention">{{& attention}}</span>
<h4>aaa</h4>
</div>
</div>
</script>
Second point in IE8 console responds with error "Unterminated string constant".
I'm attaching full package of library + init example.
http://jsfiddle.net/2trv57rk/
Really believe that someone will be able to help me :) I hate writing HTML in quotes :) I need to have clear, well-coded alternative.
Thank you in advance !!
Related
I am facing a strange issue which take my 4 to 5 hours but i am still unable to find a solution.
The error is i am getting is my code is just working fine on chrome and firefox safari all browsers but when i am running it on IE11 it throw me this error:
[Vue warn]: Error compiling template: <div class="floating-chat lh-2-0" id="chat-app"> <span class="title pull-lef col-md-12"> <span class="chat-notification-icon" v-if="this.unreadChatOfUsersCount.count > 0"> {{this.unreadChatOfUsersCount.count}} </span> Messaging </span> <div class="pull-righ col-md-"> </div>
Please someone give me a solution for this.
I converted my all methods from method(){} to method: function(){} also add polyfill but cant reach to result.
I had such problem on my project. It can happen in case you are using IE incompatible code in the component template.
For me, it was string interpolation in the href attribute.
I need to add tick marks below a ui-slider so that it looks somewhat like this:
Automated interpolation with ng-repeat doesn't work:
In my controller I have a limits array
$scope.limits = [ 1, 3, 5, 10, 15 ];
I reference limits in my html:
<p ng-repeat="l in limits"
style="left:{{$index*100/(limits.length-1)}}%"
class="slider-tick">
<span class="slider-tick-mark">|</span>
<br>
{{l}}
</p>
In Chrome this works fine, but not in IE9 - all the tick marks and numbers are bunched up on the left-hand side
Chrome:
IE9:
It's as if the style expression is not working ("left:{{$index*100/(limits.length-1)}}%")
Manual interpolation works:
If I code the repeated elements by hand, then it works as expected in IE9.
<p class="slider-tick" style="left:0%" ><span class="slider-tick-mark">|</span><br/>1</p>
<p class="slider-tick" style="left:25%" ><span class="slider-tick-mark">|</span><br/>3</p>
<p class="slider-tick" style="left:50%" ><span class="slider-tick-mark">|</span><br/>5</p>
<p class="slider-tick" style="left:75%" ><span class="slider-tick-mark">|</span><br/>10</p>
<p class="slider-tick" style="left:100%"><span class="slider-tick-mark">|</span><br/>15</p>
Question:
Is there any way to have the ng-repeat expression work in IE9?
Update:
After using the Developer Tools to inspect the DOM, I see there is no style tag on the <p> element at all.
IE9:
In Chrome's developer tools, that style tag does exist:
Chrome:
Use the ng-style directive instead of the style attribute. The browser is trying to interpret your Angular expression as (invalid) CSS; ng-style will make Angular evaluate the value and then apply it as the style attribute.
<p ng-repeat="l in limits"
ng-style="{left: ($index*100/(limits.length-1)) + '%'}"
class="slider-tick">
<span class="slider-tick-mark">|</span>
<br>
{{l}}
</p>
IE9 struggles with several of the directives requiring the $compile service. There are some steps you can take to try to enable IE9's support through shimming and such. Angular has a section of the developer guide dedicated to IE support of angular:
http://docs.angularjs.org/guide/ie
The most important piece directly related to IE9, is the ng namespace for the html tag:
<!doctype html>
<html xmlns:ng="http://angularjs.org">
I have found, that though the guide says this works, it's not always the case. Sometimes you have to use the data-ng-repeat as opposed to ng-repeat:
<p data-ng-repeat="l in limits"
style="left:{{$index*100/(limits.length-1)}}%"
class="slider-tick">
<span class="slider-tick-mark">|</span>
<br>
{{l}}
</p>
Edit... there was also some issues a while back where using ng-repeat would not transclude and bind elements on the same tag properly (your style declaration). the fix there is to ensure you have the latest version of Angular.
I have the following "Angular HTML"
<div class="radio input-l" ng-repeat="carPark in initialPlace.carParks" ng-show="!carPark.isBlueBadgeCarpark || isBlueBadge">
<input type="radio" name="payment" ng-change="updateParkingSpaces(carPark, initialPlace)" ng-model="initialPlace.selectedCarpark" value="{{carPark.carparkID}}" id="carpark-{{carPark.carparkID}}">
<label for="carpark-{{carPark.carparkID}}">
£{{carPark.cost}} - {{carPark.carparkName}}
</label>
</div>
which renders and works fine in FireFox/Chrome/Safari/[insert another decent browser here]
This is a plunker of what I am trying to do, I can't get plunker (even the root site) working on my MSIE so I have no idea if it behaves correctly, but it really is as simple as this
But in MSIE 7/8 I still seem to get "{{carPark.cost}}" rather than the value
everything else seems to work fine, except the {{ ... }} notations
MSIE 7 Error:
[$sce:iequirks] Strict Contextual Escaping does not support Internet Explorer version < 9 in quirks mode. You can fix this by adding the text to the top of your HTML document. See http://docs.angularjs.org/api/ng.$sce for more information.
http://errors.angularjs.org/1.2.3/$sce/iequirks
To fix this I just had to add a reference to JSON3.js. For some reason JSON2.js wouldn't work but JSON3 worked fine, I used cdnjs.com for the cdn
I am trying to make links work which we click to change the language of website using JavaScript. Here is the HTML code:
'<form action="" method="post" name="currlang">'.
'<input type="hidden" name="languageval" value="'.$session->value("language").'"/>'.
'<a onclick="langa(this, \'en\');" class="langs'.($session->value("language")=='en'?" active":"").'" id="en"></a>'.
'<a onclick="langa(this, \'it\');" class="langs'.($session->value("language")=='it'?" active":"").'" id="it"></a>'.
'<a onclick="langa(this, \'pl\');" class="langs'.($session->value("language")=='pl'?" active":"").'" id="pl"></a>'.
'</form>'.
and here the javascript:
function langa(obj, valu) {
document.getElementsByName("languageval")[1].value=valu;
document.getElementsByName('currlang')[1].submit();
}
The script works fine on new browsers (Firefoxe, Opera, Chrome, IE9) but when testing it on IE8 it gives an error:
"'document.getElementsByName(...).1' is null or not an object".
After some research I found out that getElementsByName() is not supported by IE8 and above and maybe the solution would be to use jQuery and this is where I need help.
How can I make this work with jQuery or without it?
You can try using an ID or class to achieve the same purpose instead of name.
Example:
<div id="foo">This is id of foo</div>
<div class="choo">This is class of choo</div>
Then if you use ID then use:
document.getElementById('foo');
and with class use:
document.getElementsByClassName('choo');
I hope this helps!
For this to work the way you want switch name to Id.
<script type="text/javascript" language="javascript">
function langa (obj, valu){
$("#languageval").val(valu);
$("#currlang").submit();
}
</script>
The # will pull the element with that Id and val() is the get/set for the element's value.
Edit: added the type and language tags to
I'm developing a Chrome extension, and I've noticed that Chrome started to do weird things to my notifications.
I am talking about the huge whitespace thing (notification height should end at the blue bar).
It wasn't like that some time ago, it started to happen somewhere with the new Chrome releases.
Anyways, what could be the cause of this?
Source code of extension is at http://github.com/Maxorq/LastPlug
The most interesting parts would be:
js/notifications.js
$('#title').html(decodeURIComponent($.url().param('title')));
$('#message').html(decodeURIComponent($.url().param('message')));
$('#avatar').attr('src', $.url().param('avatar'));
$('#color').addClass("color_" + $.url().param('color'));
notification.html
<div id="content">
<img id="avatar" width="32" height="32" src="img/icon.png" />
<span id="title">Title</span><br />
<span id="message">Message</span>
</div>
js/background.js
var notification = webkitNotifications.createHTMLNotification('notification.html?title=' + title + '&message=' + message + '&avatar=' + avatar + '&color=' + color);
notification.show();
I'm using jQuery URL Parser from here: https://github.com/allmarkedup/jQuery-URL-Parser
The code is kinda complicated, so I won't paste all of it here; wondering if anyone else had same problem with huge notifications.
Im not sure if this will work in your case... but whenever I have had a bug with large empty spaces in chrome, adding <!doctype html> tags instead of just <html> fixed the problem. Not sure why, but it did. Hope this helps:)