I’m using a currency conversion plugin called curry.js that’s being called on a custom WordPress page with bootstrap tabs and advanced custom fields.
As WP loops through each tab it’s appending to the list of currencies so that when you open the dropdown in the third tab you see the list of currencies repeated three times.
Here’s the portion of the code curry.js is running each time:
var generateDDM = function( rates ){
output = '';
// Change all target elements to drop downs
dropDownMenu.each(function(){
for (var i in rates ) {
rate = rates[i];
output += '<option value="'+ i +'" data-rate="'+ rate +'">' + i + '</option>';
}
$( output ).appendTo( this );
});
};
I’ve tried creating a counter
variable outside that block of code so that after it runs once and creates the list of currencies, it stores that list in a global output
variable which is no longer appended to, but to no avail.
If further clarification is needed, I’m happy to provide–any help would be fantastic I’ve spend many hours trying to figure this out and I know it should be a very simple solution.
Thanks!
Solved this with a simple if statement checking the length of the output variable after each WP loop:
In javascript the code is executed asynchronously meaning there is no guarantee that the second line of code gets executed only after the first line of code gets executed. So maybe that’s why
counter
variable value is not visible to globaloutput
variable. For more information refer this great article Why is my variable unaltered after I modify it inside of a function? – Asynchronous code reference