I have this code. For some reason the 1st console.log prints out well in the console but the 2nd gives me an undefined when I click. The cvs array is global.
thanks for the help
var losotro = ['div.santiago', 'div.karina', 'div.roman', 'div.marcos'];
var cvs = ['div#cv0 p', 'div#cv1 p', 'div#cv2 p', 'div#cv3 p'];
for (i = 0; i < losotro.length; i++) {
console.log(cvs[i]);
jQuery(losotro[i]).click(function(){
console.log(cvs[i]);
});
}
This is a typical closure problem in JavaScript.
Basically, all the callback(the click event handlers) are referencing to the same variable i(I know, this is weird to me at first as well), which at the end of the loop should be losotro.length. And
absolutely this is out of the index range of the losotro array.
You may want to check how closure works in JavaScript. But for the current problem, you could do this.
var cvs = ['div#cv0 p', 'div#cv1 p', 'div#cv2 p', 'div#cv3 p'];
for (i = 0; i < losotro.length; i++) {
console.log(cvs[i]);
var bindedFunc = (function(i) {
return function() {
console.log(i)
}
})(i)
jQuery(losotro[i]).click(bindedFunc);
}
Related
I am trying to build a function that can accept an array of tag name, by passing in the array of tag names, such as ['span', 'input', 'strong'] I want it to return a chain to search for the elements. For example, I want to find...
element(by.tagName('span'))
.element(by.tagName('input'))
.element(by.tagName('strong'));
By using my a function like...
public static getNestedElements = (arrayOfElementTags) => {
const temporaryElementArr = [];
for (let i = 0; i < arrayOfElementTags.length; i++ ) {
temporaryElementArr.push(element(by.tagName(arrayOfElementTags[i])));
}
for (let j = 0; j < temporaryElementArr.length; j++) {
if (j !== temporaryElementArr.length) {
temporaryElementArr[j] = temporaryElementArr[j] + '.';
}
}
return temporaryElementArr
};
The above function obviously sucks and doesn't work.
element(by.tagName('span')).element(by.tagName('input')).element(by.tagName('strong'));
// equivalent to element(by.css('span input strong'))
Therefor you can join all tags with space to generate a css selector. And use the css selector to find element. As following done.
public static getNestedElements = (arrayOfElementTags) => {
return element(by.css(arrayOfElementTags.join(' ')));
}
I would suggest to keep your logic simple instead of using a function.
element(by.tagName('span')).element(by.tagName('input')).element(by.tagName('strong'));
//It is a simple way to get the chained element provided by protractor api
documentation.
Creating a function is cumbersome and it won't give you desired results all the time.
I'm pretty new to CasperJS, but isn't there a way to open a URL and execute CasperJS commands in for loops? For example, this code doesn't work as I expected it to:
casper.then(function() {
var counter = 2013;
for (i = counter; i < 2014; i++) {
var file_name = "./Draws/wimbledon_draw_" + counter + ".json";
// getting some local json files
var json = require(file_name);
var first_round = json["1"];
for (var key in first_round) {
var name = first_round[key].player_1.replace(/\s+/g, '-');
var normal_url = "http://www.atpworldtour.com/Tennis/Players/" + name;
// the casper command below only executes AFTER the for loop is done
casper.thenOpen(normal_url, function() {
this.echo(normal_url);
});
}
}
});
Instead of Casper is calling thenOpen on each new URL per iteration, it gets only called AFTER the for loop executes. Casper thenOpen then gets called with the last value normal_url is set to. Is there no Casper command to have it work each iteration within the for loop?
Follow up: How do we make casper thenOpen return a value on the current iteration of the for loop?
Say for example, I needed a return value on that thenOpen (maybe if the HTTP status is 404 I need to evaluate another URL so I want to return false). Is this possible to do?
Editing casper.thenOpen call above:
var status;
// thenOpen() only executes after the console.log statement directly below
casper.thenOpen(normal_url, function() {
status = this.status(false)['currentHTTPStatus'];
if (status == 200) {
return true;
} else {
return false;
}
});
console.log(status); // This prints UNDEFINED the same number of times as iterations.
If you need to get context then use the example here:
https://groups.google.com/forum/#!topic/casperjs/n_zXlxiPMtk
I used the IIFE (immediately-invoked-function-expression) option.
Eg:
for(var i in links) {
var link = links[i];
(function(index) {
var link = links[index]
var filename = link.replace(/#/, '');
filename = filename.replace(/\//g, '-') + '.png';
casper.echo('Attempting to capture: '+link);
casper.thenOpen(vars.domain + link).waitForSelector('.title h1', function () {
this.capture(filename);
});
})(i);
}
links could be an array of objects and therefore your index is a reference to a group of properties if need be...
var links = [{'page':'some-page.html', 'filename':'page-page.png'}, {...}]
As Fanch and Darren Cook stated, you could use an IIFE to fix the url value inside of the thenOpen step.
An alternative would be to use getCurrentUrl to check the url. So change the line
this.echo(normal_url);
to
this.echo(this.getCurrentUrl());
The problem is that normal_url references the last value that was set but not the current value because it is executed later. This does not happen with casper.thenOpen(normal_url, function(){...});, because the current reference is passed to the function. You just see the wrong url, but the correct url is actually opened.
Regarding your updated question:
All then* and wait* functions in the casperjs API are step functions. The function that you pass into them will be scheduled and executed later (triggered by casper.run()). You shouldn't use variables outside of steps. Just add further steps inside of the thenOpen call. They will be scheduled in the correct order. Also you cannot return anything from thenOpen.
var somethingDone = false;
var status;
casper.thenOpen(normal_url, function() {
status = this.status(false)['currentHTTPStatus'];
if (status != 200) {
this.thenOpen(alternativeURL, function(){
// do something
somethingDone = true;
});
}
});
casper.then(function(){
console.log("status: " + status);
if (somethingDone) {
// something has been done
somethingDone = false;
}
});
In this example this.thenOpen will be scheduled after casper.thenOpen and somethingDone will be true inside casper.then because it comes after it.
There are some things that you need to fix:
You don't use your counter i: you probably mean "./Draws/wimbledon_draw_" + i + ".json" not "./Draws/wimbledon_draw_" + counter + ".json"
You cannot require a JSON string. Interestingly, you can require a JSON file. I still would use fs.read to read the file and parse the JSON inside it (JSON.parse).
Regarding your question...
You didn't schedule any commands. Just add steps (then* or wait*) behind or inside of thenOpen.
I'm trying to do a little math library to facilitate my app, this however is throwing an off error.
TypeError: Object 25 has no method 'permutation'
function permutate(p) {
var states = new Number(p.length)
chat( states.permutation(states) )
}
Number.prototype.factorial = function() {
for(var i = 2; i <= this; i++)
n*=i
return n
}
Number.prototype.permutation = function(r) {
return (this.factorial() / (this-r).factorial())
}
in addition to hopefully fixing my code, I'm really curious why the objects type is being interpreted as a number primitive? (or whatever is really going on here)
I am trying to create a dynamic accordion. My problem is that I can not seem to get a reference to the i variable inside the for loop. I know it is a scope problem but I thought this closure would do the trick.... Please someone help me out as this is driving me completely insane.
jQuery(function(){
var tables = jQuery('table');
var tableHeadings = jQuery('h3');
for(i =0 , ii = tableHeadings.length; i < ii; i++){
(function(){
var index = i;
tables.eq(index).addClass('table-' + index);
tableHeadings.eq(index).click(function(){
tables.eq(index).slideToggle();
});
})();
}
});
Better yet:
tableHeadings.each(function(index, element) {
tables.eq(index).addClass('table-' + index);
tableHeadings.eq(index).click(function() {
tables.eq(index).slideToggle();
});
});
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