We Keep Coding

override no-display with jquery

I have the following div in my cshtml (Razor) file, which by default does not display. I want to override the no-display and make it visible using jquery in the associated javascript file, but it does not work. I am calling $(uiElements.divConfirmationMessage).show(), but noting happens. Any advice or help is appreciated.
<p id="divConfirmationMessage" class="success-message message no-display">
<span style="width:50px;" class="fl">
<span class="icon successGreen"></span>
<span> #Session["message"]</span>
#*<span> Hello From Hugh</span>*#
</span>
#*<span class="icon close" style="padding-left:20px" id="spnReserveAcctCloseIcon"></span>*#
</p>

Your question is not clear, but as of my understanding, 'no-display' class has style to hide the element. You can removeClass 'no-display' to show the element as follows.
$('#divConfirmationMessage').removeClass('no-display');
Let me know if I understood wrong

Protractor - more than one element found for locator by.css(.....)

In my application there are couple of rows and in each row last column, there is option of 'Edit'|'Delete' and when click on Edit, on the same place we get option for 'Update'|'Cancel', I successfully clicked on edit, made some changes and when I try to click on update it throws an error:
more than one element found with locator by.css(..) as both have same code
<td>
<div class="biometricActionCln ng-hide" ng-show="!list.isEditable" style="">
<a ng-click="editBiometrics(list, $index)">
**<i class="fa fa-pencil-square-o">**
</i> Edit</a>
<span> | </span>
<div ng-show="list.isEditable" class="" style="">
<a ng-click="manageEditBiometric(editBiometric, 'Modify', list.biometricId)">
**<i class="fa fa-pencil-square-o">**
</i> Update</a>
<span> | </span>
</div>
</td>
Kindly let me know how do I click on update link.

Below are different ways of handling multiple elements.
accessing multiple elements with index:
element.all(by.css('.selector'))[0]
element.all(by.css('.selector'))[1]
accessing multiple elements by calling methods:
element.all(locator).first();
element.all(locator).last();
accessing multiple elements through callback function:
element.all(by.css('.selector')).then(function(elements) {
// elements is an array of ElementFinders.
});

How to get translation ID from function in HTML using with angular-translate

I have an ng-repeat placing some images with a caption from an array:
<span ng-repeat="foo in bar">
<p ng-click="myFunction(foo)" ng-init="imgsrc=foo.image">
<img ng-src="{{imgsrc}}" style="cursor: pointer; cursor: hand"/>
<br />
<span >My Caption</span>
</p>
</span>
This works perfectly, but now I want to change the caption of each image based on the current language. I have angular-translate working like this:
<div translate>MY_TRANSLATION_ID</div>
But now I need to get the translations ID from my foo object in the loop. I tried:
<span translate>{{foo.translationID}}</span>
<span translate>foo.translationID</span>
Creating a function that will return the translation ID:
<span ng-init="text=myTranslate(foo)">{{text}}</span>
But nothing works. Is this possible? I'm trying to avoid saving the translated string in my foo object directly because I'm using async loading and I'm changing the language dynamically so it's not that easy or I couldn't get it working properly (also as recommended here I should be doing my translations in my HTML code)

You can make use of translate filter:
<span>{{ foo.translationID | translate }}</span>

Hierarchy of span outer background controlling

I have a hierarchy of spans to define different layers of annotations:
<span class="eventRel" id="e12-e32">
<span class="event">
<span class="hl" id="moh">
soluzione
<span style="width:500px;">
tokenid: 11
</span>
</span>
</span>
</span>
Then I have different controllers, to highlight the token with the background property (in this case: soluzione) with different colour.
So, my code is working, just when i have one span layer above the class="hl".
There are the cases that more than 3 spans above the class="hl".
What i do to highlight is:
document.getElementById('e12-e32').style.backgroundColor='white';
this is working just in case:
<span class="event">
<span class="hl" id="moh">
soluzione
<span style="width:500px;">
tokenid: 11
</span>
</span>
</span>
And help in this regards!, thanks in advance.
So my need is to apply this style to have the word soluzione highlighted:
<span class="eventRel" id="e12-e32" style="background-color:yellow;">
<span class="event">
<span class="hl" id="moh">
soluzione
<span style="width:500px;">
tokenid: 11
</span>
</span>
</span>
</span>

I don't know if I correctly understood your issue but to select all descendents you can use:
document.querySelectorAll(".e12-e32")

i applied inline styles,
i think the following code may be helpful ..
<span class="event">
<span class="hl" style="background-color:yellow;">
soluzione
<span style="width:500px;background-color:red;">
tokenid: 11
</span>
</span>
</span>

Here i write what happened, i was trying to highlight the word soluzione if that word is participated to an (annotation layer is a span), so the solution is, to give each (annotation layer=span) a class name, and apply the style on the class name, so my wrong implementation was that i used the id to identify the span, then i had duplications on the id.
So always first when you found that some style doesn't work properly, while changing it, check if there are duplication on the id's.
Because there would be any notification of error, and the changes will just apply on the first element have that id!

javascript select parent element's child

For example I want to do something like this:
<td class="repeats">
<img src="a.png"/>
<span onmouseover="this.parentNode.info.src='images/b.png'"
onmouseout ="this.parentNode.info.src='images/a.png'">
text here
</span>
</td>
Without using an ID or JQuery (ideally) I need a way of selecting the image in the current cell. How can this be achieved?
I only want to change the current cell, as opposed to all cells with the same class.

Use previousSibling:
<td class="repeats">
<img src="a.png"/>
<span onmouseover="this.previousSibling.src='images/b.png'"
onmouseout ="this.previousSibling.src='images/a.png'">
text here
</span>
</td>
Docs: https://developer.mozilla.org/en-US/docs/DOM/Node.previousSibling
Or you can use parentNode.childNodes[0]:
<span onmouseover="this.parentNode.childNodes[0].src='images/b.png'"
onmouseout ="this.parentNode.childNodes[0].src='images/a.png'">
text here
</span>

you can try this
$('td[class="repeats"]').children().filter('Img').dosomething();