We Keep Coding

Find text using dojo

I have some html like such that I need to somehow select out using dojo:
<tr>
<td class="form-label-text">Thumbnail Small:</td>
<td></td>
<td class="form-inset">
<span class="disabledText">Not Available</span>
</td>
</tr>
The only unique thing about this than other rows is the "Thumbnail Small:" part.
I know jquery has a :contiains selector http://api.jquery.com/contains-selector/
I cannot find an equivalent way to do this using Dojo.
(Modification to the original html is not an option)
Any suggestions are appreciated.

Hi I dont think we have similar thing in Dojo library , but you can go for custom Dojo implementation.
dojo.query("td").filter(function(node){
if(dojo.attr(node,"innerHTML")==="Thumbnail Small:")
return node;
})[0];
I have prepared a JSFiddle here for you : http://jsfiddle.net/t6u05ket/

Angular-translate function not working as expected

I'm including translation to my website using angular-translate
So I have this piece of code:
<td class="nav-button">
<a href="{{button.location}}" class ="'{{button.clazz}}'" ng-click="showDetails = !showDetails" >
{{button.text}}
<div ng-show="button.subButtons.length && showDetails" ng-repeat="subButton in button.subButtons">
<a href="{{subButton.location}}" class="'{{button.clazz}}'" translate>
{{subButton.text}}
</a>
</div>
</a>
</td>
The sub-buttons appear normally and the translation works just right. But only translating the subButtons.
The problem is : I want to translate the {{button.text}} as well
But when I add the translate to the first <a>, neither the features works.
I've tried several ways to fix this but I failed.
Somebody that maybe had the same problem could help ? Thanks.

angular translate is a filter
{{button.text|translate}}

I am curious to what subButton.text contains. It needs to contain the key of the translation value that you are looking for. For example, my translations file looks like this:
{
"SUB_BUTTON": "Hello there, this is the sub button"
}
I can create a button in multiple ways.
via filter
<button>{{"SUB_BUTTON" | translate}}</button>
via directive 1
<button translate="SUB_BUTTON"></button>
via directive 2
<button translate>"SUB_BUTTON"</button>
For more info please read further on the angular-translate Docs

<a> tags not working in AngularJS

I put a calendar of events put together using angular and jquery. A styled button saying +My Schedule adds the data to localStorage which is then pulled in to another page for user's reference. The localStorage function worked fine until it was brought into the Angular template. Clicking the link now cause the page to jump up and there is nothing recorded in the console or localStorage.
A working example of what I am trying to do is at the following url, this page was all hard coded and I am trying to implement the same thing in an Angular template: http://events.latimes.com/festivalofbooks/the-festival/schedule/
Any help would be appreciated.
Here is a fiddle: http://plnkr.co/edit/gaKFWTsACxwCg0i4JCiw?p=preview
Here is the shortened template as I had to paste code here:
<table class="target-stage stage-only" border="0" cellspacing="0"
cellpadding="0" style="border:none;" >
<tr>
<td width="190" valign="top" class="ev-time">{{item.time}}</td>
<td valign="top" class="ev-desc">
<p class="ev-date">{{item.day}}, {{item.date}}, 2015</p>
<strong>{{item.first_name}} {{item.last_name}},</strong> Author of
<em>" {{item.work_title}}"</em><br />
{{item.stage}}
<span class="info-btn"><p class="selctor" rel={{item.rel}}><span
class="addSchd"><b>+ MY SCHEDULE</b></span>
</td>
</tr>
</table>

I'm seeing a few problems here.
First of all, your html is broken. The p-tag is never closed.
<span class="info-btn"><p class="selctor" rel={{item.rel}}><span class="addSchd"><b>+ MY SCHEDULE</b></span>
Second, as far as I've seen from taking a quick look you are dynamically adding content. You can't use (selector).click() on dynamic content, because the selector won't exist at the point that code is called. Instead use on(), which will be applied to dynamically generated content as well like this:
$(document).on("click", ".button", function() {
// do this when class with .button is clicked
});

directive "link" doesn't apply as I want it

