Unable to find element with xpath due to different division - xpath

Could you help to fix this error. Received error as:
Unable to find element with xpath
Below the tags for the element which is a Text area
<td nowrap="">
<script>
function clipBrdAction(evt, fieldName) {
evt = evt||window.event;
if(evt.ctrlKey && evt.keyCode==67) {
document.execCommand('copy');
//var temp = $(fieldName).value;
//clipboardData.setData('Text', temp);
//$(fieldName).value = clipboardData.getData('Text');
}
else if(evt.ctrlKey && evt.keyCode==86) {
document.execCommand('paste');
//$(fieldName).value = clipboardData.getData('Text');
}
else if(evt.ctrlKey && evt.keyCode==88) {
document.execCommand('cut');
//var temp = $(fieldName).value;
//clipboardData.setData('Text', temp);
//$(fieldName).value = '';
} else if(evt.keyCode==46) {
document.execCommand('delete');
//var selStart = $(fieldName).selectionStart;
//var selEnd = $(fieldName).selectionEnd;
//var fieldLen = $(fieldName).value.length;
//if (selEnd == fieldLen)
// temp = $(fieldName).value.substr(0,selStart);
//else if (selEnd > selStart)
// temp = $(fieldName).value.substr(0,selStart)+ $(fieldName).value.substr(selEnd, fieldLen);
//else
// temp = $(fieldName).value.substr(0,selStart)+ $(fieldName).value.substr((+selEnd + +1), fieldLen);
//clipboardData.setData('Text', temp);
//$(fieldName).value = clipboardData.getData('Text');
}
</script>
<textarea id="nrpsFilter" rows="3" onkeypress="return checkIt(event,'');" cols="30" title="" onblur="this.value=trim(this.value);" onkeyup="" onkeydown="return clipBrdAction(event, 'nrpsFilter');" name="nrpsFilter"/>
</td>
And my code is:
driver.findElement(By.xpath("//*[#id='nrpsFilter']")).sendKeys("*1??0*");
In Firepath, the element is identifiable, after when i search for another element that is under same division (div tag) but not identifiable after searching for an element from different division. Does that mean I should Switch to the division in my code? Both the divisions are under same Frame.

Ok then just before using Sendkeys please switch to the iframe first after that your code will work without any problem.
driver.switchTo().frame("frame name");
// perform your action
// after you have performed all your action inside the iframe
// plz switch back to the default content
driver.switchTo().defaultContent();
// now perform your user action outside that iframe
Hope this helps you

Try this and see if it works. I took it from your comment but rearranged a couple statements. I think you want the final sendkeys() to be in the IFRAME also, right? We really need more complete HTML to help any further.
driver.findElement(By.xpath("//*[#id='first']//span")).click(); // (1. Click Dropdown)
driver.findElement(By.xpath("//*[#id='ui-id-33']/span")).click(); // (2. Click SubDropDown )
driver.findElement(By.xpath("//a[contains(text(),'Quick Search')][#id='referential_quicksearch']")).click(); // (3.Click the link)
driver.findElement(By.xpath("//*[#id='nrpsFilter']")).sendKeys("1?0*");// (Enter in textArea)
driver.switchTo().defaultContent();

Related

How do I update model in Master detail razor page with AJAX results

I have a parent table with rows.
When they select a row, an AJAX call fires that returns the child details.
I have multiple text boxes showing child properties
<div class="row">
#Html.CheckBoxFor(m => m.Child.Property)
#Html.LabelFor(m => m.Child.Property)
</div>
but I can't see how to update the text boxes with the child I get back in AJAX results.
The best I've been able to do is manually updating each field from the 'complete' method. But I've got about 30 more fields to add and it feels like the wrong approach.
How do I bind the edit boxes to the returned model without using partials and without refreshing the entire page?
I added Child as a property in the #model, and the TextFor appears to bind properly. But of course
#Model.Child = child
does not. So they never show any data.
This question was based on a misunderstanding on my part. At first I deleted the question when I realized my mistake. I'm reinstating it because I think it is an easy mistake for a noobie to fall into and once you do, the answer is hard to sort out.
The problem is that #model no longer exists once the page is rendered. There is no data binding going on behind the scenes as I thought there was.
Your options are
populating the elements manually. (this will need editing to fit your particular elements)
function DisplayMergeSection(data) {
for (var key of Object.keys(data)) {
DisplayElement(data, key, "#Clients_");
}
}
function DisplayElement(data, key, prefix) {
return;
var val = data[key];
var valString = data[key + "String"];
var element = $(prefix + key)[0];
if (element && element.type === 'text') {
if ((val || '').toString().indexOf("Date(") > -1) {
var dtStart = new Date(parseInt(val.substr(6)));
element.value = moment(dtStart).format('MM/DD/YYYY');
} else {
element.value = val;
}
} else if (element && element.type === 'checkbox') {
element.checked = val;
} else if (element && element.type === 'select-one') {
element.value = valString;
} else if (element && element.nodeName === 'DIV') {
if ((val || '').toString().indexOf("Date(") > -1) {
var dtStart = new Date(parseInt(val.substr(6)));
element.innerText = moment(dtStart).format('MM/DD/YYYY');
} else {
element.innerText = val;
}
}
}
create a bunch of observables with knockout and then set up data binding. This is a lot cleaner.
https://knockoutjs.com/documentation/json-data.html
set up a mapping with the knockout plugin.
https://knockoutjs.com/documentation/plugins-mapping.html

Shopify: Checkout ajax validations?

I need to add ajax validations in the checkout page when the users click on the Continue button in each checkout step. Does anyone know if this is possible?
I need to send the Cart object, Address, items, etc. The idea is, the users are unable to continue, if they fail the validation.
You can only do this if you are on Shopify Plus. You cannot inject Javascript into checkout for the very good reason that you'd probably break it! It is a finely tuned machine, so the most you can do usually is change some css classes.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
If you have Shopify Plus, then you can insert your js form validation.
Also you have to replace the given input id with you custom id. After which, you can insert, check and get data from input fields
Below is script for phone number validation
$("#checkout_shipping_address_phone").attr("id","checkout_shipping_address_phone_clone");
document.getElementById('checkout_shipping_address_phone_clone').setAttribute('maxlength','10');
document.getElementById('checkout_shipping_address_phone_clone').setAttribute('max-length','10');
// document.getElementById('checkout_shipping_address_phone').setAttribute('type','number');
// document.getElementById('checkout_shipping_address_phone').setAttribute('minlength','10');
// document.getElementById('checkout_shipping_address_phone').setAttribute('data-minlength','10');
let mobileBtn = document.getElementById('checkout_shipping_address_phone_clone');
mobileBtn.removeAttribute('aria-required');
mobileBtn.removeAttribute('data-phone-formatter-country-select');
mobileBtn.removeAttribute('data-phone-formatter');
mobileBtn.removeAttribute('autocomplete');
mobileBtn.setAttribute("onkeypress","return isNumber(event)");
mobileBtn.type='text';
console.log("aaa");
function isNumber(evt){
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
$("body").on("click","#continue_button",function(){
var hh = $('#checkout_shipping_address_phone_clone').val();
if(hh.length==10){
console.log('dbcjhsdvjhdsvhjsjh');
$("#error_msgehh").remove();
$('#continue_button').attr('type','submit');
$('#continue_button').css('opacity','1');
}
else{
console.log(hh.length);
$('#continue_button').css('opacity','.5');
$("#error_msgehh").remove();
$('#checkout_shipping_address_phone_clone').parent().after().append('<p id="error_msgehh" style="color:red;">Enter 10 Digit Phone Number</p>');
$('#continue_button').attr('type','button');
}
});
$('#checkout_shipping_address_phone_clone').attr('maxlength','10');
$('#checkout_shipping_address_phone_clone').attr('max-length','10');
$("body").on("keyup mouseenter mouseleave","#checkout_shipping_address_phone_clone",function(){
var hh = $(this).val();
const regexExp = /^[6-9]$/gi;
let firstChar = regexExp.test(hh[0]); // dont allow 0,1,2,3,4,5 digits at first place
if(!firstChar){
var v ='';
$('#checkout_shipping_address_phone_clone').val(v);
}
});
$("body").on("keyup mouseenter mouseleave",".field__input-wrapper input",function(){
var hh = $('#checkout_shipping_address_phone_clone').val();
console.log('hover');
const regexExp = /^[6-9]$/gi;
let firstChar = regexExp.test(hh[0]); // dont allow 0,1,2,3,4,5 digits at first place
if(!firstChar){
var v ='';
$('#checkout_shipping_address_phone_clone').val(v);
}
});
// console.log("bbbaaa");
// });

CKEDITOR -- cannnot restore cursor location after DOM modification

I've read this excellent answer to pretty much the same question. However, I have tried every technique that #Reinmar recommended, and none of them seem to work.
The situation is that I am taking the current HTML from the editor and wrapping certain pieces in span tags. I then set the now modified HTML back and try to restore the user's cursor location. No technique works.
Here is a very simple example to reproduce the issue:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
</head>
<body>
<textarea id="cktest"><p>Sometimes Lorem. Sometime Ipsum. Always dolor.</p></textarea>
<script type="text/javascript">
(function () {
var checkTimeout;
var bookmark;
var storeCursorLocation = function(editor) {
bookmark = editor.getSelection().createBookmarks();
};
var restoreCursorLocation = function(editor) {
editor.getSelection().selectBookmarks(bookmark);
};
var validateText = function(editor) {
storeCursorLocation(editor);
var data = editor.document.getBody().getHtml();
data = data.replace("Lorem", "<span class='err-item'>Lorem</span>");
editor.document.getBody().setHtml(data);
restoreCursorLocation(editor);
};
CKEDITOR.replace('cktest', {
on: {
'instanceReady': function(evt) {
},
'key' : function(evt) {
clearTimeout(checkTimeout);
checkTimeout = setTimeout(function () {
validateText(evt.editor);
}, 1000);
}
}
});
})();
</script>
</body>
</html>
This code starts a timer when a user presses a key, and then waits for 1 second after they stop pressing keys to do the check.
Copy this to a new .html file and run it in your favorite browser (I am using Chrome).
When the CKEditor loads, use the mouse to place your cursor somewhere in the middle of the text. Then press the CTRL key and wait 1 second. You will see your cursor jump back to the start of the text.
This code example uses
editor.getSelection().createBookmarks();
to create the bookmark. But I have also tried:
editor.getSelection().createBookmarks(true);
and
editor.getSelection().createBookmarks2();
I have also tried just saving the range using
var ranges = editor.getSelection().getRanges();
and
editor.getSelection().selectRanges(ranges);
in the restoreCursorLocation function.
(function () {
var checkTimeout;
var bookmark;
var storeCursorLocation = function( editor ) {
bookmark = editor.getSelection().createBookmarks( true );
};
var restoreCursorLocation = function( editor ) {
//editor.focus();
editor.getSelection().selectBookmarks( bookmark );
};
var validateText = function( editor ) {
storeCursorLocation( editor );
var data = editor.document.getBody().getHtml();
data = data.replace( "spaceflight", "<span class='err-item'>spaceflight</span>" );
editor.document.getBody().setHtml( data );
restoreCursorLocation( editor );
//fire this event after DOM changes if working with widgets
//editor.fire( 'contentDomInvalidated' );
};
var editor = CKEDITOR.replace( 'editor1', {
extraAllowedContent : 'span(err-item)',
on: {
"pluginsLoaded" : function( event ){
editor.on( 'contentDom', function() {
var editable = editor.editable();
editable.attachListener( editable, 'keyup', function( e ) {
clearTimeout( checkTimeout );
checkTimeout = setTimeout(function () {
validateText( editor );
}, 100 );
});
});
}
}
});
})();
I have checked your code, made some corrections and the above seems to work fine. I know you said you have tried it but for me createBookmarks(true) has done the trick.
Explanations and Notes:
You needed to use createBookmarks(true) which inserts unique span into HTML. Such bookmark is not affected by changes you are doing inside the DOM (there are limits of course e.g. your custom changes remove bookmark).
It was clever to use getBody().getHtml() and getBody().setHTML(). If you have used editor.getData() this would have removed empty spans that represent bookmarks.
Please note however that such approach may break widgets so it is required to fire contentDomInvalidated event after such changes.
I was also focusing editor before restoring selection but this is “just in case” solution, as I have noticed that editor selects bookmark without it. If however, for some reason, you are losing the selection, this would be another thing to use.
Here you have working example: http://jsfiddle.net/j_swiderski/nwbsywnn/1/
Check the default behaviour when you set innerHtml in https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
Removes all of element's children, parses the content string and assigns the resulting nodes as children of the element
The bookmarks in CKEDITOR are hidden span elements and setting innerHtml will remove all those elements.
Anyway the solution is very simple.
Change your storeCursorLocation function to this
var storeCursorLocation = function(editor) {
bookmark = editor.getSelection().createBookmarks(true);
};
When you pass true as parameters it will use the ids as the reference instead of storing the DOM elements so you can restore then after an innerHtml change.
{Edit}
Reading Solution 2 from #Reinmar he says
If you can avoid uncontrolled innerHTML changes and instead append/remove/move some nodes, then just remember that you have to preserve these elements and this method will work perfectly. You can also move bookmarks' elements if your modifications should change the selection as well.
This is how you do it if you can't replace the contents of the element innerHtml.
This solution is less efficient but might work in some scenarios
Change the validateText function to this.
var validateText = function(editor) {
storeCursorLocation(editor);
var parent = editor.document.getBody().$.firstChild,
nodes = parent.childNodes,
nodeText,
words,
index = 0,
current,
newElement;
while (index < nodes.length) {
current = nodes[index];
nodeText = current.nodeValue;
if (current.nodeType === Node.TEXT_NODE && nodeText.indexOf('Lorem') !== -1) {
words = nodeText.split('Lorem');
newElement = document.createTextNode(words[0]);
parent.insertBefore(newElement, current);
newElement = document.createTextNode(words[1]);
parent.insertBefore(newElement, current.nextSibling);
newElement = document.createElement('span')
newElement.className = 'err-item';
newElement.innerHTML = 'Lorem';
parent.replaceChild(newElement, current);
break;
}
index++;
}
restoreCursorLocation(editor);
};
Basically I'm transversing the nodes of the first p in the chkeditor body and replacing only the node of type text that contains Lorem with a span and add the remaining text before and after as text elements. If you replace the whole text like you were doing it will remove from the DOM the bookmarks so when you tried to restore they don't exist.

Angularjs - optimizing the watcher of ngrepeat to watch only certain properties of collection

In my angularJS application I have a collection (array) of rather large objects. I need to bind to this collection in various places (e.g. to display the property: name of the contained objects) - binding is essential, as these names might change.
As the normal ngRepeat would observe the whole collection by strict equality comparison I am concerned about application speed (we are talking about objects with thousends of properties or more) - I actually just need to observe general changes in the collection (like length, changes of the single references in case two elements are flipped and some specific properties like the mentioned .name property)
I am thinking about using the following approach (basically creating a custom copy of the collection and manually bind to the original collection.
My question:
Is the described approach better than watching the original collection (by equality - as it is my understanding the ngRepeater does) or is there some better approach (e.g. defining some kind of compare callback in a watch statement to check only for changes in certain properties,...)
<script>
function QuickTestController($scope) {
// simulate data from a service
var serviceCollection = [], counter = 0,
generateElement = function() {
var element = { name:'name' + ++counter };
//var element = { name:'name' };
for (var j = 0 ; j < 5 ; j++) element['property' + j] = j;
return element;
};
for (var i = 0 ; i < 5 ; i++) {
serviceCollection.push( generateElement() );
}
// in the view controller we could either bind to the service collection directly (which should internally use a watchCollection and watch every single element for equality)
$scope.viewCollection = serviceCollection;
// watching equality of collection
/*
$scope.$watch('_viewCollectionObserve', function(newValue, oldValue) {
console.log('watch: ', newValue, oldValue);
}, true);
*/
// or we could create our own watchCollection / watch structure and watch only those properties we are interested in
$scope._viewCollectionObserve = serviceCollection;
var viewCollectionManual = [],
rebuildViewCollection = function() {
viewCollectionManual = [];
for (var i = 0, length = serviceCollection.length ; i < length ; i++) {
viewCollectionManual.push( {name:serviceCollection[i].name } );
}
console.log('- rebuildViewCollection - ');
$scope.viewCollection2 = viewCollectionManual;
},
watchCollectionProperties = [],
unregisterWatchCollection = function() {},
rebuildWatchCollectionProperties = function() {
watchCollectionProperties = [];
for (var i = 0, length = serviceCollection.length ; i < length ; i++) {
watchCollectionProperties.push('_viewCollectionObserve[' + i + ']'); // watch for ref changes
watchCollectionProperties.push('_viewCollectionObserve[' + i + '].name'); // watch for changes in specific properties
}
unregisterWatchCollection();
var watchString = '[' + watchCollectionProperties.join(',') + ']';
unregisterWatchCollection = $scope.$watchCollection(watchString, function(newValues, oldValues) {
console.log('watchCollection: ', newValues, oldValues);
rebuildViewCollection();
});
};
$scope.$watch('_viewCollectionObserve.length', function(newValue, oldValue) { // watch add / remove elements to / from collection
console.log('watch / length: ', newValue, oldValue);
rebuildWatchCollectionProperties();
});
// rebuildViewCollection();
rebuildWatchCollectionProperties();
// click handler ---
$scope.changName = function() { serviceCollection[0].name += '1'; };
$scope.changeSomeProperty = function() { serviceCollection[0].property0 += 1; };
$scope.removeElement = function() { serviceCollection.splice(0, 1); };
$scope.addElement = function() { serviceCollection.push( generateElement() ); };
$scope.switchElement = function() {
var temp = serviceCollection[0];
serviceCollection[0] = serviceCollection[1];
serviceCollection[1] = temp;
};
// will of course not react to this (this is desired behaviour!)
$scope.removeCollection = function() { serviceCollection = []; };
}
</script>
<div data-ng-controller="QuickTestController">
<ul>
<li data-ng-repeat="element in viewCollection">{{element.name}} {{element}}</li>
</ul>
<hr>
<ul>
<li data-ng-repeat="element in viewCollection2">{{element.name}} {{element}}</li>
</ul>
<button data-ng-click="changName()">changName</button>
<button data-ng-click="changeSomeProperty()">changeSomeProperty</button>
<button data-ng-click="removeElement()">removeElement</button>
<button data-ng-click="addElement()">addElement</button>
<button data-ng-click="switchElement()">switchElement</button>
<hr>
<button data-ng-click="removeCollection()">removeCollection (see comment)</button>
</div>
Any help / opinions would be greatly appreciated - please note that I tried to create a fiddle to demonstrate my approach but failed :-(
(I know that benchmarking might be a possible solution to test my approach, but I´d rather know the opinion of the angularjs pros in here)
thanks,
matthias
I think what you're looking for is bindonce, which is a high performance binding directive that lets you bind a property or expression once in AngularJS, just as what its name suggests.
One thing you can also try is a 'track by' expression. If you have a property that is unique for each object in the collection, you can pass that to your repeat expression.
<div ng-repeat="item in items track by item.id"></div>
I think Angular will then just watch that property on each of your items. So this should improve performance, but I don't know how much.

How to make the tab get focus

In my gridComplete function, depending on certain values in the datarow, I want to move the focus to a different tab. The gridCompelete function will be something like
var grid = $('#grdResults');
var m = grid.getDataIDs();
for (var i = 0; i < m.length; i++) {
var rowData = grid.getRowData(m[i]);
if (rowData.errorMessage != '') {
alert(rowData.errorMessage);
$('#UploadMain').focus();
}
}
Obviously the .focus() does not seem to work. Given below is the part of the view that has the code for the tabs
<div id="editTabs">
<ul>
<li>Main</li>
<li>Data Validation</li>
</ul>
<div id="UploadMain">
<fieldset>
.......
What do I need to have the focus moved?
Are you looking for the select() method?
$("#editTabs").tabs("select", 0); // Activate first tab.
Or:
$("#editTabs").tabs("select", "#UploadMain"); // Activate "UploadMain" tab.

Resources