I have created some select tags in javascript but now I want to customise the style with jQuery. The problem that I have is that I can't access the class of select tag. Does anyone have any idea why is this?
nextOneSelectorHtml =
'<select ' +
'class="dropdown" ' +
'id="dd" ' +
'data-selector-level="' + (currentSelectLevel+1) + '" ' +
'data-path="' + strPath + '" ' +
'onchange="onFsSelectChange(this)"' +
'><option disabled selected> -- select an option -- </option>';
....
Now if I am doing
$('dropdown').css( "background-color: #000000" );
there is no effect
You are missing a class selector . and change the format of argument passed in .css() method. First argument should be CSS property name and then next one should be its value:
$('.dropdown').css( "background-color", "#000000" ); //or .css({"background-color": "#000000"});
// ^^ Class selector needed
Related
I'm creating a Jquery Mobile range dynamic with this code:
$('<input data-type="' + elementType + '" id="' + name +' " min=' + value1 +' max=' + value2 + ' value="127" >').appendTo("fieldset");
Now I want to add a change event with this code:
$(".brightness").change(function() {
alert("changed");
});
I have no idea why it's not working, I tried to refresh the range after defining the event, I tried to bind the event to the range, nothing works. The function that contains the first code snippet, is getting called first, and the function that contains the second snipped is getting called second.
Does someone of you know what I'm doing wrong, or what I'm overlooking?
Two things you need to do
1. add css class brightness to your range input
$('<input class="brightness" data-type="' + elementType + '" id="' + name +' " min=' + value1 +' max=' + value2 + ' value="127" >').appendTo("fieldset");
Add event handler using on
$(document).on("change",".brightness",function() {
alert("changed");
});
EDIT - for id selector use # instead of .(dot) like below
$(document).on("change","#brightness",function() {
alert("changed");
});
Check jQuery Selector
Use on method for your dynamically created elements
$(".brightness").on('change',function() {
alert("changed");
});
I think you are giving id brightness and Calling Onchange Event by Class using dot(.).
if the name of the id is brightness then
you should use #
$("#brightness").on('change',function() {
alert("changed");
});
but if you want call onchange event by class only then you need to add class to your input and use dot(.)
$('<input class="brightness" data-type="' + elementType + '" id="' + name +' " min=' + value1 +' max=' + value2 + ' value="127" >').appendTo("fieldset");
$(".brightness").on('change',function() {
alert("changed");
});
The code removes all options from a select box and updates them. The issue is that the value for each option is not updating correctly.
What is happening is the value for each option is updated with just the first word of a string, which is incorrect. I want the value to be updated with the entire string.
Code:
service_selection.children().remove();
$.each(data, function(index,value){
service_selection.append("<option value=" + value.description + ">" + value.description + "</option>");
});
Example: Let's say value.description = "Hello World Foo Bar".
The html shows it only assigns "Hello" to the option's value instead of "Hello World Foo Bar" to the option's value.
The current html after being updated looks like this:
<option value="Hello" World Foo Bar>Hello World Foo Bar</option>
You forgot to add " for the actual html value (it has to be surrounded by "), therfor it will cut after the first white space.
The correct code would look like this:
service_selection.children().remove();
$.each(data, function(index,value){
service_selection.append("<option value='" + value.description + "'>" + value.description + "</option>");
});
(notice the single ' I added after value= and before >)
You have issues with quotes in your current code.
I'd personally do something like:
var opts = "";
$.each(data, function(index, value) {
opts += '<option value="' + value.description + '">' + value.description + '</option>';
});
service_selection.html(opts);
weird little bug I can't figure out, I have the following line:
$("#ingredientlist").append('<li>' + value + ' parts ' + capitalize(index + '') + '</li>').css("color", curColor);
Basically, in a previous statement I get curColor, which is different depending on what value I'm on. I checked the colors and they're different each time. I want each <li> to be styled to a specific color, so I tried setting the .css() to that, but all my entries are the same color. Any ideas?
Thanks
Currently you are appending li to $("#ingredientlist") then setting its color
You need to set color of li not its parent.
Use
$("#ingredientlist").append(
$('<li></li>')
.text(value + ' parts ' + capitalize(index + ''))
.css("color", curColor)
);
The issue is because append() returns the parent element, not the one which was appended. This means that your code is actually setting the color of the #ingredientlist element, not the li. Try this instead:
$('<li />', { text: value + ' parts ' + capitalize(index + '') })
.css('color', curColor)
.appendTo('#ingredientlist');
You're applying the .css call to the #ingredientlist set, not the li you're appending.
Instead:
$("#ingredientlist").append($('<li>' + value + ' parts ' + capitalize(index + '') + '</li>').css("color", curColor));
// Changes -----------------^^-------------------------------------------------------------------------------------^
Breaking that up into parts just to make it clearer:
var $li = $('<li>' + value + ' parts ' + capitalize(index + '') + '</li>');
$li.css("color", curColor);
$("#ingredientlist").append($li);
HTML:
<input value='Rename' type='button' onclick='RenameGlobalPhase({$row['id']});'
<span id='renameGlobalPhase{$row['id']}'>" . $row['phase'] . "</span>
Here is my JS code:
function RenameGlobalPhase(id)// {{{
{
var phase = $('#renameGlobalPhase' + id).html();
$('#renameGlobalPhase' + id).replaceWith("<input id='#renameGlobalPhase" + id + "' type='text' onblur='SaveNewPhaseName(" + id + ");' value='" + phase + "' />");
$('#renameGlobalPhase' + id).focus();
} // }}}
function SaveNewPhaseName(id)// {{{
{
var newPhase = $('#renameGlobalPhase' + id).val();
alert(newPhase);
$('#renameGlobalPhase' + id).replaceWith('<span>' + newPhase + '</span>');
} // }}}
So when user clicks the input button above, I turn a span next to it into an input field so user can rename the value. And in onblur (newly created from jQuery for that new input field), I want to save the new value and return back to span.
The alert shows an undefined value. Can anyone see what is wrong?
Remove the # from the id
Change
.replaceWith("<input id='#renameGlobalPhase" + id + "'
to
.replaceWith("<input id='renameGlobalPhase" + id + "'
fiddle
I have a select menu and I dynamically insert some values from a database:
markup += '<option value=' + option["value"] + '>' + option["alias"] + '</option>';
some values, however, contain double quotes. to try and get around this I tried:
markup += '<option value=' + JSON.stringify(option["value"]) + '>' + option["alias"] + '</option>';
For examples sake lets assume the value is 6"Rocket (this is actually my problem child)
When I try and read the value using Jquery .val() I always get 6.
What to do SO?
The simplest way of avoiding this problem is to DOM-sript rather than insert strings of HTML.
var sel = $('#some_dropdown');
...
$('<option />', {value: option.value, text: option.alias}).appendTo(sel);