Clear html spaces in jQuery - javascript

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');

Related

jQuery onload replace specific text

$(document).ready(function() {
var text = $(".name")
return $(this).text().replace("★", " ★");
});
This is what I have right now but doesn't seem to work idk why?
I used to have code that did work just only in chrome console.
$(".name").text(function() {
return $(this).text().replace("★", " ★");
});
I think this is more what you're looking for:
$(document).ready(function() {
$(".name").text(function(i, text) {
return text.replace("★", " ★");
});
});

Papa.parse repeating csv parsing in jquery

Hi guys I've got a problem with parsing csv files in javascript. The following code is only used on load the HTML Page but I don't know why. Does somebody have got an idea?
Many thanks in advance!
<script>
$(function test() {
Papa.parse("lockedDevices.csv", {
download: true,
complete: function(results) {
console.log("Remote file parsed!", results.data);
$.each(results.data, function(i, el) {
var row = $("<tr/>");
if(el[0] == "Status")
var color =" bgcolor='lightgrey'>"
if(el[0] == "Free"&&el[4]==" "&&el[5]==" ")
var color = " bgcolor='lightgreen'>";
if(el[0] == "Locked")
var color = " bgcolor='red'>";
if(el[0] == 'Free' && el[5]!=' ')
var color = " bgcolor='yellow'>";
$.each(el, function(j, cell) {
if (cell !== ""){
row.append($('<td'+ color).text(cell));
}
});
$("#lockedDevicesBox tbody").append(row);
});
}
});
})
setInterval(test(),1000);
</script>
You have assigned a named function to doc ready block and you are also trying to call run it in setInterval.
Instead i would say you put the function in the global scope and call it in doc ready within setInterval:
function test(){
// test code
}
$(function(){
setInterval(test, 1000);
});

Repeatable block functionlaity

