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/
Related
I tryıng to use jQuery selectors but it doesn't work. I use Cypress so sometimes I need to use jQuery selectors to find elements by text or some unique generated numbers. (instead of cy.contains() i.e. sometimes I can need to brake recursions etc.)
Can anyone help me please?
I tried so many selectors, one of those selectors is:
$(tbody:has(tr.dx-row.dx-data-row.dx-row-lines.dx-row-focused.dx-cell-focus-disabled) tr td:contains(`10304`))
the queries that I showed normally work well. But that question that I asked doesn't work suspiciously. I thought about maybe the console doesn't support queries but when I use :has command console shows me without a problem then why :contains doesn't work? Why I can't select elements with text that I asked as a question?
I think your selectors are very complicated, try to simplify them by maybe just select the <td>, that contains that text like in my example below.
For demonstration purposes, i show just the cell text (.text()) - but it can be whatever you want.
$(document).ready(() => {
const $table = $('table');
console.log($table.find('td:contains(10304)').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr class="dx-row dx-data-row dx-row-lines andsoon">
<td class="dx-command-select">UNASSIGNED</td>
<td class="dx-col-1">10304</td>
<td class="dx-col-2">YAYDIN</td>
</tr>
</tbody>
</table>
In the following code pVM.People and pVM.PeopleSelected are observable arrays.
<tbody data-bind="foreach: pVM.People">
<tr>
<td><input type="checkbox" data-bind="checkedValue: $data, checked: pVM.PeopleSelected" /></td>
<td data-bind="text: $data.Name"></td>
</tr>
<tbody>
When I check a box, all the boxes get selected, and if I look into the chrome javascript console, my array prints ["on"] instead of having the objects in the list pVM.People.
I made a small thing in JSFiddle and the code works fine, so I know there is something more complex going on that is not being represented in the above code. However, the application is very large, and I am not even sure what to look for.
Can anyone point me in the right direction on why the objects are being converted to "on" when I check the boxes?
I was using the wrong version of knockout. In knockout 2.3.0 apparently my solution above does not work.
i'm trying to get values of table from javascript. The code is working fine however i was wondering if it could be improved somehow and make sure it works on almost all of the modern browsers. The table list is changed more often and list is about 100 names long so that's why im asking for help. i would like to say thank you in advance for helping.Below is sample of my code and here is http://jsfiddle.net/g2s1ahcy/
HTML
<tr>
<td>left</td>
<td><a id="toppart" href="/">Name</a></td>
</tr>
<tr>
<td>left</td>
<td><a id="label1" href="/">Name</a></td>
</tr>
<tr>
<td>left</td>
<td><a id="label2" href="/">Name</a></td>
</tr>
Javascript
document.getElementById("toppart").textContent="desc";
document.getElementById("label1").textContent="apple";
document.getElementById("label2").textContent="orange";
1) I would use innerText or innerHTML instead of textContent
2) Maybe you could use querySelector instead of getElementById
HTML
<table class="data">
<tr>
<td>left</td>
<td><a class="label1" href="/">Name</a></td>
</tr>
<tr>
<td>left</td>
<td><a class="label2" href="/">Name</a></td>
</tr>
<tr>
<td>left</td>
<td><a class="label3" href="/">Name</a></td>
</tr>
</table>
JavaScript
document.querySelector('table > .label1').innerText = "apple";
document.querySelector('table > .label2').innerText = "oranges";
document.querySelector('table > .label3').innerText = "bananas";
Note that you can use the id attribute alright, but in long documents, id tags may become hard to maintain unique, giving you additional trouble.
I think the multiple lines of code can be simplified via using a map which maps each id-text_context pair.
Replcae code:
document.getElementById("toppart").textContent="desc";
document.getElementById("label1").textContent="apple";
document.getElementById("label2").textContent="orange";
With:
var id2Content = {
"toppart": "desc",
"label1": "apple",
"label2": "orange"
};
for(var key in id2Content) {
document.getElementById(key).textContent = id2Content[key];
}
innerText doesn't work in firefox, so it's better to use innerHTML or textContent. You should take in account that innerHTML parses HTML code, like <div id ="x"> or <a href="">... which is great but also takes resources (if you don't need that funtionality, better use textContent instead).
Also, in processing terms, document.querySelector('#id1') is equivalent to document.getElementById(id1), but most advanced jQuery selectors overload the system, so you I'll recommend to use id selectors whenever you can.
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}
So I have the following HTML
<div class="tmpl" id="query_tmpl">
<tr>
<td></td>
<td class="primary_email"></td>
</tr>
</div>
and the following JS:
console.log($('#query_tmpl').html());
For some reason this only logs the 'a' tag. (Ex: http://jsfiddle.net/L8RQq/ )
Why does this happen and how do I get around it so that I can properly pick up the tr/td? I'm using jQuery 1.9.2 if that makes any difference.
Update:
Yes, the markup is 'bad html', but the whole point of this question is how to get around that. Using the HTML present and without altering it, how can I grab the contents even though it's 'bad'?
You don't have table tags around your tr. Try this:
<div class="tmpl" id="query_tmpl">
<table>
<tr>
<td></td>
<td class="primary_email"></td>
</tr>
</table>
</div>
This will log the div's contents properly.
the reason it wasn't logging, is because the browser sees some invalid tr and td tags, and removes those, because they can only be in a table, leaving you with only the a.
If you can't change the markup, tell the person / company that wrote that markup to fix it. It's invalid HTML.
Make it like this
<table class="tmpl" id="query_tmpl">
<tr>
<td></td>
<td class="primary_email"></td>
</tr>
</table>
Then it will surely work correctly
If you want to pick up tr's or td's you can use css manipulation functions such as children([selector]) where selector is eventually a class