ng-show > 10 throws syntax error (VS browser link) - angularjs

I have a table cell that shows if there's more than 10 records. Part of my pagination.
<td ng-show="totalRecords>10" colspan="5">
<ul uib-pagination style="margin:0;" total-items="totalRecords" ng-model="currentPage" ng-change="pageChanged()"></ul>
</td>
Pretty straightforward. But here's the crazy - it throws the following error in Chrome:
Uncaught Error: Syntax error, unrecognized expression: td[ng-show='totalRecords # browserLink:37
bc.error # browserLink:37
bh # browserLink:37
bp # browserLink:37
...etc
I'll note that $scope.totalRecords is set to zero (0) in the controller. Setting it to other values doesn't change anything. Everything else in the controller works perfectly.
The following scenarios don't throw any error:
<td ng-show="totalRecords=10" colspan="5">...</td>
<td ng-show="totalRecords<10" colspan="5">...</td>
<td ng-show="totalRecords>9" colspan="5">...</td>
<td ng-show="totalRecords>=11" colspan="5">...</td>
<td ng-show="totalRecords" colspan="5">...</td>
Anyone have a guess as to why?

The problem is with Visual Studio's "browser link" feature which can cause problems with AngularJS. Based on some research I did about the error you are experiencing, it seems that people are recommending to disable the browser link feature in Visual Studio.
http://connect.microsoft.com/VisualStudio/feedbackdetail/view/814546/browserlink-throws-an-exception-when-using-angularjs-and-binding-in-an-attribute-browserlink-does-not-like-in-a-html-attribute
The following link includes a similar description of the error you have and a few ways to disable the browser link feature:
http://www.telerik.com/forums/the-new-browser-link-feature-in-vs-2013-is-causing-an-error-when-detailtable-of-hierarchy-radgrid-is-expanded

Related

Organization Chart not escapaing variable - Angular 7

Using PrimeNG advanced Organization Chart: https://www.primefaces.org/primeng/#/organizationchart
Stats:
Angular 7
Chrome Browser: current version
Error:
compiler.js:2430 Uncaught Error: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
</ng-template>
</p-organizationChart>
</div>[ERROR ->]"): ng:///AppModule/OrdertreeComponent.html#16:6
Unexpected closing tag "ng-template". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("
<div>{{node.data.name}}</div>
</div>
[ERROR ->]</ng-template>
<ng-template let-node pTemplate="department">
{ { node.label } }
"): ng:///AppModule/OrdertreeComponent.html#11:4
Invalid ICU message. Missing '}'. ("
</ng-template>
Html:
<p>Organization with advanced customization.</p>
<p-organizationChart [value]="data1" selectionMode="single" [(selection)]="selectedNode" (onNodeSelect)="onNodeSelect($event)" styleClass="company">
<ng-template let-node pTemplate="person">
<div class="node-header ui-corner-top">{{node.label}}/div>
<div class="node-content">
<img src="assets/showcase/images/demo/organization/{node.data.avatar}" width="32">
<div>{{node.data.name}}</div>
</div>
</ng-template>
<ng-template let-node pTemplate="department">
{ { node.label } }
</ng-template>
</p-organizationChart>
Attempted fixes:
I tried to use different types of escape methods for the brackets and really nothing seemed to work. I couldn't find anything that changed with Angular 7.
Changing single curly braces to double curly braces solved this issue for me.

How to verify the value of the data-qtip of button?

I'm making an automated test on IE8, and i need to verify the hint of a button, the site I'm automating uses extjs, and for some reason, IE8 and Selenium IDE with the IEDriver don't work very well when it comes to the command "mouseOver". I did the following on Selenium IDE in Firefox and it worked:
<tr>
<td>mouseOver</td>
<td>//span[text()='Relatórios de Retorno']</td>
<td></td>
</tr>
<tr>
<td>waitForVisible</td>
<td>id=ext-quicktips-tip-innerCt</td>
<td></td>
</tr>
<tr>
<td>verifyText</td>
<td>id=ext-quicktips-tip-innerCt</td>
<td>Gera relatórios de retorno</td>
</tr>
But it doesn't work on IE for some reason, even if i stop the Selenium IDE and the driver, and go "manually" with the mouse over the button, the hint don't popup, so i was thinking in try to verify it directly by the data-qtip, but i don't know how.Here's the button code i took with the F12 on IE8, i want to verify the value of the data-tip:
<A aria-disabled=false aria-hidden=false hideFocus style="MARGIN: 0px; TOP: 0px; LEFT: 495px" id=aejs-button-1104 class="x-btn x-unselectable x-box-item x-toolbar-item x-btn-default-toolbar-medium" role=button tabIndex=-1 unselectable="on" data-componentid="aejs-button-1104" data-qtip="Gera relatórios de retorno">
I found the solution with the command "verifyAttribute", here's how i did it:
<tr>
<td>verifyAttribute</td>
<td>id=aejs-button-1104#data-qtip</td>
<td>Gera relatórios de retorno</td>
</tr>

Syntax error in order() method using ng-click and ng-repeat

I am using the following html code to create an ng-repeat:
<td ng-repeat="parentCategory in totalParentCategoriesCount | orderBy :'-Count'">
<h3>
Kategori
<span class="sortorder" ng-show="predicate === 'CategoryParent{{parentCategory.Count}}'" ng-class="{reverse:reverse}"></span>
</h3>
</td>
I wish to add the text CategoryParent with the number from parentCategory.Count to create a dynamic link.
When inspecting the link in the browser I get the corret outcome which is CategoryParent0, CategoryParent1, CategoryParent2 and so on. But when clicking the link I get the following error:
Error: [$parse:syntax] http://errors.angularjs.org/1.2.16/$parse/syntax?p0=%7B&p1=is%20an%20unexpe…Parent%7B%7BparentCategory.Count%7D%7D&p4=%7B%7BparentCategory.Count%7D%7D
at Error (native)
at http://localhost:51976/Scripts/angular.min.js:6:450
at $a.throwError (http://localhost:51976/Scripts/angular.min.js:165:141)
at $a.parse (http://localhost:51976/Scripts/angular.min.js:164:6)
at $get (http://localhost:51976/Scripts/angular.min.js:96:122)
at http://localhost:51976/Scripts/angular.min.js:129:290
at http://localhost:51976/Scripts/angular.min.js:10:248
at Array.forEach (native)
at q (http://localhost:51976/Scripts/angular.min.js:7:280)
at Uc (http://localhost:51976/Scripts/angular.min.js:10:219)
On the angular page its says the following:
Syntax Error: Token '{' is an unexpected token at column 15 of the expression [CategoryParent{{parentCategory.Count}}] starting at [{{parentCategory.Count}}].
I have been looking at this answer AngularJS expression throwing a Syntax error in ng-click and therefore tried many different compinations in the order() method but I cant figure out how to make the link dynamic without using brackets.
Right now the parentCategory.Count is an int but I have also tried to parse it to a string but without any success.
ng-click already takes an Angular expression - so no need for the {{}}
ng-click="order('CategoryParent' + parentCategory.Count)"

AngularJS: Error while interpolating: {{ $index + 1 }}

I used $index inside simple ng-repeat to show items' number:
<li ng-repeat="item in dataList | limitTo:5">
<span>{{ $index + 1 }} </span>
</li>
And it worked OK for long time.
But sudden couple days ago I started getting:
Error: Error while interpolating: {{ $index + 1 }} illegal access
at Error (native)
at Object.k (/vendors/angular/angular.min.js:55:287)
at Object.e.$digest (/vendors/angular/angular.min.js:90:233)
at Object.e.$apply (/vendors/angular/angular.min.js:92:431)
at Object.<anonymous> (/js/controllers/HomePage.js:99:28)
at l (/vendors/jquery/jquery.min.js:4:24797)
at Object.c.fireWith [as resolveWith] (/vendors/jquery/jquery.min.js:4:25618)
at k (/vendors/jquery/jquery.min.js:6:5201)
at XMLHttpRequest.<anonymous> (/vendors/jquery/jquery.min.js:6:9005)
at both production and local environments.
Data in dataList is correct and the same as was all time previous.
It is reproducible only in latest Chrome (32.0.1700.14) in other browsers it still working correct.
Any ideas why this can happen and how it can be fixed?
Angular version: 1.1.5.
Debugging showed that exception is thrown from angular.js:6371 on native adding operation, and it is not about AngularJS itself.
For those who are getting same issue, looks like the only solution is to find any alternative way of implementing your task on which it is failing. At least till next Google Chrome update.
Thanks to #Heikki for pointing to chromium issues tracker.
Since the bug is related to String + Number concatenation I am using toString() on the numbers as a temp workaround.
{{($index + 1).toString()}}
worked in my case.

How to find xpath from javascript href

The scenario is I need to check all the by default elements present on a web page. I am trying to check the headers available on a web table.
I am able to find all headers except one whose name is IP Address / Host Name
<div id="ctl00_ContentPlaceHolder1_RadGrid1_GridHeader" class="rgHeaderDiv" style="overflow: hidden;">
<table id="ctl00_ContentPlaceHolder1_RadGrid1_ctl00_Header" class="rgMasterTable rgClipCells rgClipCells" style="border-color:#6788BE;border-width:1px;border-style:solid;width:100%;table-layout:fixed;overflow:hidden;empty-cells:show;">
<colgroup>
<thead>
<tr>
<th class="rgHeader rgSorted" style="font-weight:bold;font-style:normal;text-decoration:none;text-align:left;" scope="col">
IP Address / Host Name
<input class="rgSortAsc" type="button" title="Sorted asc" onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RadGrid1$ctl00$ctl02$ctl01$ctl06','')" value=" " name="ctl00$ContentPlaceHolder1$RadGrid1$ctl00$ctl02$ctl01$ctl06">
</th>
</tr>
</thead>
<tbody style="display:none;">
</table>
</div>
I tried finding using below codes but failed to do so.
driver.findElement(By.xpath("//div[#id='ctl00_ContentPlaceHolder1_RadGrid1_GridHeader']//a[contains(#href,'IP Address / Host Name')]"));
driver.findElement(By.xpath("//a[contains(#href,'IP Address')]"));
driver.findElement(By.linkText(IP Address / Host Name));
I tried with changing div id and its value ti table id and corresponding value too but script fail saying not able to find element with xpath...
My script always says failed to find element with id... or xpath...
Please help.
If you're having trouble accessing the element programmatically, my advice would be to use the Selenium IDE to select the element, then export the test case by going to File > Export Test Case As... > Java / JUnit 4 / WebDriver.
I tried this myself and the resulting code uses:
driver.findElement(By.linkText("IP Address / Host Name"))
It seems to work fine in the Selenium IDE. I haven't tested the resulting Java code. - From your syntax, it appears you're using Java.
You say you've tried using By.linkText(), so maybe there's a bigger problem? (I notice you don't have quotes around your By.linkText() example, but I assume this is a typo.)

Resources