I am trying to develop functionality for repeatable blocks within my web form, the issue being the buttons do nothing when I click them I have tested them in the console and they do work, they just dont do anything and am unsure why, been working on this for 2 days and am at a standstill, anyone who can point me in the right direction would be much appreciated.
It should generate the fields contained within that field set and generate a identical empty field set, and not sure whats wrong with the plus or minus functions.
$('input, fieldset').each(function(){
if ($(this).attr('data-maxOccurs') != 1){
$(plusMinusButtons).insertAfter(this);
}
});
$('.glyphicon-plus-sign').hover(function(){
$(this).addClass('green');
},
function(){
$(this).removeClass('green');
}
);
$('.glyphicon-minus-sign').hover(function(){
$(this).addClass('red');
},
function(){
$(this).removeClass('red');
}
);
$('body').on("click", '.glyphicon-plus-sign', function (){
prevInput = $(this).prev('input');
count = $(prevInput).attr('data-count');
countIncremented = count++;
br = '<br/><br/>';
inputElement = '<input type="'+$(prevInput).attr("type")+'" name="'+$(prevInput).attr("name")+countIncremented+'" data-count="'+countIncremented+'"/>';
$(br + inputElement + plusMinusButtons).insertAfter('.'+$(prevInput).attr("name")+':last');
}
);
$('body').on("click", '.glyphicon-minus-sign', function (){
prevInput = $(this).prev('input');
$(this).remove(prevInput).remove(this);
}
);
$("button").click(function(){
console.log("here");
x=$('#form').serializeArray();
$.each(x, function(i, field){
console.log(field.name + ":" + field.value + " ");
});
});
});
And here is the JSfiddle: Fiddle
The code Used in order to duplicate the field set.
$('body').on("click ", '.glyphicon-plus-sign', function() {
console.log("here ");
prevInput = $(this);
count = $(prevInput).attr('data-count=')||0;
countIncremented = count++;
br = '<br/><br/>';
$($(this).parent()).clone().insertAfter($(this).parent());

How do I run a function from a variable?

I'm trying to run a function from a variable I've defined although it's not working.
Here is an example of what I mean:
$(document).ready(function(){
function red () {
alert("You chose the color red");
}
function blue () {
alert("You chose the color blue");
}
$(window).resize(function() {
var colorvalue = "blue" + "();";
return colorvalue
});
});
If someone could correct my faulty logic that would be helpful, thanks.
SOLVED! FULL SOLUTION HERE
function red () {
alert("You chose the color red");
}
function blue () {
alert("You chose the color blue");
}
$(document).ready(function(){
$(window).resize(function() {
var colorvalue = "blue";
var callable = window[colourvalue];
callable();
});
});
The following code will work absolutely
$(window).resize(function() {
var callable = window["blue"];
callable();
});
Try it
Try this:
var red = function{ alert("You chose the color red"); };
var blue = function{ alert("You chose the color blue"); };
$(document).ready(function(){
$(window).resize(function() {
var colorvalue = window["blue"];
return colorvalue();
});
});
This way you can evaluate the target function to call without using eval.
you should try
return eval(colorvalue);
Set up an object with your functions as methods. (This avoids multiple globals.)
var colour = {
red: function{ ... },
blue: function{ ... }
}
Then call colour[myOption] where myOption is set to be "blue" or "red" somehow (probably by the user).
Put your function out of you Document ready function. like below
function red() {
alert("You chose the color red");
}
function blue() {
alert("You chose the color blue");
}
$(document).ready(function () {
$(window).resize(function () {
var colorvalue = "blue" + "();";
return eval(colorvalue);
});
});
if you want to use in document ready then use like onclick to particular id : exp: $( "#target" ).click();
REF
Just do:
var colorvalue = blue;
return colorvalue();
Though note that the alert() function doesn't return anything, and your functions aren't even returning anything, so right now your functions will return undefined. Perhaps you meant to define them like:
function blue () {
var msg = "You chose the color blue";
alert(msg);
return msg;
}
you could try:
var red = function(){
// doSomething
}
var blue = function(){
//doSomething
}

how to add a value onto the url using javascript var

Is there a way to add the select-result on the url when the pop up window appears? The select-result gives the value of the boxes selected and i want to pass the values selected gto a form but i am not ussing a form. can i pass the values ussing the url?
i want to add the selected values like form.php?id=2882,222,22412,23
$(function() {
$(".selectable").selectable({
filter: "td.cs",
stop: function() {
var result = $("#select-result").empty();
var result2 = $("#result2");
$('.ui-selecting:gt(31)').removeClass("ui-selecting");
confirmation($(".ui-selected").length + " box selected. " + ($(".ui-selected").length));
function confirmation() {
var answer = confirm($(".ui-selected").length + " box selected. " + ($(".ui-selected").length));
if (answer) {
window.open("form.php", "mywindow", "menubar=no,resizable=no,width=650,height=700");
}
else {}
}
$('#divmsg').html($(".ui-selected").length + " box selected")
$('#divmsg2').html($(".ui-selected").length)
if ($(".ui-selected").length > 90) {
alert("Selection of only 90 boxes allowed");
$('#divmsg').html($('#divmsg').html() + ",<br><b>Message: Selection of only 90 pixels allowed!!</b>");
$(".ui-selected").each(function(i, e) {
if (i > 3) {
$(this).removeClass("ui-selected");
}
});
return;
}
$(".ui-selected", this).each(function() {
var cabbage = this.id + ', ';
result.append(cabbage);
});
var newInputResult = $('#select-result').text();
newInputResult = newInputResult.substring(0, newInputResult.length - 1);
result2.val(newInputResult);
}
});
});​
this is the fiddle http://jsfiddle.net/dw6Hf/57/
i have tried
window.open ("form.php?id="+ select-result, "mywindow",....
but it won't work!! any idea???
Thanks in advance ​
If you're asking what I think you're asking, and selectable does what I think it does, then try this:
window.open("form.php?id=" + $('#select-result').text(), "mywindow", "menubar=no,resizable=no,width=650,height=700");
If that doesn't work, then I've obviously misunderstood your answer. I'd suggest clearing it up, and maybe getting a working example up and running for us to see.
Firstly the fiddle you have posted is broken. But no worries i have fixed it along with the solution at http://jsfiddle.net/paragnair/dw6Hf/61/
I have added the following line:
var selectedIds = $.map($('.ui-selected'),function(a){ return $(a).attr('id');}).join(',');
The above line gets the list of ids for all the elements which have the class ui-selected. Then you can append the variable selectedIds to window.open like so:
window.open("form.php?id=" + selectedIds, "mywindow", "menubar=no,resizable=no,width=650,height=700");

Categories