Reputation: 1187
My generated code looks like this in chrome's developer tools:
<tbody>
<tr>
<td>
<span class="LiveAgentStatusField" value="Online" >
Online
</span>
</td>
</tr>
</tbody>
Please note that this html code is generated by salesforce and I don't have much control over this except the span.
My jQuery code:
$(".LiveAgentStatusField").each(function(index) {
if ($(this).val() === 'online' || $(this).val() === 'Online') {
$(this).css("color", "#0EBE5E");
} else if ($(this).val() === 'offline' || $(this).val() === 'Offline') {
$(this).css("color", "#ccc");
}
});
There are two wield things happening to me:
When I am using .LiveAgentStatusField
, it works pretty fine. But when I was using span.LiveAgentStatusField
, it doesn't even go into the if code during debugging.
Although the value of the span tag should have a value of 'Online'
, $(this).val()
is actually ""
during debugging. I added a line under this to catch the val() === ""
branch and made sure this is pointing to the right element.
Actually, I have already resolved my code issue with using .html()
. But I am quite keen to find out why it is acting strange.
Upvotes: 0
Views: 136
Reputation: 17227
Actually value
is invalid attribute here. Commonly It is used for inputs in form. In your case .html() is enough
EDIT: jQuery has trim() function for removing trailing whitespaces
var spanVal = $(this).html().toLowerCase(); // you don't need to call html() each time
spanVal = $.trim(spanVal);
if (spanVal === 'online') ... // do all the stuff
Yes, you can use data-value
attribute and get it with data('value')
function, but in your case more obvious solution is to use class you already have:
<span class="LiveAgentStatusField online">
Online
</span>
then all jquery code will look like
$(".LiveAgentStatusField.online").css("color", "#0EBE5E");
$(".LiveAgentStatusField.offline").css("color", "#ccc");
jQuery will do each
loop and all other stuff for you. Also I don't know why you are making it deferred, but if you want to make it at once - just use css
.LiveAgentStatusField.online { color: #0EBE5E; }
Upvotes: 2
Reputation: 101748
The .val()
method only works with form elements. If you want to get the value of the value
attribute on a non-form element, use:
$(this).attr('value');
However, as others have noted, it is preferable to use a data-
prefix (e.g. data-value
), as this is standards compliant. The value
attribute is only valid on certain elements and it is certainly not valid on span
s.
If use a data-value
attribute, you can access it using .data('value')
and then your code becomes:
$(".LiveAgentStatusField").each(function(index) {
var value = $(this).data("value").toLowerCase();
if (value === 'online') {
$(this).css("color", "#0EBE5E");
} else if (value === 'offline') {
$(this).css("color", "#ccc");
}
});
Upvotes: 3