We Keep Coding

Clear html spaces in jQuery

I am beginner webdeveloper.
I have this function:
function showRalColors() {
const getHex = ral => rals[ral];
$(".ral").each(function () {
var color = $(this).data("id");
$(this).css('background-color', getHex(color));
});
$("div.material-thumb.mini-specialColorDiv.ral").each(function () {
var color = $(this).html();
if (color != undefined) {
console.log(1);
$(this).css('background-color', getHex(color));
$(this).html(' ' + color);
}
});
}
This function work fine. The problem is with " ". Always when I run this function, I have additional " " (5x nbsp). I need MAX 5
How can I repair it?
Please help me?

Actually the codes you are using is generating spaces itself so simply remove and use like below:
$(this).html(color);
and for sapcing use
$(this).css('padding-left', '5px');

show() and toggle() not working as expected

b1 hides the image while b2 doesn't show it. Also the toggle function does not work? What is wrong in my code?
$(document).ready(function() {
$(".b1").click(function() {
$("img").hide();
});
$(".b2").click(function() {
$("img").show();
});
});

Without the code it is impossible to give the right answer . If I assume that everything is good with the HTML and CSS , I would do something like this :
$(document).ready(function() {
var imgOne = $(".b1");
var imageTwo = $(".b2");
var imgClass = $(".img-class");
imgOne.on("click",function() {
imgClass.hide();
});
imageTwo.on("click",function() {
imgClass.show();
});
});
You can also add console.log('pass') when you click to see if the functions are even doing something . Like this :
$(document).ready(function() {
var imgOne = $(".b1");
var imageTwo = $(".b2");
var imgClass = $(".img-class");
imgOne.on("click",function() {
console.log('pass hide');
imgClass.hide();
});
imageTwo.on("click",function() {
console.log('pass show');
imgClass.show();
});
});
You should see these prints in the console if everything works ok .
Try it out . Hope this helps :)

unexpected token < in js

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>

Get value of asp.net CheckBox via jquery

I'm trying to load up a hidden field with a list of values from all checkboxes that are checked. Everything works fine except that the is(':checked') always returns false. Any ideas?
$('.invCheckBox').click(function () {
var cb = '';
var i = 0;
debugger;
$(".invCheckBox").each(function (index, element) {
debugger;
if ($(element).is(':checked')) {
alert($(element).attr('invNbr'));
if (i == 0) {
cb = $(element).attr('invNbr')
}
else {
cb = cb + ',' + $(element).attr('invNbr');
};
i = i + 1;
};
});
$('MainContent_txtHiddenField').text(cb);
});

Here is a fiddle for you might help :) http://jsfiddle.net/sAyfw/
$('.invCheckBox').change(function () {
$('.invCheckBox').each(function()
{
alert($(this).is(':checked'));
});
});

For whatever reason creating a CheckBox control server-side wraps the input tag in a span tag. Weird. So, I changed the code to create an HtmlInputCheckBox instead and now the jQuery works beautifully.
Dim divCheckBox As New HtmlGenericControl("div")
divCheckBox.Attributes.Add("style", "width: 95px; float: left;")
Dim chkCheckBox As New HtmlInputCheckBox
chkCheckBox.Attributes.Add("class", "invCheckBox")
chkCheckBox.Attributes.Add("invNbr", invoice.InvoiceNbr)
divCheckBox.Controls.Add(chkCheckBox)
divInvRow.Controls.Add(divCheckBox)

Thanks for the info about asp:CheckBox being wrapped in a span. My jQuery was always returning false, and I couldn't figure out why it was not working.
I used this:
console.log($(this).children(1).is(':checked'));
and that works perfectly with an asp:CheckBox.

Javascript/jQuery, if and else statements both being executed

I'm not too sure what's going on here and feel I may be missing something that is probably quite obvious, but I have an if else in which both statements are being called. If someone could shed some light on this that would be great. The code below is using asual and should be detecting whether or not a div $('#' + $.address.hash() has already been loaded. However both if and else events are being fired in order. In fact the else statement fires twice...
$('#lmit_back').show(400, function() {
if($('#' + $.address.hash() ).length == 0) {
$('#init').load('inithandler.php', { 'address' : $.address.hash() }, function() {
$('#' + $.address.hash()).fadeIn(1000, function() {
$('#remn').load('pagehandler.php',{ 'address' : $.address.hash() });
});
});
}
else {
alert('hey');
}
});
Here is all the code..I can't really work out what could cause it to execute twice, unless it has something to do with address.change which im not as familiar with as I would like to be.
if (($.address.hash() == '')) {$.address.hash('home');}
$('#lmit_back').click(function() {
$.address.hash('home');
});
$.address.change( function() {
if (!($.address.hash() == 'home'))
{
var exception = '.' + $('[href="#' + $.address.hash() + '"]').parent().attr('class');
$('#left_menu_bar li:not(' + exception + ')').hide(300,function() {
$(exception).show( function() {
$('#left_menu_bar').animate({ width:'100%'},400, function() {
$('#lmit_back').show(400, function() {
if ($('#' + $.address.hash() ).length === 0)
{
$('#init').load('inithandler.php', { 'address' : $.address.hash() } , function() {
$('#' + $.address.hash()).fadeIn(1000, function() {
$('#remn').load('pagehandler.php',{ 'address' : $.address.hash() });
});
});
}
else
{
alert('nigs');
}
});
});
});
});
}
else
{
$('#left_menu_bar').animate({ width:'251px'}, function() {
$('#left_menu_bar li').show( function() {
$('#lmit_back').hide();
});
});
$('#left_menu_bar').css('width','251px');
}
});

The problem here is not arising from the code you have pasted. The only way the code could be running multiple times and hitting multiple branches is if it is being executed more than once. Look to the surrounding code for places where this could be called more than once.

I faced similar issue, while debugging when if condition was true it also went in else block. Later I added alert and console.log in if/else block's & realized, else was not actually being executed but while debugging it looked like it was in else.
So, whoever faces same issue verify by adding alert or console.log.

I was seeing the same behavior, when I debugged step by step it worked. It ended up being that I was attaching multiple click events so the code fired n times.