I have several tabs with same page elements. One of the element contains a map div based on location details. I could get the map initialized for the first tab opened. The next tab when I open it throws up error as the div id containing the map is already initialized. How to make the div id unique (dynamic) for each map initialization in different tabs? Any idea would help me!
You can use this function to generate a completely unique id which you can then set with [id]="getUniqueId()":
getUniqueID(): string {
let d = Date.now();
if (window.performance && typeof window.performance.now === 'function') {
d += performance.now();
}
const id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
const r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d/16);
return (c === 'x' ? r : (r&0x3|0x8)).toString(16);
});
return id;
}
Related
On a page I'm my element has any one of three different identifiers. Having given all three under findByAll, I wish to quit the search for find element as soon as any one of it gets found. Looking for short circuit search for the element, no more search should happen once the element is found.
#
iOSXCUITFindByAllSet(value = { #iOSXCUITFindAll(value = {
#iOSXCUITBy(iOSNsPredicate = "type == 'XCUIElementTypeStaticText' && name == 'Acc_label_Header' && visible ==1"),
#iOSXCUITBy(iOSNsPredicate = "type == 'XCUIElementTypeStaticText' && name == 'ET NOW - Live Radio' && visible ==1"),
#iOSXCUITBy(iOSNsPredicate = "type == 'XCUIElementTypeStaticText' && name == 'ET NOW - Live Tv' && visible ==1") }) })
Don't want the request for find element to be going as soon as one of the element gets found, as this step of finding element by all locator is taking a lot of time.
I do not know what language you are using to control selenium. I wrote a bit of code in Javascript which waits for either one of several elements to be visible on the page:
// define what we are looking for
let xpathParts = [];
xpathParts.push("//h4[contains(#class,'search-title') and text()='Title 1']");
xpathParts.push("//h3[text()='Title 2']");
xpathParts.push("//h3[text()='Title 3']");
// try to get one of it
let elements = [];
for (let i = 0; i < 50 && elements.length == 0; i++) {
elements = driver.findElements(By.xpath(xpathParts.join("|")));
await new Promise(s => setTimeout(s, 100));
}
// throw an error if we did not find it within the time
if (elements.lenght == 0) {
throw "Could not find one of the elements";
}
I would like to create a vuetify autocomplete with a custom filter that first shows the hits that start with the searchtext and then show the hits that not start with the searchtext, but have the searchtext somewhere in the middle.
I now have a custom filter like this, but this filter is not prioritizing words that start with the searchtext:
customFilter(item, queryText) {
const textOne = item.description.toLowerCase();
const textTwo = item.code.toLowerCase();
const searchText = queryText.toLowerCase();
return (
textOne.indexOf(searchText) > -1 || textTwo.indexOf(searchText) > -1
);
}
},
Codepen (Type 'ma' for example)
I believe you need to sort it manually, filter returns only true/false whether item is a match.
// https://stackoverflow.com/a/36114029/1981247
var _sortByTerm = function (data, term) {
return data.sort(function (a, b) {
// cast to lowercase
return a.toLowerCase().indexOf(term) < b.toLowerCase().indexOf(term) ? -1 : 1;
});
};
Then pass sorted array to items prop
<v-autocomplete :items="computedItems"
...
computed: {
computedItems() {
return _sortByTerm(this.states, this.search.toLowerCase())
},
},
Note this is just to get you started, and you might need to change code a bit according to the data (and filters) you are using, e.g. _sortByTerm works only on array of strings, but in the link there is a solution for sorting arrays of objects also.
I'm newbie in using WebRTC and I am using this git project by Muaz-khan. I have problem when divided chat output into two columns (User name 1 and User name 2), this is default of chat output
id of this div is #chat-output
Can you show code for example? I think you just create two html containers (left and rigth for example) and push messages first to the left, and messages from the second to the right.
I am using this demo of him , [ https://github.com/muaz-khan/RTCMultiConnection/blob/master/demos/TextChat%2BFileSharing.html].
Here is function that Text Message Out Put will put here in . I want to change it in two columns, such as for User name 1 : <div id="usename1"></div>, for user name 2 : <div id="username2"></div>
document.getElementById('input-text-chat').onkeyup = function(e) {
if (e.keyCode != 13) return;
// removing trailing/leading whitespace
this.value = this.value.replace(/^\s+|\s+$/g, '');
if (!this.value.length) return;
connection.send(this.value);
appendDIV(this.value);
this.value = '';
};
var chatContainer = document.querySelector('.chat-output');
function appendDIV(event) {
var div = document.createElement('div');
div.innerHTML = event.data || event;
chatContainer.insertBefore(div, chatContainer.firstChild);
div.tabIndex = 0;
div.focus();
document.getElementById('input-text-chat').focus();
}
Modify function appendDIV().
function appendDIV(event) {
var div = document.createElement('div');
div.innerHTML = event.data || event;
chatContainer.insertBefore(div, chatContainer.firstChild);
div.tabIndex = 0;
div.style.width = '100%';
if (event.data)
div.style.textAlign = 'left';
else
div.style.textAlign = 'right';
div.focus();
document.getElementById('input-text-chat').focus();
}
P.S. I apologize for the late reply :)
I'm trying to use a GWT 2.5rc1 custom tablebuilder to render a subtable for each row in my datagrid. I've followed the example in the 2.5 rc1 showcase (url: http://showcase2.jlabanca-testing.appspot.com/#!CwCustomDataGrid).
I'm able to see the newly added sub-rows, but the problem comes when I want to add a clickhandler to a subrow anchor element.. the clickhandler is never invoked, which it seems also quite clear to me since I'm not "registering" the event handler anywhere.
Here the code I'm using now, "relevant part":
private void buildRegRow(Registrazione rowValue,final int absRowIndex, boolean isCommentRow) {
// Calculate the row styles.
SelectionModel<? super Registrazione> selectionModel = cellTable.getSelectionModel();
boolean isSelected =
(selectionModel == null || rowValue == null) ? false : selectionModel
.isSelected(rowValue);
boolean isEven = absRowIndex % 2 == 0;
StringBuilder trClasses = new StringBuilder(rowStyle);
if (isSelected) {
trClasses.append(selectedRowStyle);
}
// Calculate the cell styles.
String cellStyles = cellStyle;
if (isSelected) {
cellStyles += selectedCellStyle;
}
if(isCommentRow)
cellStyles += childCell;
TableRowBuilder row = startRow();
row.className(trClasses.toString());
/*
* Checkbox column.
*
* This table will uses a checkbox column for selection. Alternatively,
* you can call dataGrid.setSelectionEnabled(true) to enable mouse
* selection.
*/
TableCellBuilder td = row.startTD();
td.className(cellStyles);
td.style().outlineStyle(OutlineStyle.NONE).endStyle();
if (!isCommentRow) {
renderCell(td, createContext(0), cellTable.getColumn(0), rowValue);
}
td.endTD();
/*
* View children column.
*
* Displays a link to "show children". When clicked, the list of friends is
* displayed below the contact.
*/
td = row.startTD();
td.className(cellStyles);
if(!isCommentRow) {
td.style().outlineStyle(OutlineStyle.NONE).endStyle();
if(rowValue.hasComments())
//td.className(CellTableResource.INSTANCE.dataGridStyle().showChildren());
renderCell(td, createContext(1), cellTable.getColumn(1), rowValue);
} else {
td.colSpan(getColumns().size() - 1);
// // Draw sub-table header
TableBuilder subTable = td.startTable();
TableSectionBuilder subTableSection = subTable.startTHead();
TableRowBuilder tr2 = subTableSection.startTR();
TableCellBuilder td2 = tr2.startTH();
td2.text(msgs.date());
tr2.endTH();
td2 = tr2.startTH();
td2.text(msgs.username());
tr2.endTH();
td2 = tr2.startTH();
td2.text(msgs.comment());
tr2.endTH();
td2 = tr2.startTH();
td2.text(msgs.actions());
tr2.endTH();
subTableSection.endTR();
subTable.endTHead();
subTableSection = subTable.startTBody();
for(final EntityComment ec : rowValue.getCommentList()) {
tr2 = subTableSection.startTR();
// Date
td2 = tr2.startTD();
td2.text(DateUtil.getDefaultDateTimeFormat().format(ec.getCreationDate()));
tr2.endTD();
// Username
td2 = tr2.startTD();
td2.text(ec.getUsername());
tr2.endTD();
// Text
td2 = tr2.startTD();
td2.text(ec.getText());
tr2.endTD();
// Actions
td2 = tr2.startTD();
// Remove
Anchor removeAnchor = new Anchor("remove");
removeAnchor.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Window.alert("clicked");
}
});
td2.html(new SafeHtmlBuilder().appendHtmlConstant(removeAnchor.toString()).toSafeHtml());
tr2.endTD();
subTableSection.endTR();
}
subTable.endTBody();
td.endTable();
}
td.endTD();
for(int i = 2; i <= 6; i++) {
// Recorded, list name, callcenter, msisdn
td = row.startTD();
td.className(cellStyles);
td.style().outlineStyle(OutlineStyle.NONE).endStyle();
if(!isCommentRow) {
renderCell(td, createContext(i), cellTable.getColumn(i), rowValue);
}
td.endTD();
}
row.endTR();
}
The subtable shows up, with an anchor at the correct position, but the clickhandler is never invoked. I do not know how to write the handler code to the page, like I've done to render the anchor.
Thanks for any help.
I have tried custom tablebuilder and created a grid. You can add any element using the proper structure. Make sure you set the Unique Id to each element you create. Then through code access the element through the following code,
Element e = DOM.getElementById( id );
Cast the element to its proper widget i.e, if you are using text input element you can always cast it to textbox. To cast the element there is one more step which you can google out. Then add the clickhandler or whichever handler you want.
First, you have to know that I am developing my project with Struts (J2EE
Here is my problem :
I have 2 dijit.form.Select widgets in my page, and those Select are filled with the same list (returned by a Java class).
When I select an option in my 1st "Select widget", I would like to update my 2nd Select widget, and disable the selected options from my 1st widget (to prevent users to select the same item twice).
I succeed doing this (I'll show you my code later), but my problem is that when I open my 2nd list, even once, it will never be refreshed again. So I can play a long time with my 1st Select, and choose many other options, the only option disabled in my 2nd list is the first I've selected.
Here is my JS Code :
function removeSelectedOption(){
var list1 = dijit.byId("codeModif1");
var list2 = dijit.byId("codeModif2");
var list1SelectedOptionValue = list1.get("value");
if(list1SelectedOptionValue!= null){
list2.reset();
for(var i = 0; i < myListSize; i++){
// If the value of the current option = my selected option from list1
if(liste2.getOptions(i).value == list1SelectedOptionValue){
list2.getOptions(i).disabled = true;
} else {
list2.getOptions(i).disabled = false;
}
}
}
Thanks for your help
Regards
I think you have to reset() the Select after you've updated its options' properties. Something like:
function removeSelectedOption(value)
{
var list2 = dijit.byId("codeModif2"),
prev = list2.get('value');
for(var i = 0; i < myListSize; i++)
{
var opt = myList[i];
opt.disabled = opt.value === value;
list2.updateOption(opt);
}
list2.reset();
// Set selection again, unless it was the newly disabled one.
if(prev !== value) list2.set('value', prev);
};
(I'm assuming you have a myList containing the possible options here, and the accompanying myListSize.)