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.
Related
I have a script that works fine until I add another script. When the other script is added I get the console error.
Uncaught TypeError: Cannot read property 'on' of null at mapForm
I'm integrating my own script with JotForm so I have a couple libraries loading. I tried to set a no conflict without luck.
https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js
function mapForm() {
var JotFirst = document.getElementById("first_4"),
ACFirst = document.getElementById("firstname");
JotFirst.addEventListener('input', function() {
ACFirst.value = JotFirst.value;
});
var JotLast = document.getElementById("last_4"),
ACLast = document.getElementById("lastname");
JotLast.addEventListener('input', function() {
ACLast.value = JotLast.value;
});
JotProd = $("input[type='checkbox'][id='input_5_1000']");
ACProd = $("input[type='checkbox'][id='extra_mf_1_515']");
JotProd.on("change", function() {
ACProd.prop("checked", this.checked);
});
$("#input_5_custom_1000_0").change(function() {
var el = $(this) ;
if(el.val() === "Option Two" ) {
document.getElementById("extra_mf_3_516").selectedIndex = "1";
}
else if(el.val() === "Option Three" ) {
document.getElementById("extra_mf_3_516").selectedIndex = "2";
}
});
}
window.onload = mapForm;
The above code works fine on it's own.
https://cdn.jotfor.ms/static/prototype.forms.js
https://cdn.jotfor.ms/static/jotform.forms.js
When these are introduced my script stops working. I've searched and searched and tried everything I know to solve.
Here's the page in question: https://btwebnetwork.com/scripts/multi-submission-form/AllClients.php
You have to make sure taht the JotProd variable is not NULL, you can do it like this
if(JotProd){
JotProd.on("change", function() {
ACProd.prop("checked", this.checked);
});
}
I was trying to implement a javascript code in my django admin, I have two fields hard_drives(id is: id_hard_drives) and no_of_drives(id is: id_no_of_drives). So, I want no_of_drives to appear only if hard_drives has particular value, like in the example:
<script type="text/javascript">
$("#id_hard_drives").change(function () {
if($("#id_hard_drives").val()=="125"){
document.getElementById("#id_no_of_drives").type=text
} else {
document.getElementById("#id_no_of_drives").type=hidden
}
});
</script>
But, I get an error:
Unexpected token <
Update :
As per GSWV, i have updated the code, but it still used to show same error, so i removed <script> tags. The new code looks something like this :
(function($) {
$(document).ready(function() {
var hardDriveSelector = $("#id_hard_drives");
hardDriveSelector.on("change", function(){
if (hardDriveSelector.val() == "H") {
document.getElementById("id_no_of_drives").type = text;
} else {
document.getElementById("id_no_of_drives").type = hidden;
}
});
});
})(django.jQuery);
But the code is not being implemented on fly, the script dosen't do anything, do i need to use key up or something on id_hard_drives?
I have re-written the code for you. Hope this helps! :)
$(document).ready(function() {
$('#id_no_of_drives').hide();
$("#id_hard_drives").change(function() {
var driveID = $(this).val();
if (driveID == '125') {
$('#id_no_of_drives').show();
} else {
$('#id_no_of_drives').hide();
}
});
});
Below is your fixed code
1) $("#id_hard_drives") - no dot before #id_hard_drives
2) document.getElementById('id_no_of_drives') - no # before id_no_of_drives
<script type="text/javascript">
$("#id_hard_drives").change(function() {
if ($("#id_hard_drives").val() === '125') {
document.getElementById('id_no_of_drives').type = text;
} else {
document.getElementById('id_no_of_drives').type = hidden;
}
});
</script>
So I'm trying to implement this on my website – https://github.com/browserstate/ajaxify
Works fine on most pages, but there are two pages that rely on two simple scripts. The first one is
jQuery(function() {
var adjustArticleHeights = (function () {
var leftColumnHeight = 0,
rightColumnHeight = 0,
$articles = jQuery('.shop-item');
for (var i = 0; i < $articles.length; i++) {
if (leftColumnHeight > rightColumnHeight) {
rightColumnHeight += $articles.eq(i).addClass('right').outerHeight(true);
} else {
leftColumnHeight += $articles.eq(i).outerHeight(true);
}
}
return $articles;
})();
});
But the weird thing is, if I'm on another page. Then go to this page, the script doesn't work. Then if I refresh the page, the script does work.
The second script below, it doesn't fire at all. No matter how many times I refresh
function() {
jQuery('.image-caption').hide();
jQuery('.image-hover ').hover( function() {
jQuery(this).find('.image-caption').fadeIn(300);
}, function() {
jQuery(this).find('.image-caption').fadeOut(300);
});
};
I also now get an error "Uncaught SyntaxError: Unexpected token {" on line 1.
Just call it.
try
function() {
jQuery('.image-caption').hide();
jQuery('.image-hover ').hover( function() {
jQuery(this).find('.image-caption').fadeIn(300);
}, function() {
jQuery(this).find('.image-caption').fadeOut(300);
});
}();
note "()"
This question already has answers here:
'console' is undefined error for Internet Explorer
(21 answers)
Closed 8 years ago.
Hi i found the problem in other stackoverflow questions , the problem is i have tried all solutions that should work, but i think im not understanding where and how to implement that fixes..
My problem is console.log in internet explorer throws an error as undefined. I search and found
Console undefined issue in IE8
Internet Explorer: "console is not defined" Error
I try to wrap the code inside the function using a condition like 'if(window.console) '
this dosent work i even try most of the recommended contitions no one work, try to insert the snnipet in the code so it worked, but it dont..
Im obviously not understanding how and where to put does fixes. Sorry for my ignorance. but im in a hurry, need to someone points at my stupidity
Thanks
var jcount = 0;
var scroll_count = 0;
var playflag=1;
var ajxcallimiter=0;
var hp_totalcount=parseInt($("#hp_totalcount").val());
if(hp_totalcount<5)
hp_totalcount=5;
function hlist_slider()
{
if($(".items img").eq(jcount).length != 0 && playflag==1){
firedstyle();
console.log(jcount);
$(".items img").eq(jcount).trigger("mouseover");
if(jcount % 5 === 0 && jcount!=0)
{
console.log('scroll');
api.next();
scroll_count++;
}
jcount++; // add to the counter
if(jcount>hp_totalcount)
{
if(playflag==1)
{
jcount = 0; //reset counter
while(scroll_count--)
{
api.prev();
}scroll_count=1;
}
}
}
else if(jcount<hp_totalcount && playflag==1)
{
playflag=0;homepagelist_nextclick();playflag=1;
}
else
{
if(playflag==1)
{
jcount = 0; //reset counter
while(scroll_count--)
{
api.prev();
}
scroll_count=1;
}
}
}
$(function() {
var root = $(".scrollable").scrollable({circular: false}).autoscroll({ autoplay: true });
hlist_slider();
setInterval(hlist_slider,10000);
// provide scrollable API for the action buttons
window.api = root.data("scrollable");
});
function firedstyle()
{
$(".items img").on("hover",function() {
// see if same thumb is being clicked
if ($(this).hasClass("active")) { return; }
// calclulate large image's URL based on the thumbnail URL (flickr specific)
var url = $(this).attr("src").replace("t_", "");
var tbtit = $(this).siblings('.tbtit').text();
var tbdesc = $(this).siblings('.tbdescp').text();
var tbtitgoto = $(this).attr("data");
// get handle to element that wraps the image and make it semi-transparent
var wrap = $("#image_wrap").stop(true, true).fadeTo("medium", 0.5);
// the large image from www.flickr.com
var img = new Image();
// call this function after it's loaded
img.onload = function() {
// make wrapper fully visible
wrap.fadeTo("fast", 1);
// change the image
wrap.find("img").attr("src", url);
wrap.find(".img-info h4").text(tbtit);
wrap.find(".img-info p").text( tbdesc);
wrap.find("a").attr("href", tbtitgoto);
};
// begin loading the image from www.flickr.com
img.src = url;
// activate item
$(".items img").removeClass("active");
$(this).addClass("active");
// when page loads simulate a "click" on the first image
}).filter(":first").trigger("mouseover");
}
function toggle(el){
if(el.className!="play")
{
playflag=0;
el.className="play";
el.src='images/play.png';
//api.pause();
}
else if(el.className=="play")
{
playflag=1;
el.className="pause";
el.src='images/pause.png';
// api.play();
}
return false;
}
function hp_nxtclick()
{
homepagelist_nextclick();
console.log('scroll');
if(api.next()){
scroll_count++;}
}
function homepagelist_nextclick()
{
var hp_totalcount=parseInt($("#hp_totalcount").val());
var hp_count=parseInt($("#hp_count").val());
if(hp_totalcount==0 || hp_count >=hp_totalcount)
return ;
if(ajxcallimiter==1)
return;
else
ajxcallimiter=1;
$.ajax(
{
type: "GET",
url: "<?php echo $makeurl."index/homepageslide/";?>"+hp_count,
success: function(msg)
{
hp_count=parseInt($("#hp_count").val())+parseInt(5);
$("#hp_count").val(hp_count);
$("#hp_list").append(msg);ajxcallimiter=0;
}
});
}
The problem is that the console (developer tool panel) needs to be active on page-load*.
Hit F12, reload your page, and you should get what you're looking for.
*Just to clarify: The developer panel needs to be open prior to window.console being called/tested. I'm assuming your code is being run on-load.
This should work:
if(!window.console || !window.console.log) window.console = {log: function(){}};
This way you will be able to use console.log without producing errors.
In my code, I put this snippet at the top - before any other javascript that might try to use the console loads:
if (window.console == null) {
window.console = {
log: function() {},
warn: function() {},
info: function() {},
error: function() {}
};
}
Or in coffeescript:
if not window.console?
window.console = {
log: () ->
warn: () ->
info: () ->
error: () ->
}
This provides a dummy console for browsers that don't include one.
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"])');
}
}
}
};
});