Develop Reference

for loop is not working in protractor

I have used the below for loop to click on the icon in 5th index of td, if the 2nd index of td contains text (which is passed as external parameter) as expected.
I'm getting the row elements as tenantRowElements and written the following code.
The outcome is reached i.e, the expected button is clicked but still am facing the below error and it is not moving into next method.
stale element reference: element is not attached to the page document
error.
this.clickEditOfTenant=function(userobj) {
console.log("Edit of tenant is clicked");
basePage.waitForElement(this.tenantRowElements, 5000);
this.tenantRowElements.then(function (tenants) {
console.log("element length : " + tenants.length);
for (var i = 0; i < tenants.length; i++) {
tenants[i].$$('td').then(function (tds) {
tds[1].getText().then(function (text) {
return text;
}).then(function (name) {
console.log("tenant name : " + name + "; given name :" + userobj.tname);
if (name === userobj.tname) {
tds[5].click();
}
});
});
}
}).then(function () {
if(basePage.isVisible(updateTenant.tenantNameTxtBox))
{console.log("Edit button is clicked");}
});
};

i have edited as below, and now its working
this.clickEditOfTenant = function(userobj) {
console.log("call clickEditOfTenant()");
basePage.waitForElement(this.tenantRowElements, 10000);
//browser.sleep(15000);
this.tenantRowElements.filter(function (tr) {
return tr.all(by.css('td')).get(1).getText().then(function (name) {
return name === userobj.tname;
});
}).then(function (eles) {
eles[0].$$('td').then(function (btn) {
//console.log(text);
btn[5].click();
}).then(function () {
browser.sleep(5000);
if (basePage.isVisible(updateTenant.tenantNameTxtBox)) {
console.log("Edit button is clicked");
}
});
});
};

I suspect basePage.waitForElement(this.tenantRowElements, 5000); is not sufficient to wait the page complete load. So you met the issue at the first iteration of loop,
Add browser.sleep(15000) after basePage.waitForElement(this.tenantRowElements, 5000); for debug purpose.
And you can use filter() to make your code briefness:
this.clickEditOfTenant = function(userobj) {
console.log("call clickEditOfTenant()");
// basePage.waitForElement(this.tenantRowElements, 5000);
browser.sleep(15000)
this.tenantRowElements.filter(function(tr) {
return tr.all(by.css('td')).get(1).getText().then(function(name) {
return name === userobj.tname;
});
})
.then(function(eles) {
if(eles.length > 0) {
eles[0].click();
}
})
.then(function () {
if(basePage.isVisible(updateTenant.tenantNameTxtBox)) {
console.log("Edit button is clicked");
}
});
};

Set time out event on a m() generated element

I have a m("p.help") element which is removed with a click event.
I also want the element to be removed automatically after a few seconds if not clicked. I need to set a time out on it. Setting time out does not work.
function help() {
var text = `This is a service template. Use Service section to set the schedule`;
var node = m("p.help", {
onclick() {
this.parentNode.removeChild(this);
},
}, text);
setTimeout(() => {
if (node.parentNode) {
node.parentNode.removeChild(node);
console.log("removed");
m.redraw();
}
}, 5000);
return node;
}
The click event works fine but the time out does not work. It is not even triggered judging by the console.log()
What am I doing wrong?
EDIT
Thanks ciscoheat for the tip.
I had to put the timer in the controller for this to work.
So this one works fine:
function controller(init) {
this.display = {
help: true
};
setTimeout(() => {
this.display.help = false;
m.redraw();
}, 5000);
}
function view(vm) {
return m(".container", [
(() => {
var text = "Some text";
if (vm.display.help) {
return m("p.memo", {
onclick() {
this.parentNode.removeChild(this);
}
}, text);
}
})(),
]);
}

To use Mithril correctly, you should avoid DOM manipulation, leaving that to Mithril's fast diff algorithm.
Use a state variable instead, related to displaying the help paragraph that will be changed automatically after 5 seconds.
Here's a jsbin showing what I mean: http://jsbin.com/kixece/edit?html,js,output

Javascript function scope - to use console.log or not?

