We Keep Coding

Uncaught ReferenceError: price_initial_text is not defined

I have a problem. Ill try to explain it.
I have 1 script. It works on 1 site, but it gives error on second one. Same hosting, same CMS..
Take a look.
$(document).ready(function() {
$('.product-options input[type=radio]:checked').each(function(){
productPrice($(this));
});
$('.product-options input[type=radio]').bind('change', function(){
if ($(this).is(':checked')) {
$(this).parent().children('.active').removeClass('active');
$(this).next().addClass('active');
}
productPrice($(this));
});
function productPrice($option) {
var regex = /([0-9]+)/;
var price_initial = 0;
if ($option.parent().parent().find('.price-initial').size() != 0) {
price_initial_text = $option.parent().parent().find('.price-initial').text();
price_initial = regex.exec(price_initial_text)[1];
}
var price_additional = 0;
if ($option.attr('price') != '') {
price_additional = regex.exec($option.attr('price'))[1];
}
$option.parent().parent().find('.price-total').html(price_initial_text.replace(/([0-9]+)/, price_initial*1 + price_additional*1));
}
});
It gives me - Uncaught ReferenceError: price_initial_text is not defined
Ill repeat. That script works on another site within same webhosting.
Im including that custom js after jquery like on working site.

if statement within function breaks javascript

