Develop Reference

Can not change attribute value with jQuery

I have the following element:
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="VariableDataList[0].VariableDataForLevel[1].Value"></span>
I want to replace the value of data-valmsg-for changing the number before .Value. To do it, I use this function (latestIdNumber and newIdNumber are values that I compute at the beginning of the function, but imagine that latestIdNumber is 1 and newIdNumber is 2):
clone.find("span[data-valmsg-for$='Value']").map(function () {
var reName = '[' + latestIdNumber + '].Value';
$(this).attr('data-valmsg-for').replace(reName, '[' + newIdNumber + '].Value');
});
reName value is [1].Value. And I want to replace this text in data-valmsg-for with [2].Value. After that, I will have in data-valmsg-for the value data-valmsg-for="VariableDataList[0].VariableDataForLevel[2].Value.
I have debugged it with Visual Studio and it stops inside the find but the value of the attribute doesn't change.
I know that the attribute value doesn't change because I have opened the Internet Explorer Debugger and I don't see the new value.
I have tried the same, changing id and name for input fields and replace functions works perfectly.
How can I replace the value for that attribute?

Firstly, you should use each() to iterate through a collection of elements. map() is intended to create an array from that collection, although in this case it's not required either if you use attr() correctly.
The issue with your code is because you're not calling the setter of attr(). Instead you get the value, preform the replacement but do nothing with the result.
To fix this you can provide a function to the attr() method which performs the logic on each instance of the elements in the collection. Try this:
var latestIdNumber = '1';
var newIdNumber = '999';
var reName = '[' + latestIdNumber + '].Value';
$("span[data-valmsg-for$='Value']").attr('data-valmsg-for', function(i, v) {
return v.replace(reName, '[' + newIdNumber + '].Value');
});
// to show it worked:
$("span[data-valmsg-for$='Value']").each(function() {
console.log($(this).attr('data-valmsg-for'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="VariableDataList[0].VariableDataForLevel[1].Value">Foo</span>
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="VariableDataList[0].VariableDataForLevel[1].Value">Bar</span>
Also note that you should really use the data() method to work with data-* attributes. The caveat here is that data() does not update the DOM, so if you require that behaviour then you would need to continue to use attr() as you are.

0.id is null or not an object, parentElement of the parentElement and IE 8

I am using the following 3 lines of code in my web app.
selected_build = event.currentTarget.parentElement.parentElement.id;
var jselect = $( "#" + selected_build + " .roomc" ).children(".room");
selected_room = jselect[0].id;
This works in most browsers but in IE 8 I get the error
'0.id' is null or not an object
which points to the third line of code. I assume this has something to do with parentElement only working on Elements, but I can't seem to figure it out.

I assume this has something to do with parentElement only working on Elements...
If IE8 doesn't have parentElement, since by definition you're dealing with an element as of event.currentTarget, you can safely use parentNode instead.
But as you're using jQuery anyway, why not...use jQuery?
selected_build = $(event.currentTarget).parent().parent().attr("id");
if (selected_build) {
var jselect = $("#" + selected_build + " .roomc").children(".room");
selected_room = jselect.attr("id");
if (selected_room) {
// ... use it
}
}
Note that I'm using .attr("id") to get the id. That's because if the jQuery set is empty, .attr("id") gives you undefined, whereas [0].id gives you an error.
And actually — you don't need to use ids at all here other than at the end for selected_room:
selected_room =
$(event.currentTarget)
.parent().parent()
.find(".roomc > .room")
.attr("id");
if (selected_room) {
// ... use it
}
...and I bet there's a way to hook up the event so we can avoid that .parent().parent(), too, which is fragile. But without seeing the structure, it's impossible to suggest something.

Google Chrome not letting me use setAttribute for ID's

I've got some JS code here. Basically, I am trying to change the ID of an element to some value from a previous variable.
Here's what I got so far;
function() {
var colorarray = [ "RANDOMCOLOR_0", "RANDOMCOLOR_1", "RANDOMCOLOR_2" ];
var RANcolorarray = colorarray[Math.rsound(Math.random() * (colorarray.length - 1))];
document.getElementsByClassName('RANDOMCOLOR').setAttribute('id', RANcolorarray);
}
This code throws an error in Chrome for line 4: Uncaught TypeError: undefined is not a function which is weird because JsLint finds no errors.
I also tried using the other way to setting id's;
document.getElementsByClassName('RANDOMCOLOR').id = RANcolorarray;
However, although this method does not throw an error on chrome or jslint - it does not work at all after inspecting the element.. :/
Any ideas?

document.getElementsByClassName('RANDOMCOLOR') returns a list of DOM nodes (even if there's only one match) so you can't just call .setAttribute() on the list as the list doesn't have that method.
You can either get the first item out of the list and call .setAttribute() on that one or use a for loop to iterate through the list and call it on all of them. Of course, since you're setting the id, you should not be setting multiple elements to the same id, so I'll assume you just want one element:
document.getElementsByClassName('RANDOMCOLOR')[0].id = RANcolorarray;
Or, a little more safe:
var elems = document.getElementsByClassName('RANDOMCOLOR');
if (elems && elems.length) {
elems[0].id = RANcolorarray;
}

jQuery - console.log() returns an element but I can't access it

I happened to have super dumb issue and I'm stuck.
I do console.log(data) and I get exactly this:
<a href='http://www.someurl.com'>caption</a>
The question is how do I get this links "href" attribute.
I have absolutely no idea why, but these doesn't work:
data.text() == Uncaught TypeError: undefined is not a function (should be: caption)
$('a',data).attr('href') == undefined (should be: http://www.someurl.com)
Maybe this is not a string, but object or something else? How to check that? My JS looks like this:
window.send_to_editor = function(data) {
var videourl = data;
console.log(videourl.text()); // Uncaught TypeError: undefined is not a function
console.log(videourl); // <a href='http://www.someurl.com'>caption</a>
}

Using jQuery, you can do something like that:
var data = "<a href='http://www.someurl.com'>caption</a>";
var link = $(data).attr('href');
It will create dynamically your DOM element, then you will be able to get your attribute href.

You should first find out, what type data is. To do this you can use the JavaScript builtin function typeof(data).

It's not a jQuery object. That is why it is undefined. First, create a jQuery object.
var _videourl = $(videourl);
console.log(_videourl.text());
console.log(_videourl.attr('href'));
// caption (index)
// http://www.someurl.com
DEMO

In your case, data is a string, not a jQuery object and therefore does not have of jQuery's methods (like text).
If you are certain that data is a string containing a link, you can use a regular expression to extract the link like so:
var match = data.match(/href='(.*)'/g);
url = match && match[1];
console.log(url);
Alternately, you can create a jQuery object from your string. But that's a much more expensive operation if you just want to get the url.

Using change() and contains() with an HTML <select> (jQuery)

I'm having some images change on the value change of a <select> dropdown. I've simplified the code here to get the general idea across. Here's what I've got (let me know if you have any questions; I know I haven't shown 'select_text' in here but I don't think it's entirely necessary and I'd have to unravel a bunch of code to simplify here):
var select_option_select = select_text.parent().find('select');
select_option_select.change(function(){
var changed_value = select_text.parent().find('select option[value="' + $(this).val() + '"]').text();
});
//THIS IS WHERE THE IMAGE CHANGES
if(changed_value=="Standard Crossline Grips (free)"){
$('#grip_image').attr('src','/v/vspfiles/images/grip_image.jpg');
}
I know this works but because of the way it's set up, the string of changed value has to be exact the same value as what I put in the IF statement. I've been trying to use 'contains' so it will give me more flexibility moving forward on the site. I know that I can't use 'contains' on a text() value so I re-wrote it like this (note that I get rid of the text() function):
var select_option_select = select_text.parent().find('select');
select_option_select.change(function(){
var changed_value_2 = select_text.parent().find('select option[value="' + $(this).val() + '"]');
});
//THIS IS WHERE THE IMAGE CHANGES
if(changed_value_2.contains("Standard Crossline Grips (free)")){
$('#grip_image').attr('src','/v/vspfiles/images/grip_image.jpg');
}
This gives me the error:
Uncaught TypeError: Object #<Object> has no method 'contains'
Which I guess means it's not recognizing any 'option' and changed_value_2 isn't actually returning anything?
I hope I've explained this well enough. Let me know if you have any questions. Thanks so much for your help.

This may be what you want:
if(changed_value.indexOf("Standard Crossline Grips") >= 0){
$('#grip_image').attr('src','/v/vspfiles/images/grip_image.jpg');
}
or
if(changed_value.indexOf("(free)") >= 0){
$('#grip_image').attr('src','/v/vspfiles/images/grip_image.jpg');
}
Source