Ok I got a page with some input managed with angular x-editable.
fiddle
The following directive:
treeView.directive('selectWhenEditing',function(){
var linkFunction = function(scope,startingelem,attr)
{
console.log(startingelem[0]);
console.log (startingelem[0].querySelector('.editable'));
angular.element(startingelem[0].querySelector('.editable')).on('click',function(){
//console.log(startingelem[0]);
angular.element(startingelem[0].querySelector('.editable-input').select());
});
};
return{
restrict: 'AEC',
link:linkFunction
};}
);
Is supposed to make that when I click on an editable element, the text is selected.
Here is the code of the page:
<tr ng-repeat="properties in elementToEdit" ng-if="fieldsSettings[$index][1]==1">
<td>
{{ fieldsSettings[$index][0] }}
</td>
<td data-select-when-editing>
<span editable-text="properties.prop" onbeforesave="" ng-if="fieldsSettings[$index][2]== 'text'">
{{ properties.prop || 'empty' }}
</span>
<span editable-select="properties.prop" onbeforesave="" ng-if="fieldsSettings[$index][2]== 'select'" e-ng-options="s.value as s.text for s in fieldsSettings[$index][3]">
{{ selectElement(properties.prop,$index) || 'empty' }}
</span>
</td>
</tr>
and that's the relevant compiled HTML:
<tr class="ng-scope" ng-if="fieldsSettings[$index][1]==1" ng-repeat="properties in elementToEdit">
<td class="ng-binding"> Name </td>
<td data-select-when-editing="">
<span class="ng-scope ng-binding editable editable-click" ng-if="fieldsSettings[$index][2]== 'text'" onbeforesave="" editable-text="properties.prop"> Food </span>
</td>
</tr>
The directive is firing as I wish it (eg: the number of times of expect it).
The first console.log logs me the calling TD element as expected. But the second one is null, as it never finds an element ".editable" inside this TD, so obviously the text is never selected (event "on" isn't applied).
I've done the exact same thing in another page/module and it works well. I'm comparing the codes but cannot find a difference.
You guys see something ?

As it says in the docs, jqLite's find() function is "Limited to lookups by tag name", which means you can't use it to select elements by classes - so you need to use querySelector instead. Note that you also need startingelem[0] instead of just startingelem when using it.
I had to use angular.element to get the jqLite object for on() binding (you can use plainJS there as shown below), so it looks a bit ugly:
angular.element(startingelem[0].querySelector(".editable")).on('click',function(){
startingelem[0].querySelector('.editable-input').select();
});
Here is the fully working version: http://jsfiddle.net/ar7znuz5/
Plain JS version using addEventListener:
startingelem[0].querySelector(".editable").addEventListener('click',function(){
startingelem[0].querySelector('.editable-input').select();
});
And the fully working version: http://jsfiddle.net/ar7znuz5/1/
The last version, with selects and a newer original code: http://jsfiddle.net/ar7znuz5/7/

AngularJS - Directives with Angular UI Bootstrap

I'm using Angular UI - Bootstrap, specifically the Typeahead directive. http://angular-ui.github.io/bootstrap/#/typeahead
I'm attempting to use the 'typeahead-template-url' to create custom html templates for my suggestion boxes. After trying multiple techniques, unsuccessfully, I discovered that by purposely messing up my quotation marks 'solved' the display issues. I would love to understand why this is breaking and get it working properly.
For example: this works
<table class="> <!--see class quote error -->
<tr>
<td>
<div ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)">
<a>ID{{ match.model.id }} - {{ match.model.text }}</a>
</div>
</td>
</tr>
</table>
This DOESN'T WORK
<table class="">
<tr>
<td>
<div ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)">
<a>ID{{ match.model.id }} - {{ match.model.text }}</a>
</div>
</td>
</tr>
</table>
FIDDLE is here: http://jsfiddle.net/nicktest222/JXtaZ/24/
Additionally, when you select an item in the results list, it returns the entire object. How can I get it to return a specific property in the object?
Any help would be greatly appreciated.
Thanks

I think it is the way you add your template (columnTwo.html) in JSFiddle.
Look at my demo (which is based on yours): http://jsbin.com/aMOrOra/1/edit?html,js,output
As for the typeahead property:
<input type="text" ng-model="monkey" typeahead-template-url="columnTwo.html" typeahead="suggestion as suggestion.text for suggestion in sample_data | filter: $viewValue" />
Here it means that the suggestion object is used as the selected value, but I want to display only the suggestion.text property in the box. But monkey will still be set to the selected suggestion object.
Just so you know, your current filter will look for the query on every properties of the suggestion object, not only text.
EDIT: To filter only the text property, use the filter like this:
filter:{'text':$viewValue}