We Keep Coding

How to reset an elements class to it's initial value

How can I reset an elements 'class' attribute to it's initial value?
I am building a tooltip popup which starts with class="ttPopup". This is then set to the appropriate orientation by adding classes such as class="ttPopup top left".
Problem is when the Popup windows closes, how do I reset the class to it's original value ready for the next time?

There are several ways you could do it:
store in a custom attribute
store in a javascript array
store in localStorage
etc.

Not completely sure if I am correct to use a custom property on the element or not but here is the solution I have used at the moment:
eTooltip.addEventListener("mouseenter", function (oEvent) { ttOpen(oEvent); } );
eTooltip.addEventListener("mouseleave", function (oEvent) { ttClose(oEvent); } );
function ttOpen(oEvent) {
var thisPopup = oEvent.target.getElementsByClassName("ttPopup")[0];
thisPopup.origClassName = thisPopup.className;
}
function ttClose(oEvent) {
var thisPopup = oEvent.target.getElementsByClassName("ttPopup")[0];
if (thisPopup.origClassName) { thisPopup.className = thisPopup.origClassName; thisPopup.origClassName = null; }
console.log(thisPopup.className)
}
Thanks for your help.

Cannot locate element using recursion after it found it as visible

My Problem:
I am trying to click options in a dropdown with Nightwatch, using sections in page objects. I'm not sure if it's a problem with the section declaration or i'm missing something scope-related. Problem is that it finds the element as visible, but when it tries to click it will throw error that it cannot locate it using recursion.
What could i try to do to fix this issue using sections?
In the test:
var myPage = browser.page.searchPageObject();
var mySection = searchPage.section.setResults;
// [finding and clicking the dropdown so it opens and displays the options]
browser.pause (3000);
browser.expect.section('#setResults').to.be.visible.before(1000);
myPage.myFunction(mySection, '18');
In the page object:
var searchKeywordCommands = {
myFunction: function (section, x) {
section.expect.element('#set18').to.be.visible.before(2000);
if (x == '18') section.click('#set18');
//[...]
};
module.exports = {
//[.. other elements and commands..]
sections: {
setResults: {
selector: '.select-theme-result', //have also tried with '.select-content' and '.select-options' but with the same result
elements: {
set18: '.select-option[data-value="18"]',
set36: '.select-option[data-value="36"]' //etc
}}}}
Here is my source code:
When i run this piece of core, it seems to find the section, finds the element visible (i also can clearly see that it opens the dropdown and shows the options) but when trying to click any option, i get the error: ERROR: Unable to locate element: Section[name=setResults], Element[name=#set18]" using: recursion
Here is the full error:
My attempts:
I have tried to declare that set18 selector as an individual element instead of inside of the section and everything works fine this way, but won't work inside of the section. I have also tried all the selectors available to define the section's selector, but it won't work with any of them.

This is what i am doing with(LOL)
I assume steps would be (find dropbox - click dropbox - select value).
var getValueElement = {
getValueSelector: function (x) {
return 'li[data-value="'+ x + '"]';
}
};
module.exports = {
//[.. other elements and commands..]
sections: {
setResults: {
commands:[getValueElement],
selector: 'div[class*="select-theme-result"', //* mean contains,sometime class is too long and unique,also because i am lazy.
elements: {
setHighlight:'li[class*="select-option-highlight"]',
setSelected:'li[class*="select-option-selected"]',
//set18: 'li[data-value="18"]',
//set36: 'li[data-value="36"]'
// i think getValueFunction is better,what if you have 100+ of set.
}}}}
In your test
var myPage = browser.page.searchPageObject();
var mySection = searchPage.section.setResults;
// [finding and clicking the dropdown so it opens and displays the options]
mySection
.click('#dropboxSelector')
.waitForElementVisible('#setHighlight',5000,false,
function(){
var set18 = mySection.getValueElement(18);
mySection.click(set18);
});
Ps:in my case(i think your case also), dropbox or any small third-party js framework which is used many times in your web app, so better create a different PageObject for it,make pageObject/section is simple as possible.

How to hide row after changing status in angularjs

I'm now trying to hide clicked row after changing status in angularjs. Here is my coding and please let me know how to do it?
table.table
tr(data-ng-repeat="application in job.applications", ng-hide="application.hideApplication")
td.status
div.bold #{getMessage('Change Status:')}
div.normal
a(ng-class="app_status === 'shortlist' ? 'admin_edit_bold' : 'admin_edit_normal'", ng-click="changeApplicationStatus(application.id, 'shortlist', application)") #{getMessage('Shortlist')}
td.rating
div(ng-init='rating = application.app_rating')
.star-rating(star-rating='', rating-value='rating', data-max='5', on-rating-selected='rateFunction(application.id, rating)')
Here is controllerjs.
$scope.changeApplicationStatus = function (appId, app_status, application) {
return jobsService.changeApplicationStatus(appId, app_status).then(
function () {
application.hideApplication = false;
}
);
};

Put this attribute on whichever element you're wanting to show/hide
ng-hide="application.hideApplication"
Edit subsequent to comment:
That attribute wouldn't work on the same element as the ng-repeat, I don't think the application variable would be in scope...
Instead, you could change your repeat to:
application in job.applications | filter: { hideApplication : false }

Why md tooltip is not applied to md dummy tab

I am using angular material.
When I create my own directive and add it to md-tab-label, like
<md-tab-label>
<custom-directive>
Label
</cutom-directive>
</md-tab-label>
Then the custom directive is applied to some "md-dummy-tab" also.
But if I give mdtooltop to the md-tab-label ,like
<md-tab-label>
Label
<md-tooltip>Label</md-tooltip>
</md-tab-label>
then there is no md-tooltip applied to "md-dummy-tab" class
I tried searching inside the mdtooltip code, but couldnt get any clue.
https://github.com/angular/material/blob/master/src/components/tooltip/tooltip.js
How can I do the same for my custom directive , ie custom directive should not apply to md dummy tab?

<md-tooltip> is not appended to the <md-dummy-tab> because it doesn't render any HTML code inside the <md-tab-label>. Its template is appended to the nearest parent <md-content> the moment you trigger the tooltip to show.
scope.$watch('visible', function (isVisible) {
if (isVisible) showTooltip();
else hideTooltip();
});
-
function showTooltip() {
// Insert the element before positioning it, so we can get the position
// and check if we should display it
tooltipParent.append(element);
// Check if we should display it or not.
// This handles hide-* and show-* along with any user defined css
if ( hasComputedStyleValue('display','none') ) {
scope.visible = false;
element.detach();
return;
}
positionTooltip();
angular.forEach([element, background, content], function (element) {
$animate.addClass(element, 'md-show');
});
}
-
current = getNearestContentElement(),
tooltipParent = angular.element(current || document.body)
-
function getNearestContentElement () {
var current = element.parent()[0];
// Look for the nearest parent md-content, stopping at the rootElement.
while (current && current !== $rootElement[0] && current !== document.body) {
current = current.parentNode;
}
return current;
}

TIBCO GI + JAVASCRIPT

How reset label property.
It means, initially we set the cursor property as #Hand Pointer, then i want to change cursor property value as reset. i should not get hand symbol while doing some other operation. it should be fully disabled.
i tried one way but its not working.
function disableCancelLbl() {
log.info("inside disableCancelLbl");
var lblCancel = createCustomer.getServer().getJSXByName("lbl_ctId_cancel");
lblCancel.setEvent("", jsx3.gui.Interactive.JSXCLICK);
lblCancel.setClassName("buttonTextStyleOff");
lblCancel.setCursor("default",true);
log.info(lblCancel.getCursor());
lblCancel.repaint();
//reset(lblCancel.getCursor());
log.info(lblCancel.getCursor());
}
after repainting, again its changing to hand pointer.

Here's what I use to set/reset the cursor on a button. The setCursor methods seem to work, but the reset to default doesn't work for Chrome :-(
rsh.setWaitCursor = function(button)
{
button.setEnabled(jsx3.gui.Form.STATEDISABLED); button.repaint();
// WaitCursor reset not working in Chrome !!
// 'root' not overwriting wait cursor !
if( !rsh.isChrome ) {
button.setCursor("wait",true);
}
}
rsh.resetWaitCursor = function(button)
{
button.setEnabled(jsx3.gui.Form.STATEENABLED); button.repaint();
// WaitCursor reset not working in Chrome !!
if( !rsh.isChrome ) {
button.setCursor("default",true);
}
}