How to override function in javascript ? casperjs then function - javascript

I want to check if the "login page" appear before each step :
Here is my code:
casper.then(function() {
checkIfRedirectedToLoginPage();
this.evaluate(function() {
document.getElementById("").click();
});
});
casper.then(function() {
checkIfRedirectedToLoginPage();
this.evaluate(function() {
});
});
function checkIfRedirectedToLoginPage(){
if loginPage{
this.then(function(){
this.sendKeys(x('//*[#id="user_name"]'), USER_NAME);
this.sendKeys(x('//*[#id="password"]'),PASSWORD);
this.click(x(//*[#id="login"]));
});
}
}
How it's possible to override casper.then without littering my code with the checkIfRedirectedToLoginPage function . thanks

it is possible to do this though it is not recommended. what I would suggest instead is to create a helper method that calls casper.then and accepts a function as a callback.
function myCasperThen(callback) {
return casper.then(function() {
checkIfRedirectedToLoginPage();
callback();
}
}

Related

jQuery select element after async function

I have a problem with selecting element after generating by async callback function.
How to do that?
My code:
$(document).ready(function() {
function1(function2);
//here i want to select generated element by id $('#select-id')
});
function function1(callback) {
$.getJSON('./ajax/results_get.php', function(data) {
console.log("function1");
callback();
});
}
function function2() {
console.log("function2");
}
EDIT:
Now i used callback, but i don't know how to make visible object created within function3 to the click button event.
$(document).ready(function() {
function1(function() {
function2(function() {
function3(function(){
var foo = $('#element');
});
});
});
$('#savebtn').click(function(){
//how to use assigned foo here?
});
});

Javascript jQuery Error Overload Ajax Request?

I have two buttons. One Button refreshes the table (html table) with a ajax php request. And there is another button to refresh it every 10 seconds. If I try to access the document it throw a lot of errors that I don't know about how to solve the problem.
My Javascript Code is here:
<script>
$(document).ready(function(){
$("#reloadLoginActivities").click(function(){
$("#loginActivities").load("https://www.prodigy-official.de/resources/php/website_utilities.php", {
function: "loadTenLatestLoginActivities"
});
});
$("#liveUpdateLoginActivities").click(setInterval(function(){
$("#loginActivities").load("https://www.prodigy-official.de/resources/php/website_utilities.php", {
function: "loadTenLatestLoginActivities2"
},10000);
}));
});
</script>
I get a lot of errors in : https://prnt.sc/pp33s1
My jQuery File is here: https://www.prodigy-official.de/resources/js/jquery-3.3.1.min.js
I think that your formation is not correct.
$(document).ready(function(){
$("#reloadLoginActivities").click(function(){
$("#loginActivities").load("https://www.prodigy-official.de/resources/php/website_utilities.php", {
function: "loadTenLatestLoginActivities"
});
});
$("#liveUpdateLoginActivities").click(setInterval(function(){
$("#loginActivities").load("https://www.prodigy-official.de/resources/php/website_utilities.php", {
function: "loadTenLatestLoginActivities2"
});
}, 10000));
});
$(document).ready(function () {
$("#reloadLoginActivities").click(function () {
$("#loginActivities").load("https://www.prodigy-official.de/resources/php/website_utilities.php", {
function: "loadTenLatestLoginActivities"
});
});
$("#liveUpdateLoginActivities").click(liveActivityHandler);
function liveActivityHandler () {
$("#liveUpdateLoginActivities").text("Stop Live Update");
setInterval(function () {
$("#loginActivities").load("https://www.prodigy-official.de/resources/php/website_utilities.php", {
function: "loadTenLatestLoginActivities2"
});
}, 10000);
}
});

Code reuse with different event methods

I have two similar pieces of code in two different functions of my project
and I want to get rid of the repeating code. How can I do that?
1:
getArray("my-hand").forEach(function(elem){
$(elem).mouseover(function(){
$(this).css({'top': '1em'});
});
$(elem).mouseout(function(){
$(this).css({'top': '0em'});
});
$(elem).click(function(){
var cardNode = $(this).get(0);
//some jquery animation
play(cardNode,time);
});
})
and the second piece
2:
getArray("my-hand").forEach(function(elem){
$(elem).mouseover(function(){
$(this).css({'top': '1em'});
});
$(elem).mouseout(function(){
$(this).css({'top': '0em'});
});
$(elem).click(function(){
var cardNode = $(this).get(0);
//a function with another jquery animation
validateCardAndAddForCollection(checkNumber,cardNode,time);
});
})
One way is to put it in a function, and pass as an argument to that function a callback that will execute the desired code:
function handleCards (cb) {
getArray("my-hand").forEach(function(elem){
$(elem).mouseover(function(){
$(this).css({'top': '1em'});
});
$(elem).mouseout(function(){
$(this).css({'top': '0em'});
});
$(elem).click(function(){
var cardNode = $(this).get(0);
//some jquery animation
cb(cardNode);
});
});
}
handleCards(function (cardNode) {
play(cardNode, time);
});
handleCards(function (cardNode) {
validateCardAndAddForCollection(checkNumber,cardNode,time);
});
I'm assuming that the main re-usable logic is the setting up of the events. In that case, I would use a setupHandEvents method to do all of the boring stuff, but pass it a different method to represent it's click handler.
function setupHandEvents (hand, handler){
getArray(hand).forEach(function (elem) {
$(elem).mouseover(function () {
$(this).css({'top': '1em'});
});
$(elem).mouseout(function () {
$(this).css({'top': '0em'});
});
$(elem).click(function (){
handler($(this).get(0));
});
});
}
setupHandEvents('my-hand', function (cardNode) {
play(cardNode, time);
});
setupHandEvents('my-hand', function (cardNode) {
validateCardAndAddForCollection(checkNumber, cardNode, time);
});
Update
You've commented on the other answer that you have these re-used pieces of code wrapped up inside another function (one that delivers variables checkNumber and time from elsewhere. Here is how you would use my setupHandEvents method with the code you posted in that comment:
var func1 = function(time){
setupHandEvents('my-hand', function (cardNode) {
play(cardNode, time);
});
}
var func2 = function(checkNumber, time){
setupHandEvents('my-hand', function (cardNode) {
validateCardAndAddForCollection(checkNumber, cardNode, time);
});
}

Why when I use $(this) in a separate function and I call it inside a .each() it doesn't work?

I was trying to make a clean jQuery code and I put all my things inside a function that I call in a "each". The problem is that nothing happens and in console doesn't appear any error.
That's an example code:
$(function() {
$('.myElement').each(function() {
if($(this).children()) {
myFunction();
} else {
myFunction('.myOtherElement');
}
});
});
function myFunction(selector) {
if(!selector) {
$(this).html('Finish');
} else {
$(this).find(selector).html('Finish');
}
}
If I put my function content in .each it works, but in a separated function not, and I think that it should work. Why this snippet of code doesn't work?
The execution context(this) is different in this case, you can use .call() to apply it
$(function() {
$('.myElement').each(function() {
if($(this).children()) {
myFunction.call(this);
} else {
myFunction.call(this, '.myOtherElement');
}
});
});
The problem is the this in your case is not your object inside .each, but is the window object. To bind the this as a jquery object without having to apply the context everytime you want it using call . You could define it as a jquery plugin function
(function($){
$.fn.myFunction = function (selector) {
if(!selector) {
this.html('Finish'); //notice this here refer to jquery object instead of $(this)
} else {
this.find(selector).html('Finish');
}
}
})(jQuery);
$(function() {
$('.myElement').each(function() {
if($(this).children()) {
$(this).myFunction();
} else {
$(this).myFunction('.myOtherElement');
}
});
});

Call A Function On ScrollExtend - jQuery

How to call a function on scrollExtend. I need the code like below but its not working fine. How to make it work?
$(document).ready(
function() {
$('#scrollBox').scrollExtend(function() {
//alert('scroll extend working');
//functionCall();
});
}
);
But the actual code of scrollExtend is like below in which i dont know how to call a function on it,
jQuery('.scroll_container').scrollExtend({
'target': 'div#scroll_items',
'url': 'more_content.html',
'newElementClass': 'list_item more_content'
});
I would use the built in function onScrollBeyond in JQuery.
Else there is a setting in scrollExtend that is called beforestart and onSuccess which both are callback variables which means you could put functions there like
$('#scrollBox').scrollExtend({
'target': 'div#scroll_items',
'beforeStart': myFunction,
'onSuccess': mySecondFunction
});
Regards
As BeadFist said, you can simply use onScrollBeyond:
$('.scroll_container').onScrollBeyond(functionCall);//if the function exists already, just pass a reference too it
$('.scroll_container').onScrollBeyond(function()
{
//your function
});
Mind you, for both scrollExtend and onScrollBeyond, you need the plugin, of course.
Try using onScrollBeyond:
$(document).ready(
function() {
$('#scrollBox').onScrollBeyond(function() {
//alert('scroll extend working');
//functionCall();
});
}
);
Try:
$('#scrollBox').scroll(function() {
if($('#scrollBox').scrollTop() + $('#scrollBox').height() == $(parentElm).height()) {
alert("bottom!");
}
});

Categories