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

Close link in modal is closing all instances of success message div

This might be a silly question, but hopefully has insight. The closemessage class is an "X" which closes the success message on success of a response, however on click it's closing all of those particular $addOrderResultLabel divs Any ideas? Just want it close one of them on click, not all. Thanks
var addOrderReturnR = function(data) {
if (data['success']) {
$addOrder.addClass('orderAdded');
var successText = $l(3271) + " " + data['order']['order_number'] +
" " + $l(3272) + "." + '<a class="closemessage" href="#"> x</a>';
$addOrderResultLabel.append('<p>'+successText+'</p>').show();
resetAddOrderForm({softReset:true});
$addOrderCreate.removeClass('disabled');
} else {
$addOrderResultLabel.addClass('error');
$addOrderResultLabel.text(data).show();
resetAddOrderForm({softReset:true});
}
$('.closemessage').click(function(e) {
e.preventDefault();
$addOrderResultLabel.empty().hide();
});
};

You can try $(this).parent function like below:
$('.closemessage').click(function(e) {
e.preventDefault();
$(this).parent('p').hide();
});

I think it's enough to edit:
$('.closemessage').click(function(e) {
e.preventDefault();
$(this).closest('p').hide();
});
I hope it works for you!

JQuery not getting included in PhantomJs

I am trying to use jquery with phantomjs. I tried a standalone example and it worked fine. Here is what I did:
var page = require('webpage').create();
page.open("http://www.phantomjs.org", function(status) {
page.onConsoleMessage = function(msg) {
console.log("message recvd: " + msg);
};
var result;
page.includeJs("https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js", function() {
console.log("loading jquery");
});
setTimeout(function() {
page.evaluate(function() {
console.log("$(\"title\").text() -> " + $("title").text());
});
}, 1000);
}
Here is the output I got:
loading jquery
message recvd: $("title").text() -> PhantomJS | PhantomJS
In the above code snippet, I have used setTimeout() on evaluate function because includeJs() would execute asynchronously and need some time to load jquery. If I do not use setTimeout() or use a small value for timeout, it doesn't work.
However, when I try the same code in my application it doesn't work. Here is what I have:
var baseSetup = function(guid, page, config, request, response) {
/* enable the console output inside the callback functions */
page.onConsoleMessage = function (msg) {
console.log(guid + ": console msg: " + msg);
};
/* used for ignoring potential alert messages when evaluating js code */
page.onAlert = function (msg) {
console.log(guid + " (alert): alert msg: " + msg);
};
/* suppress the error messages */
page.onError = function(msg, trace) {
var msgStack = ['ERROR: ' + msg];
if (trace && trace.length) {
msgStack.push('TRACE:');
trace.forEach(function(t) {
msgStack.push(' -> ' +
t.file +
': ' +
t.line +
(t.function ? ' (in function "' + t.function + '")' : ''));
});
}
console.error(guid + ": " + msgStack.join('\n'));
};
}
module.exports = function extractionDriver(responseFromUrl, responseToUser, page, request) {
console.log(page.customHeaders['guid'] + ": extractionDriver, status = " + responseFromUrl.status);
if(page.isLocalFile || responseFromUrl.status !== 0)
{
var viewportStr = page.customHeaders['viewportStr'];
console.log(page.customHeaders['guid'] + ": Setting viewport size: " + viewportStr);
var viewportObj = parseViewport(viewportStr);
page.viewport = viewportObj;
page.evaluate(function(w,h) {
document.body.style.width = w + "px";
document.body.style.height = h + "px";
}, viewportObj.width, viewportObj.height);
page.includeJs("https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js", function() {
console.log("loading jquery");
});
setTimeout(function() {
page.evaluate(function() {
console.log("$(\"title\").text() -> " + $("title").text());
});
}, 1000);
}
And this is what I see when I run my application:
d8db6045-a0e8-11e4-a619-6949593d958d: ERROR: ReferenceError: Can't find variable: $
TRACE:
-> phantomjs://webpage.evaluate(): 3
-> phantomjs://webpage.evaluate(): 4
-> phantomjs://webpage.evaluate(): 4
The log line "loading jquery" is never printed and jquery is never loaded.
I have tried wrapping up the evaluate() function inside the callback of includeJs() but that didn't work either (no console log printed).
What could be going wrong here? Please let me know if I should provide more information.

That is why page.includeJs has a callback, so you can put the code that depends on jQuery in there. The callback is called when the referenced JavaScript is already loaded. Welcome to another level on the road to the callback hell.
I experienced one time though that this didn't work for some reason. The workaround was to set a global variable in the includeJs callback and use waitFor to wait for the global variable to be set outside of the includeJs callback.
var _loadIndicator = false;
page.includeJs("https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js", function() {
_loadIndicator = true;
});
waitFor(function check() {
return _loadIndicator;
}, function onReady() {
page.evaluate(function() {
console.log("$(\"title\").text() -> " + $("title").text());
});
}, 10000);

I just have troubles with this, but my mistake was that, i tried phantom.injectJs, not page.injectJs (jerk). And then, if status is success, put
page.injectJs('lib/jquery.min.js');
and try
page.evaluate(function(){
console.log($("body").length);
});

dynamically disabling/enabling a textbox

I'm having a problem trying to make this code work. The purpose is simply to enable a textbox when the option "Bus" is selected from a DropList.
At the moment I have a for loop running through and disabling all the necessary boxes (there are 15 identical rows). At the same time it is enabling a different function which is based on changing the selection in the same box, which works. Whereas the function in question doesn't work.
Here is the function:
$(function () {
for(var i=0;i<15;i++){ //loop through each of the rows
$("#Select" + i + "Box_C").change(callbackFactory(i)); //This is a working function
$("#Select" + i + "Box_C").change(toBus(i)); //This one isn't working
$("#Text" + i + "Box_Q1").prop('disabled', true); //this one is working
};
function busEnabler(num){
$("#Text" + num + "Box_Q1").prop('disabled', false);
};
function toBus(numm){
var jk = numm //Closures confuse me
if ($("#Select" + numm + "Box").val() === "Bus"){
$("#Text" + numm + "Box_Q1").prop('disabled', false);
console.log(jk);
busEnabler(jk);
}
else {
$("#Text" + numm + "Box_Q1").prop('disabled', true);
console.log($("#Select" + numm + "Box_C") + "=" + $("#Select" + numm + "Box_C").val());
}
};
});
The ID's are made up (the real ones are horribly named - not my choosing) so if there is a typo in the ID's it's irrelevant.
Also as a side note I can't seem to log anything to the console after the page has loaded (using FireBug).
callbackFactory:
function callbackFactory(i){
console.log('changing');
return function(){
transportChange($("#_Q0_Q"+ i +"_Q3_C").val(), i);
};

The problem is in the way you are attaching the onchange events.
The following statement (that you have used) does not attach any method.
$("#Select" + i + "Box_C").change(toBus(i));
So whenever the value of the select box changes, the 'toBus' method is never called.
I have created a Fiddle. Please refer that.
JSFiddle

Use the following code for your purpose and please show the function callbackFactory also, so that I can resolve your complete problem.
$(doucment).on('change', 'select[id^=Select]',function() {
$('input[id^=Text]').prop({disabled:true});
var id = $(this).attr('id');
var txtId = id.replace('Select','Text').replace('Box','Box_Q1');
if($(this).val() == 'Bus') {
$('#'+txtId).prop({disabled:false});
}
});

Using a loop variable inside a function, javascript scoping confusion

I have built a dropdown menu system, everything works when tested independently, the problem I have is in the code below. I use the jQuery ready function to build the menu bar from an external array (menubar[]). Here I am trying to get the mouseover event to call the dropdown() function, but using a different argument for each anchor tag.
So rolling over the first should call dropdown(0), the second dropdown(1) and so on.
$(document).ready(function () {
for (i in menubar) {
var declaration = '<a href="' + baseurl + '/' + menubar[i].url +
'" class="menutitle">' + menubar[i].name + '</a>';
var a = $(declaration).mouseover(function () {
dropdown(i);
}).mouseout(function () {
activeTimer = setTimeout("removedropdowns()", 100);
});
$("#menu").append(a);
}
});
The code is calling dropdown(6); on each rollover. How can I pass the loop variable (i) into the mouseover function as a literal/static value!
I got this working fine in FF by using
.attr('onMouseOver','javascript:dropdown('+i+');')
but that wasn't firing for some versions of IE, so I switched to the jQuery mouseover, which fires, but I have the issue above :(

Your actual problem is that each of your mouseover callbacks uses the same i you increase i all the way up to 6, the callbacks still point to the same i and therefore all use 6 as the value.
You need to make a copy of the value of i, you can do this by using an anonymous function.
$(document).ready(function () {
// you should use (for(var i = 0, l = menubar.length; i < l; i++) here in case menubar is an array
for (var i in menubar) {
var declaration = '<a href="' + baseurl + '/' + menubar[i].url +
'" class="menutitle">' + menubar[i].name + '</a>';
(function(e) { // e is a new local variable for each callback
var a = $(declaration).mouseover(function () {
dropdown(e);
}).mouseout(function () {
activeTimer = setTimeout(removedropdowns, 100); // don't use strings for setTimeout, since that calls eval
});
$("#menu").append(a);
})(i); // pass in the value of i
}
});

$(function() {
$(menubar).each(function(i){
$("#menu").append('' + menubar[i].name + '');
});
$("#menu a").hover(
function(){
dropdown($(this).index());
},
function(){
activeTimer = setTimeout("removedropdowns()", 100);
}
);
});

First, don't use for..in but rather ordinary loop.
Second, I would just append the links first then apply the events later:
$(document).ready(function() {
for (var i = 0; i < menubar.length; i++) {
$("#menu").append('' + menubar[i].name + '');
}
$("#menu a").each(function(index) {
$(this).mouseover(function() { dropdown(index); }).mouseout(function() { activeTimer = setTimeout("removedropdowns()", 100); });
});
});

Have a look here and here.
To capture the current value of i, you need to pass it as a parameter to another function where it can be captured as a local variable:

Try using jQuery's each() function:
jQuery(function() {
jQuery.each(menubar, function(index, element) {
var declaration = '' + element.name + '';
var a = $(declaration).mouseover(function() { dropdown(index); }).mouseout(function() { activeTimer = setTimeout("removedropdowns()", 100); });
$("#menu").append(a);
});
});

In JavaScript, if you don't declare your variable, it is defined globally. To fix this, add "var" in front of your i looping variable like this. UPDATE: As Sime noticed (see comment), you also need to pass the variable into the function, otherwise you form a closure on the i.
$(document).ready(function() {
for(var i in menubar) {
var declaration = '' + menubar[i].name + '';
var a = $(declaration).mouseover(function(i) { dropdown(i); }).mouseout(function() { activeTimer = setTimeout("removedropdowns()", 100); });
$("#menu").append(a);
}
});