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.
Related
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();
I have two slickgrid and one delete button,
When i click on delete,i want focused grid so that i will delete items.
How to get focused grid ?
This is what i have done so far....
function deleteRow(e, args){
//code to delete items from "grid"
var selectedrows = grid.getSelectedRows();
var len = selectedrows.length;
var itemNo = "";
for(var i=0;i<len;i++)
{
var data = grid.getData().getItem(selectedrows[i]);
dataView.deleteItem(data.id);
itemNo =data.id;
var url = "delete_Item_Master?itemNo="+itemNo;
$.get(url, {itemNo : itemNo},function(data) {
location.reload(true);
});
}
//code to delete items from "metalGrid"
var metalSelectedrows = metalGrid.getSelectedRows();
var mlen = metalSelectedrows.length;
var itemNo = "";
for(var i=0;i<mlen;i++)
{
var mData = metalGrid.getData().getItem(metalSelectedrows[i]);
meyalDataView.deleteItem(mData.id);
itemNo =mData.id;
var url = "delete_subItem?itemNo="+itemNo;
$.get(url, {itemNo : itemNo},function(data) {
location.reload(true);
});
}
}
But this code delete items from both grid..
I think that the correct way to do this is to write your own selection model. It should be a Singleton, and two grids should interact with it. It should know which grid was last active.
But you need to ask yourself is that behaviour is good. What if user will delete an item from another grid - because there's only one button. IMHO every grid should have it's own button. And I work for an ERP company where we got that dillemas everyday ;)
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.
I am able to render a tree using YAHOO.widget.TreeView yui 2.9.
Using pre made tags
<ul> <li> Products </li> </ul>
I am able to get the label i.e Products using node.label
YAHOO.util.Event.on('allProductSaveButton','click',function() {
var hiLit = rightProductTree.getNodesByProperty('highlightState',1);
if (YAHOO.lang.isNull(hiLit)) {
YAHOO.log("None selected");
} else {
var labels = [];
for (var i = 0; i < hiLit.length; i++) {
var node = hiLit[i];
if(node.children.length<=0) {
labels.push(hiLit[i].label); }
}
alert("Highlighted nodes:\n" + labels.join("\n"), "info", "example");
}
});
I want to insert id of the Products in the html and get the id of label as well. so where should I place id attribute inside or where?
I am not sure you can set your own id on the markup. TreeView is one of the oldest widgets in YUI 2 and it uses a particularly funny markup because the supported CSS styles in those days were quite pathetic, thus, what part of that funny markup are you going to apply that id to?
If what you want is to give a tree-node an identifier that you can later use to retrieve it, then use custom properties. Then, calling getNodesByProperty will allow you to retrieve the node by the value of that extra property.
I got a solution. I inserted the label element inside the span element that was inside the li element i.e
<ul>
<li> <span> <label id="444" > Product </label> </span>
</li>
</ul>
then using YAHOO.util.Dom I traversed and got the id attribute of label element.
YAHOO.util.Event.on('GroupsProductSaveButton', 'click', function() {
var hiLit = rightProductTree2.getNodesByProperty('highlightState', 1);
if (YAHOO.lang.isNull(hiLit)) {
alert("None selected");
} else {
var labels = [];
for (var i = 0; i < hiLit.length; i++) {
var node = hiLit[i];
if(node.children.length<=0) {
labels.push(YAHOO.util.Dom.get(hiLit[i].contentElId).getElementsByTagName('label')[0].getAttribute("value")); }
}
alert("Highlighted nodes:\n" + labels.join("\n"), "info", "example");
ProductGroupDWR.displaySelectedNodes(labels, function(data) {
});
}
});
I am trying to link to a specific tab in Magento Enterprise. It seems that all of the answers I've found don't apply well to their method. I just need a link to the page to also pull up a specific tab. This is the code they use:
Enterprise.Tabs = Class.create();
Object.extend(Enterprise.Tabs.prototype, {
initialize: function (container) {
this.container = $(container);
this.container.addClassName('tab-list');
this.tabs = this.container.select('dt.tab');
this.activeTab = this.tabs.first();
this.tabs.first().addClassName('first');
this.tabs.last().addClassName('last');
this.onTabClick = this.handleTabClick.bindAsEventListener(this);
for (var i = 0, l = this.tabs.length; i < l; i ++) {
this.tabs[i].observe('click', this.onTabClick);
}
this.select();
},
handleTabClick: function (evt) {
this.activeTab = Event.findElement(evt, 'dt');
this.select();
},
select: function () {
for (var i = 0, l = this.tabs.length; i < l; i ++) {
if (this.tabs[i] == this.activeTab) {
this.tabs[i].addClassName('active');
this.tabs[i].style.zIndex = this.tabs.length + 2;
/*this.tabs[i].next('dd').show();*/
new Effect.Appear (this.tabs[i].next('dd'), { duration:0.5 });
this.tabs[i].parentNode.style.height=this.tabs[i].next('dd').getHeight() + 15 + 'px';
} else {
this.tabs[i].removeClassName('active');
this.tabs[i].style.zIndex = this.tabs.length + 1 - i;
this.tabs[i].next('dd').hide();
}
}
}
});
Anyone have an idea?
I would consider modifying how the class starts up.
initialize: function (container) {
this.container = $(container);
this.container.addClassName('tab-list');
this.tabs = this.container.select('dt.tab');
// change starts here //
var hashTab = $(window.location.hash.slice(1));
this.activeTab = ( this.tabs.include(hashTab) ? hashTab : this.tabs.first());
// change ends here //
this.tabs.first().addClassName('first');
this.tabs.last().addClassName('last');
this.onTabClick = this.handleTabClick.bindAsEventListener(this);
for (var i = 0, l = this.tabs.length; i < l; i ++) {
this.tabs[i].observe('click', this.onTabClick);
}
this.select();
}
Here, I have only changed how the initial tab is chosen. It checks for an URL fragment which is commonly known as a hash, if that identifies one of the tabs it is preselected. As a bonus the browser will also scroll to that element if possible.
Then you only need to append the tab's ID to the URL. For example you might generate the URL by;
$productUrl = Mage::getUrl('catalog/product/view', array(
'id' => $productId,
'_fragment' => 'tab_id',
));
If you've recently migrated from an earlier Magento release, e.g. from Enterprise 1.11 to Enterprise 1.12, make sure the javascript in /template/catalog/product/view.phtml
right after the foreach that generates the tabs gets updated to the 1.12 version:
<script type="text/javascript">
var collateralTabs = new Enterprise.Tabs('collateral-tabs');
Event.observe(window, 'load', function() {
collateralTabs.select();
});
</script>
surfimp's VERY helpful suggestions did not produce the desired opening of the closed tab otherwise. Once this updated javascript was added, clicking on a link to read Review or Add Your Review on the product page, jumped to the Reviews tab, even if the tab had been hidden.
Similar to Zifius' answer, you can modify the initialize function to just take another argument which will be the active tab.
Event.observe(window, 'load', function() {
new Enterprise.Tabs('collateral-tabs', $('tab_review'));
});
and then in the scripts.js (or wherever this class may exist for you)
initialize: function (container, el) {
...
this.activeTab = el;
...
}
Use whatever logic in the template you like to set 'el' to the desired value.
The reason I did it this way is because when I used Zifius' method, the desired tab would be the active tab, but the default tab's content was still displayed.
Had the same task yesterday and as I don't know about prototype much I solved it by adding another method:
selectTab: function (element) {
this.activeTab = element;
this.select();
},
Usage:
var Tabs = new Enterprise.Tabs('collateral-tabs');
Tabs.selectTab($('tabId'));
Would like to know if it's a correct approach