I am coding for Arcgis with Dojo. Badly stuck at a point. I have a dojo dialog which has list generated with Javascript. I am not able to bind 'data-dojo-attach-event'. The dialog is working fine but the click event is not working.
Thanks!
var wireHtml = '<table class="table table-striped"><tbody>';
for (let i = 0; i < wiresList.length; i++) {
if(wiresList[i].attributes.conduit_id === Number(conduitId)){
wireHtml += '<tr><td>' + wiresList[i].attributes.name + ' <span class="badge pull-right" data-dojo-attach-event="click:wireDetail">detail</span></td></tr>';
}
}
wireHtml += '</tbody></table>';
wiresDialog.containerNode.innerHTML = wireHtml;
wiresDialog.show();
Related
There is a search bar with a button to filter. Clicking on the same submenu (dropdown) is displayed. The HTML looks like :
<ul >
<li data-value"svalue1">
<svg>.... </svg>
<p> Value1 </p>
</li>
<li data-value"svalue2">
<svg> ....</svg>
<p> Value2 </p>
</li>
<li data-value"svalue3">
<svg> </svg>
<p> Value3 </p>
</li>
I need to retrieve the values of options as an array and compare.
I am able to assert a single value but unable to store it in an array to compare all together.
var tab = Selector('ul');
-
-
.expect(tab.child('li').nth(3).innerText)
.eql('Value3', 'The value is not correct');
But this doesn't work
for (let i = 0; i < 6; i++) {
myArray.push(tab.child('li').nth(i).innerText);
console.log("value:" + tab.child('li').nth(i).innerText);
}
Prints: value:[object Object]
Any idea?
You need to add the 'await' keyword. For instance:
for (let i = 0; i < 6; i++) {
console.log("value:" + await tab.child('li').nth(i).innerText);
}
Refer to the 'Access Page Element Properties' topic to find this note:
Note that selector's property getters and client functions are asynchronous. If you need their resulting value in your code, use the await keyword. However, you can omit await when you pass a selector property or a client function value into an assertion.
For all the checkboxes and radio buttons i create a locater builder:
LocatorBuilders.add('radio', function(e) {
var name = e.parentNode.parentNode.getAttribute('name');
var value = name + '_' + e.parentElement.getAttribute('value');
var result = 'radio=' + value;
return result;
});
And a locater strategy:
PageBot.prototype.locateElementByRadio = function(locatorString, inDocument, inWindow) {
var name = locatorString.split('_')[0];
var value = locatorString.split('_')[1];
var result = inDocument.querySelector('div[field=' + name +'] label[value=' + value +'] input');
return result;
}
HTML element:
<div class="radio" name="radio-example" style="">
<label class="radio-label" value="male" style="">
<input class="radio-input" style="" tabindex="1" type="radio">
<span class="option">Man</span>
</label>
</div>
This works perfect and in my selenium IDE is ee something like radio=new_yes
But when i record a click on a radio i see two commands in selenium ide. One command with the locater builder and one command with a verry long xpath that belong to the label from the checkbox. How can i record only the input field from the checkbox? and not the label ?
If you are only trying to get the locator for the radiobutton, you can use this locator
css=input.radio-input
Let me know if you have any more questions.
I am working on a search form, where the user press the Print button, then it should create a plain html page for printing:
<a href="#" onclick="Print()" target="_blank" class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-print"></span>
Print
</a>
And the Print() function (of course all the relevant data is passed):
$.get("#Url.Action("PrintData")", { ... ... ... });
This calls the appropriate controller action, which returns the correct data I am expecting with return PartialView(data);
The problem is, the new tab is not loading the PrintData.cshtml, instead it returns the original search screen.
What am I missing? Any help really appreciated.
The solution:
var url = '#Url.Action("Action", "Controller")' + '?target = "_blank"';
var data = "&projectId=" + id + "&date=" + date ...
window.open(url + data);
I have a name picker attached to the input but also want to allow type-ahead in a second field attached to the name picker, and then add the selected entry in the type-ahead control to the dojo name text box control.
In the typeahead onchange event, I can get the value of it and I can get the values in the Name Text Box control, but each entry in the NameTextBox is a spanned link like this:
<SPAN tabIndex=0 val="**abbreviatedNotesName**"><A class=lotusFilter tabIndex=-1 href="javascript:;">**commonNotesName**<SPAN class=lotusClose>x</SPAN></A></SPAN>
Do I need to re-write the innerHTML of the NameTextBox, and guess at the commonname from the typeahead result? Or, is there a better way? Thanks for any help/suggestions.
Here's the code:
<div id="copyToRow">
<div class="namePickerContainer">
<xe:namePicker id="namePicker1" for="fld_copyto_recipients">
<xe:this.dataProvider>
<xe:namePickerAggregator>
<xe:this.dataProviders>
<xe:dominoNABNamePicker addressBookSel="all"
nameList="peopleAndGroups">
</xe:dominoNABNamePicker>
<xe:dominoViewNamePicker labelColumn="$1"
viewName="($VIMPeople)" databaseName="#{javascript:viewScope.personalNAB;}"
label="#{javascript:viewScope.personalNABTitle;}">
</xe:dominoViewNamePicker>
</xe:this.dataProviders>
</xe:namePickerAggregator>
</xe:this.dataProvider>
</xe:namePicker>
<xp:div id="copyToContainer" styleClass="addresseeContainer">
<xe:djextNameTextBox id="fld_copyto_recipients"
value="#{sendFilesDoc.file_CopyToRecipients}" multipleSeparator=","
style="min-height:1.5em;" multipleTrim="true">
</xe:djextNameTextBox>
<xp:inputTextarea id="copyto_typeahead">
<xp:typeAhead mode="partial" minChars="1"
preventFiltering="true">
<xp:this.valueList><![CDATA[#{javascript:getComponent("namePicker1").getTypeAheadValue(this)}]]></xp:this.valueList>
</xp:typeAhead>
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="copyToRow">
<xp:this.script><![CDATA[var copyTo = XSP.getElementById("#{id:copyto_typeahead}");
var result = XSP.getElementById("#{id:copyToTA}");
var newEntry = '<SPAN tabIndex=0 val="' + copyTo.value + '"><A class=lotusFilter tabIndex=-1 href="javascript:;">' + copyTo.value + '<SPAN class=lotusClose>x</SPAN></A></SPAN>';
//Format: <SPAN tabIndex=0 val="<abbreviated NotesName>"><A class=lotusFilter tabIndex=-1 href="javascript:;">common NotesName<SPAN class=lotusClose>x</SPAN></A></SPAN>
result.value = copyTo.value;
var copyToRecipients = XSP.getElementById("#{id:fld_copyto_recipients}");
//<INPUT style="MIN-HEIGHT: 1.5em" id=view:_id1:include1:fld_copyto_recipients type=text name=view:_id1:include1:fld_copyto_recipients dojoType="extlib.dijit.NameTextBox">
var copyToValue = copyToRecipients.innerHTML;
alert('copytorecipients innerHTML = ' + copyToValue);
alert('copytorecipients value = ' + document.getElementById("#{id:fld_copyto_recipients}").value); <-- undefined
var copyToArray = new Array();
var a = document.getElementsByName("#{id:fld_copyto_recipients}");
copyToArray = (a[0].value.split(','));
copyToArray.push(result.value);
//copyToRecipients.value = copyToArray.join(','); <-- this does not work
alert('copyToArray value = ' + copyToArray.join(','));
result.value = copyToArray.join(',');
copyTo.value = "";
return;]]></xp:this.script>
</xp:eventHandler>
</xp:inputTextarea>
</xp:div>
<xp:inputText id="copyToTA">
</xp:inputText>
</div></div>
What I think was tripping me up was required validation on the NameTextBox seemed to prevent the onchange event in the typeahead from firing. Who knows? Went through a lot of iterations ... I ended up adding Tommy Valand's JS function to control when validation is triggered & that seemed to fix things.
Bound the NameTextBox to the datasource field. Bound the typeahead to a requestScope variable. The typeahead onchange event code below also does a partial refresh on a container panel that wraps the 2 inputs.
/* append the typeahead name to those already selected */
var curVals:java.util.Vector = sendFilesDoc.getItemValue("file_SendToRecipients");
curVals.addElement(requestScope.sendToTypeAhead);
sendFilesDoc.replaceItemValue("file_SendToRecipients",curVals);
requestScope.sendToTypeAhead = null;
Then in the NameTextBox onChange event that also partial refreshes the container panel:
/*
remove duplicates that can be picked if the format of the displayed name in the right panel of the
name picker dialog doesn't match the column returned from the picker -- for instance, this will
happen on internet-style names stored in the user's personal names.nsf
e.g. FName LName <user#somecompany.com>
*/
var thisField:javax.faces.component.UIInput = getComponent("fld_sendto_recipients");
var theNames = #Unique(thisField.getValue());
thisField.value = theNames;
So you end up with something similar to how MSN hotmail works. Just have one final issue to try to resolve and that's how to get the cursor to return to the typeahead field after either using the namepicker or making a typeahead choice. Added this code as per this post on the client onchange event of the NameTextBox but the cursor just jumps into the typeahead field but then immediately jumps out:
/* set focus back on the typeahead input -- the input is a child of the typeahead dojo widget */
/* matches any <input> that is a child of the .dijitInputField class of the <div> for the typeahead */
var el = dojo.query('div[widgetid*="sendto_typeahead"] .dijitInputField > input').at(-1)[0].focus();
Any help??? Or, suggestions for solution improvement??
My form uses inputs and textareas, some of which I've added as TinyMCE elements. The problem is that the inputs are converted into the same size as the textareas. I'd like the inputs to be the same height as non-TinyMCE input fields (I'm using the latest version of TinyMCE - 3.5b2).
For example, TinyMCE adds this table to the inputs and textareas:
<table role="presentation" id="teaser_tbl" class="mceLayout" cellspacing="0" cellpadding="0" style="width: 590px; height: 100px; ">
How can I change this embedded style to reduce the height for inputs to 30px?
I've also posted this on the TinyMCE forums.
<table role="presentation" id="teaser_tbl" class="mceLayout" cellspacing="0" cellpadding="0" style="width: 590px; height: 100px; ">
That is exactly the element you will need to change. Tinymce has the width and height init param, but there are some cases where this setting is not sufficient.
Due to the fact that the editor iframe explicitly gets the same height assigned you will have to adjust the iframe too. You will need to call
var new_val = '30px';
// adjust table element
$('#' + 'my_editorid' + '_tbl').css('height', new_val);
//adjust iframe
$('#' + 'my_editorid' + '_ifr').css('height', new_val);
Idealy, this should be done right on editor initialization. So use:
tinyMCE.init({
...
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
var new_val = '30px';
// adjust table element
$('#' + ed.id + '_tbl').css('height', new_val);
//adjust iframe
$('#' + ed.id + '_ifr').css('height', new_val);
});
}
});
Update: Solution without jQuery:
tinyMCE.init({
...
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
var new_val = '30px';
// adjust table element
var elem = document.getElementById(ed.id + '_tbl');
elem.style.height = new_val;
// adjust iframe element
var iframe = document.getElementById(ed.id + '_ifr');
iframe.style.height = new_val;
});
}
});