Two functions:
First: Closes a stickyFooter that is fixed to the bottom of the page onclick of the cross.
jQuery:
jQuery(document).ready(function() {
function closeSticky() {
jQuery('.stickyFooter').hide();
jQuery.cookie('stickyNewsClosed', 'yup', {
path: '/',
expires: 30
});
}
});
Second: This function fades in/fades out two divs, and stops when there's focus to an input area. What needs to happen now is when the stickyfooter is closed it needs to call the clearTimeout in this separate function:
jQuery(document).ready(function () {
// check if both divs are visible
if ((jQuery('.footerPromoBannerWrapper').is(':visible')) && (jQuery('.stickyFooter').is(':visible'))) {
// Local variable for cancel of fades
var stickyTimeout;
// Set sticky as display:none
jQuery('.stickyFooter').hide();
// Switch in
window.switchIn = function () {
jQuery('.footerPromoBannerWrapper').fadeToggle(function () {
jQuery('.stickyFooter').fadeToggle(function () {
stickyTimeout = setTimeout(function () {
window.switchOut();
}, 3000);
});
});
};
// Switch out
window.switchOut = function () {
jQuery('.stickyFooter').fadeToggle(function () {
jQuery('.footerPromoBannerWrapper').fadeToggle(function () {
stickyTimeout = setTimeout(function () {
window.switchIn();
}, 3000);
});
});
};
stickyTimeout = setTimeout(function () {
window.switchIn();
}, 5000);
jQuery('input#emailsignup').focus(function() {
clearTimeout(stickyTimeout);
});
} // End of both divs are visible if statement
});
Question:
How do I combine both in order to call the timeOut feature as part of the close of the sticky footer? Something like this?
First function amendment:
function closeSticky() {
jQuery('.stickyFooter').hide();
jQuery.cookie('stickyNewsClosed', 'yup', {
path: '/',
expires: 30
});
stopAnimation();
}
Second function amendment:
function stopAnimation() {
jQuery('input#emailsignup').focus(function() {
clearTimeout(stickyTimeout);
});
} // End stopAnimation function
console.log(function stopAnimation());

You have jQuery inside the functions, so i would suggest moving the 2 functions inside the dom ready scope. Your cleartimeout is probably calling in udefined.

Wait until div is not visible to process next line

I need to write some code which is supposed to wait until a predefined div is no longer visible in order to process the next line. I plan on using jQuery( ":visible" ) for this, and was thinking I could have some type of while loop. Does anyone have a good suggestion on how to accomplish this task?
$( document ).ready(function() {
$(".scroller-right" ).mouseup(function( event ) {
alert('right');
pollVisibility();
});
});
function pollVisibility() {
if ($(".mstrWaitBox").attr("visibility")!== 'undefined') || $(".mstrWaitBox").attr("visibility") !== false) {
alert('inside else');
microstrategy.getViewerBone().commands.exec('refresh');
} else {
setTimeout(pollVisibility, 100);
}
}
$( document ).ready(function() {
$(".scroller-right" ).mouseup(function( event ) {
alert('right');
pollVisibility();
});
});
function pollVisibility() {
if (!$(".mstrWaitBox").is(":visible")) {
alert('inside if');
microstrategy.getViewerBone().commands.exec('refresh');
} else {
setTimeout(pollVisibility, 100);
}
}
div when not visible:
<div class=​"mstrWaitBox" id=​"divWaitBox" scriptclass=​"mstrDialogImpl" dg=​"1" ty=​"edt">​
</div>​
div when visible:
<div class=​"mstrWaitBox" id=​"divWaitBox" scriptclass=​"mstrDialogImpl" dg=​"1" ty=​"edt" visibility="visible">​
</div>​

