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.

Getting null value on the querySelector

I try to copy paste the code from Mozilla's getting started with Javascript tutorial
var myImage = document.querySelector('img');
myImage.onclick = function() {
var mySrc = myImage.getAttribute('src');
if(mySrc === 'images/firefox-icon.png') {
myImage.setAttribute ('src','images/firefox2.png');
} else {
myImage.setAttribute ('src','images/firefox-icon.png');
}
}
I am getting an error "Cannot set property 'onclick' of null". How can correct the code?
I am just getting started with javascript. please forgive me if it is a silly mistake from my part.

You might be trying to assign the click handler before the element has been rendered so the query selector will not find the img tag. Try executing your script after the page has rendered like so
window.onload = function () {
var myImage = document.querySelector('img');
myImage.onclick = function() {
var mySrc = myImage.getAttribute('src');
if(mySrc === 'images/firefox-icon.png') {
myImage.setAttribute ('src','images/firefox2.png');
} else {
myImage.setAttribute ('src','images/firefox-icon.png');
}
}
}

Making bootstrap-tags responsive, jquery events lost

I am trying to change this demo:
http://maxwells.github.io/bootstrap-tags.html
into a responsive version in which I can set it to readOnly and remove it from readOnly as I like. This code:
var alltags = ["new tag", "testtag", "tets", "wawa", "wtf", "wtf2"];
$(document).ready(function() {
var tagbox = $('#my-tag-list').tags({
suggestions: alltags
});
var tagenable = true;
$('#my-tag-list').focusout(function() {
if (tagenable) {
tagbox.readOnly = true;
$('#my-tag-list').empty();
tagbox.init();
tagenable = false;
}
});
$('#my-tag-list').click(function() {
if(!tagenable) {
tagbox.readOnly = false;
$('#my-tag-list').empty();
tagbox.init();
tagenable = true;
}
});
});
seems to work fairly well, it makes everything readonly after focusout and editable when I click it. However, the editing does not work since I cannot insert new tags nor delete them (seems to be like event handling was lost or something like that).
I am guessing that emptying the #my-tag-list div is causing this, but I cannot yet find a way to use for instance "detach" instead that removes everything inside (not the element itself) and putting it back in again.
I tried to make a JS Fiddle, but it isn't really working so well yet:
http://jsfiddle.net/tomzooi/cLxz0L06/
The thing that does work is a save of the entire website, which is here:
https://www.dropbox.com/sh/ldbfqjol3pppu2k/AABhuJA4A6j9XTxUKBEzoH6za?dl=0
this link has the unminimized JS of the bootstrap-tags stuff I am using:
https://github.com/maxwells/bootstrap-tags/blob/master/dist/js/bootstrap-tags.js

So far I managed to do this with some modifications of the bootstrap javascript code. I use two different tagbox which I hide and unhide with some click events.
var tagbox = $('#my-tag-list').tags({
suggestions: alltags,
tagData: tmp_tags,
afterAddingTag: function(tag) { tagboxro.addTag(tag); },
afterDeletingTag: function(tag) {tagboxro.removeTag(tag); }
});
var tagboxro = $('#my-tag-listro').tags({
suggestions: alltags,
tagData: tmp_tags,
readOnly: 'true',
tagSize: 'sm',
tagClass: 'btn-info pull-right'
});
$(document).mouseup(function (e) {
var container = $("#my-tag-list");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) { // ... nor a descendant of the container
if (tagsave) {
$("#my-tag-listro").show();
$("#my-tag-list").hide();
var tags = tagbox.getTags();
$.post("%basedir%/save.php", {
editorID:"new_tags",
tags:tags
}, function(data,status){
//alert("Data: " + data + "\nStatus: " + status);
});
tagsave = false;
}
}
});
$('#my-tag-listro').click(function() {
tagsave = true;
//$(".tag-list").toggle();
$("#my-tag-list").show();
$("#my-tag-listro").hide();
});
I had to modify the code of bootstrap-tags.js to allow for this since it normally deletes all of the usefull functions when it is considered readonly in the init function:
if (this.readOnly) {
this.renderReadOnly();
this.removeTag = function(tag) {
if (_this.tagsArray.indexOf(tag) > -1) {
_this.tagsArray.splice(_this.tagsArray.indexOf(tag), 1);
_this.renderReadOnly();
}
return _this;
};
this.removeTagClicked = function() {};
this.removeLastTag = function() {};
this.addTag = function(tag) {
_this.tagsArray.push(tag);
_this.renderReadOnly();
return _this;
};
this.addTagWithContent = function() {};
this.renameTag = function() {};
return this.setPopover = function() {};
}
would be awesome if this feature was incorporated in a somewhat less hacky way though :)