I'm stumped with this one and would really appreciate someone's help.
I'm customizing highslide for integration with wordpress. Via the following code within the highslide.config.js file I'm adding a class name to certain elements and passing different attributes through an onClick call depending on certain conditions.
Everything works until I add the following code:
if(hsGroupByWpGallery){
slideshowGroup: this.parentNode.parentNode.parentNode.id
};
When the above code is present, not only does that one statement not execute, but the whole thing stops working. Even if the if statement is something like if(1=1){}; it still breaks.
If I have instead simply slideshowGroup: this.parentNode.parentNode.parentNode.id or nothing (the two options I'm looking for), both do what I would expect. I just need an if statement to switch between them.
Here's the relevant code:
jQuery(document).ready(function() {
var hsCustomGalleryGroupClass = 'fbbHighslide_GalleryGroup';
var hsCustomGalleryGroupChecker = 0;
var hsGroupByWpGallery = true;
jQuery('.' + hsCustomGalleryGroupClass).each(function(){
hsCustomGalleryGroupChecker++;
return false;
});
if (hsCustomGalleryGroupChecker > 0){
jQuery('.' + hsCustomGalleryGroupClass).each(function(i, $item) {
var grpID = $item.id;
jQuery('#' + grpID + ' .gallery-item a').addClass('highslide').each(function() {
this.onclick = function() {
return hs.expand(this, {
slideshowGroup: grpID
});
};
});
});
} else {
jQuery('.gallery-item a').addClass('highslide').each(function() {
this.onclick = function() {
return hs.expand(this, {
// This is the problem if statement
if(hsGroupByWpGallery){
slideshowGroup: this.parentNode.parentNode.parentNode.id
};
});
};
});
};
});
Thanks in advance.

The problem is you are trying to assign a conditional property.. you can't have a if condition inside a object definition like that
jQuery('.gallery-item a').addClass('highslide').each(function () {
this.onclick = function () {
var obj = {};
//assign the property only if the condition is tru
if (hsGroupByWpGallery) {
obj.slideshowGroup = this.parentNode.parentNode.parentNode.id;
}
return hs.expand(this, obj);
};
});
Another way to do the same is
jQuery('.gallery-item a').addClass('highslide').each(function () {
this.onclick = function () {
//if the flag is true sent an object with the property else an empty object
return hs.expand(this, hsGroupByWpGallery ? {
slideshowGroup: this.parentNode.parentNode.parentNode.id
} : {});
};
});

I think you might want this, based on the other code:
jQuery('.gallery-item a').addClass('highslide').each(function() {
this.onclick = function() {
if(hsGroupByWpGallery){
return hs.expand(this, {
slideshowGroup: this.parentNode.parentNode.parentNode.id
});
}
};
});

Why can I not access global variables in my js function?

I am trying to set up a set of global variables in my js app script that allows me to access them throughout my functions in the page and the site. For some reason I keep getting undefined in my console even though I know the objects are there.
This is my js snippet the js is quite long so I thought I would show you the important bit thats wrong(i think)
(function ($) {
"use strict";
var global = function() {
this.init();
};
global.prototype = {
// ------------------------------------
// Global variables
mainContainer : 'div#container',
tmbContainer : '.rsThumbsContainer',
tmbContainerT : '.rsThumbsContainer',
slider : '.collection #gallery-t-group',
body : 'body',
close : '<div class="close-button" id="close"><p class="icon-close"></p></div>',
socials : '.socialbar-vertical',
loader : '<div class="loader"></div>',
gallery : '.collection #gallery-t-group',
// ------------------------------------
// Initialise
init: function() {
var app = this;
this.testGlobals();
this.loadSlide();
this.fakingIt();
this.unloadSlide();
this.mobileNav();
this.loadThumbs();
this.royalSlider();
this.thumbsSwitch();
this.functionResize();
this.theSocialActivated();
this.theSliderActivated();
this.theSliderDeactivated();
this.slideEventChange();
console.log('======> new.global.js');
},
// ------------------------------------
// Functions
testGlobals: function () {
console.log(body);
}
}
$(document).ready(function () {
new global();
});
})(jQuery);
In my console I get
Uncaught ReferenceError: body is not defined
Is there a simple thing I am missing here.

Try replacing
testGlobals: function () {
console.log(body);
}
with
testGlobals: function () {
console.log(this.body);
}
or
testGlobals: function () {
console.log(global.body);
}

Calling Javascript Functions by name

If I have an element on the page like this ...
<span data-function="DoSomething">Click</span>
... and i put this in my page header ...
$(document).ready(function()
{
$('[data-function]').each(function()
{
var fName = $(this).attr('data-function');
$(this).click(fName);
});
});
... what goes in place of the comment produce the desired effect of executing the function called "DoSomething".
Note:
I no the code above wont work, my question is how to make this work (translate 'DoSomething' in to DoSomething();)
Any ideas guys?

The functions should be available. Try putting them in an Object, like this:
$(document).ready(function()
{
var fns = {
DoSomething: function() {/* ... */},
DoAnotherthing: function() {/* ... */}
};
$('[data-function]').each(function()
{
var fName = $(this).attr('data-function');
$(this).click(fns[fName]);
});
});
Here's a jsfiddle, demonstrating a way to keep everything local to one namespace and assigning handlers based on the data attribute of elements.

Try calling function with window object -
$(document).ready(function() {
$('[data-function]').each(function() {
var fName = $(this).attr('data-function');
if (typeof (window[fName]) === "function") {
$(this).click(window[fName]);
}
});
}

You can use something like
$(this).click(window[fName]);
Where window would be replaced by the appropriate expression if the function DoSomething is not defined in the global scope.

Maybe a little bit clean way:
http://jsfiddle.net/whsPG/
var myfuncs = {
alert : function() {
alert("An Alert");
},
changeName: function(obj) {
$(obj).text('Other Text');
}
};
$('[data-function]').on('click', function()
{
value = $(this).data('function');
if (myfuncs.hasOwnProperty(value)) {
myfuncs[value](this);
}
});
​

how to call a jquery / java script variable acuretly

i have #cross_1 , #cross_2 , #cross_3 , #cross_4
and every #cross_id have each #id_green
not showing any result nor any error...
var setId = 2;
var defaultTime = 3000;
$(document).ready(function () {
setLight(setId,defaultTime);
});
function setLight(setId,defaultTime) {
//deactivateAll();
activeGreen(setId,defaultTime);
}
function deactivateAll() {
$('#cross_1 #id_red').addClass('red');
$('#cross_2 #id_red').addClass('red');
$('#cross_3 #id_red').addClass('red');
$('#cross_4 #id_red').addClass('red');
}
function activeGreen(setId,defaultTime) {
alert('#cross_'+setId+ '#id_green');
$('#cross_'+setId+ '#id_green').addClass('green');
}
function activeYellow() {
//$('#cross_'+setId+ ',#id_yellow').addClass('yellow');
}

put a comma between each selector
$('#cross_'+setId+ ',#id_green').addClass('green');

I think its just your space in the jQuery selector that is in the wrong place
function activeGreen(setId,defaultTime) {
$('#cross_'+setId+' #id_green').addClass('green');
}
If your structure is:
#cross_1
#id_green
#cross_2
#id_green
And so on, which is invalid html as mentioned by others