You can use the setTimeout function to poll the display status of the div. This implementation checks to see if the div is invisible every 1/2 second, once the div is no longer visible, execute some code. In my example we show another div, but you could easily call a function or do whatever.
http://jsfiddle.net/vHmq6/1/
Script
$(function() {
setTimeout(function() {
$("#hideThis").hide();
}, 3000);
pollVisibility();
function pollVisibility() {
if (!$("#hideThis").is(":visible")) {
// call a function here, or do whatever now that the div is not visible
$("#thenShowThis").show();
} else {
setTimeout(pollVisibility, 500);
}
}
}
Html
<div id='hideThis' style="display:block">
The other thing happens when this is no longer visible in about 3s</div>
<div id='thenShowThis' style="display:none">Hi There</div>

If your code is running in a modern browser you could always use the MutationObserver object and fallback on polling with setInterval or setTimeout when it's not supported.
There seems to be a polyfill as well, however I have never tried it and it's the first time I have a look at the project.
FIDDLE
var div = document.getElementById('test'),
divDisplay = div.style.display,
observer = new MutationObserver(function () {
var currentDisplay = div.style.display;
if (divDisplay !== currentDisplay) {
console.log('new display is ' + (divDisplay = currentDisplay));
}
});
//observe changes
observer.observe(div, { attributes: true });
div.style.display = 'none';
setTimeout(function () {
div.style.display = 'block';
}, 500);
However an even better alternative in my opinion would be to add an interceptor to third-party function that's hiding the div, if possible.
E.g
var hideImportantElement = function () {
//hide logic
};
//intercept
hideImportantElement = (function (fn) {
return function () {
fn.apply(this, arguments);
console.log('element was hidden');
};
})(hideImportantElement);

I used this approach to wait for an element to disappear so I can execute the other functions after that.
Let's say doTheRestOfTheStuff(parameters) function should only be called after the element with ID the_Element_ID disappears, we can use,
var existCondition = setInterval(function() {
if ($('#the_Element_ID').length <= 0) {
console.log("Exists!");
clearInterval(existCondition);
doTheRestOfTheStuff(parameters);
}
}, 100); // check every 100ms

jQuery adding functions to the animation queue

The problem is that when I try doing multiple animations they all happen the same time.
Is there any way to have animations go one after another without using callbacks?
Here's what I want to do:
$('#a1').click(function() { $('#div1').hide(3000); });
$('#a2').click(function() { $('#div2').hide(3000); });
$('#a3').click(function() { $('#div3').show(3000); });
If you click on #a1 and then click on #a2 then #a3 before the first animation completes then it shouldn't start right away but instead wait until the animation queue is empty then start the next one.
Take this demo for example
I want to be able to click a1 then a2 then a3 one after the another and first have it hide the first div completely, then the second completely, and then show the third.
My example is overly simple and while this can be done with callbacks, my real problem can't so callbacks aren't an option.
In essence, if you click all three the animation should complete in 9 seconds.
This DEMO should alert ('took around 9 seconds to complete')

Use .queue() on a common jQuery object:
var q = $({}); // this could also be a common parent, e.g. $('body')
$('#a1').click(function() {
q.queue(function(next) {
$('#div1').hide(3000, next);
});
return false;
});
$('#a2').click(function() {
q.queue(function(next) {
$('#div2').hide(3000, next);
});
return false;
});
$('#a3').click(function() {
q.queue(function(next) {
$('#div3').show(3000, next);
});
return false;
});​
Demo

Use .promise() to sidestep callbacks on show and hide:
The .promise() method returns a dynamically generated Promise that is resolved once all actions of a certain type bound to the collection, queued or not, have ended.
By default, type is "fx", which means the returned Promise is resolved when all animations of the selected elements have completed
Use .queue() to limit the number of animations resolved per promise (See also jsFiddle):
var promises = $({});
$('#a1').click(function() {
promises.queue(function(next) {
$('div').promise().done(function() {
$('#div1').hide(3000);
next();
});
});
return false;
});
$('#a2').click(function() {
promises.queue(function(next) {
$('div').promise().done(function() {
$('#div2').hide(3000);
next();
});
});
return false;
});
$('#a3').click(function() {
promises.queue(function(next) {
$('div').promise().done(function() {
$('#div3').show(3000);
next();
});
});
return false;
});

Try to create some array with queue, and check if there is something in it, as callback for animation, and run it again if there is. I've played with your example a little.
check it out:
http://jsfiddle.net/acrashik/nqh6x/6/
var queue = {
q: [],
run: function(elem, type, time, recall) {
if (queue.isRunning && !recall) {
console.log('pushed: ' + elem + type + time);
queue.q.push({elem:elem, type:type, time:time});
} else {
console.log('running:' + elem);
queue.isRunning = true;
if (type=='hide') {
$(elem).hide(time, function(){
queue.recall();
})
} else {
$(elem).show(time, function(){
queue.recall();
})
}
}
},
recall: function(){
console.log(queue.q.length);
if (queue.q.length > 0) {
queue.run(queue.q[0].elem, queue.q[0].type, queue.q[0].time, true);
queue.q = queue.q.splice(1,queue.q.length);
} else {
queue.isRunning = false;
queue.q = [];
}
},
isRunning: false
}
$('#a1').click(function() { queue.run('#div1','hide',2200) });
$('#a2').click(function() { queue.run('#div2','hide',2200) });
$('#a3').click(function() { queue.run('#div3','show',2200) });

I would use the animate() function as it comes with a complete function which is called when the animation finishes http://api.jquery.com/animate/.
So to use the jQuery doc example:
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete this is where you call the next animation...
});
});
function another_animation () {
$('xyz').animate({
opacity: 0.25,
left: '+=50',
}5000, function() {
// Animation complete this is where you call the next animation
I think that this is the cleanest way...

You could do something like this:
(function(){
var col=(function(){
var i=1;
return function(n){alert("you clicked link nr " + n + ", total clicks: "+i++)};
})();
$('#a1').click(function(){col(1)});
$('#a2').click(function(){col(2)});
$('#a3').click(function(){col(3)});
})();
Im not gona write the entire code for you but that should give you a good idea of how to do it.
Also none of the variables or functions are accessible from the global scope or any other.

Add stop() before the animation:
$('#a1').click(function() { $('#div1').stop().hide(3000); });
$('#a2').click(function() { $('#div2').stop().hide(3000); });
$('#a3').click(function() { $('#div3').stop().show(3000); });

Use this
$(element).promise().done(function () {...})
In your case
$('#a1').click(function () {
$('#div1').hide(3000);
});
$('#a2').click(function () {
$("#div1").promise().done(function () {
$('#div2').hide(3000);
});
});
$('#a3').click(function () {
$("#div2").promise().done(function () {
$('#div3').hide(3000);
});
});
The next animation will be performed only when the previous animation on selected element is complete.