GetElementbyID fails to fire

From my reading here I would expect this code to work, but it doesn't. I have tried two ways to add click events to a button called "lonext". Neither work. I'm not sure why this might be?
window.onload = function() {
var goSC = function() { //go to the sucess criteria section
document.getElementsByClassName("guidance1").style.display = "none";
document.getElementsByClassName("guidance2").style.display = "";
alert("button clicked");
//first try
document.getElementById("lonext").addEventListener("click", function() {
goSC();
}, false);
//second try
document.getElementById("lonext").onclick = goSC;
}

The getElementsByClassName returns an NodeList because you could have many elements in your DOM with the same class, not a single element.
So:
var goSC = function() {
var guidance1 = document.getElementsByClassName("guidance1");
for (var i = 0; i < guidance1.length; i++) {
guidance[i].style.display = "none";
}
var guidance2 = document.getElementsByClassName("guidance2");
for (var i = 0; i < guidance2.length; i++) {
guidance[i].style.display = "";
}
alert("button clicked");
});
window.onload = function() {
document.getElementById("lonext").onclick = goSC;
};
which if you used jQuery could be simplified to:
$(function() {
$('#lonext').click(function() {
$('.guidance1').hide();
$('.guidance2').show();
});
});
I would also strongly recommend you using a javascript debugging tool such as FireBug or Chrome Developer toolbar to inspect your javascript code and see potential errors with it. The Console tab will contain valuable information about possible errors in your javascript code.

Undefined property of variable in jquery

What is the proper way to make this code work?
$(function(){
var base = {
$wrapper: $('.homepage_main'),
$main: base.$wrapper.find('#primary').find('.home_slides').closest('[data-id="Colleague"]'),
$panel: base.$wrapper.find('#sidebar').find('.home_slides').closest('[data-id="Colleague"]'),
Template: {
$img: function () { return $('img'); }
},
Modal: {
$modalInterrupt: $('#searching_interruption'),
Suggestion: {
$self: $('#suggested_colleague'),
$loading: base.Modal.Suggestion.$self.find('.gif_loading'),
$paging: base.Modal.Suggestion.$self.find('.pagination'),
$itemContainer: base.Modal.Suggestion.$self.find('.request_items'),
$itemClone: base.Modal.Suggestion.$itemContainer.find('[data-id="Clonable"]').clone().removeAttr('data-id').removeClass('hide'),
$lblCount: base.Modal.Suggestion.$self.find('[data-id="SuggestCount"]'),
$listItems: function () {
return base.Modal.Suggestion.$itemContainer.find('.coll_panel_content:not([data-id="Clonable"])');
}
}
}
};
});
I'm getting Uncaught TypeError: Cannot read property '$wrapper' of undefined when you look at Google Chrome console.
Some fiddle
I tried pulling out the $wrapper and now I get new error:
Uncaught TypeError: Cannot read property 'Modal' of undefined
Another fiddle sample
I made this approach because it is more easy to manage. For example, if I have changed some class name or id on my html page, I just have to modify 1 specific variable in my jquery code and everything will be fine again. If you know a better approach, kindly share it to me.

You can't use the variable you're defining while you're defining it. So a shorter example would be:
var hi = "hi" + hi.length;
Because the variable isn't completely defined yet.
To make your code work, define the variables you need beforehand:
$(function(){
var $wrapper = $('.homepage_main'),
$modalSelf = $('#suggested_colleague'),
$itemContainer = $modalSelf.find('.request_items');
var base = {
$main: $wrapper.find('#primary').find('.home_slides').closest('[data-id="Colleague"]'),
$panel: $wrapper.find('#sidebar').find('.home_slides').closest('[data-id="Colleague"]'),
Template: {
$img: function () { return $('img'); }
},
Modal: {
$modalInterrupt: $('#searching_interruption'),
Suggestion: {
$loading: $modalSelf.find('.gif_loading'),
$paging: $modalSelf.find('.pagination'),
$itemClone: $itemContainer.find('[data-id="Clonable"]').clone().removeAttr('data-id').removeClass('hide'),
$lblCount: $modalSelf.find('[data-id="SuggestCount"]'),
$listItems: function () {
return $itemContainer.find('.coll_panel_content:not([data-id="Clonable"])');
}
}
}
};
});