I have 1 div and 1 text input field, the div is visible and the input is hidden. The input one gets its value from a range slider, I want to use jQuery somehow to take the value from this input area and populate the div on the fly, I've tried the following with no luck, can anybody see where i may be going wrong?
$( ".value-slider" ).val( $( "#val-slider" ).slider( "value" ) );
$( ".price" ).html( $( ".value-slider" ).html() );
Assuming I've understood you correctly, .value-slider is an input element, and .price is a div element. If that's right, then you need to get the value of the input, rather than the HTML:
$( ".price" ).html( $( ".value-slider" ).val() );
However, since you've just set the value of .value-slider, why not just store the value of the slider and use that?
var sliderValue = $( "#val-slider" ).slider( "value" );
$(".value-slider" ).val(sliderValue);
$( ".price" ).html(sliderValue);
To update the div whenever the input changes, do this
$(".value-slider" ).change(function() {
var sliderValue = $( "#val-slider" ).slider( "value" );
$(".value-slider" ).val(sliderValue);
$( ".price" ).html(sliderValue);
});
Related
I am using jquery, to add dynamically two input fields in a new "row" div. The problem is, that only the second input field is cloned and appended.I can´t find the solution. Any help is appreciated.
Trainer= {
neuen_trainer_hinzufuegen(){
var n = $( ".trainerposition" ).length;
$( "#trainer" ).append( $('<div class="trainerposition" id="trainerposition_'+n+'"></div>') );
$( "#trainer_0_vorname" ).clone().appendTo( "#rtrainerposition_"+n );
$( "#trainerposition_"+n+" input:nth-child(2)").attr('name', 'trainer_'+n+'_vorname');
$( "#trainerposition_"+n+" input:nth-child(2)").attr('id', 'trainer_'+n+'_vorname');
$( "#trainer_0_nachname" ).clone().appendTo( "#trainerposition_"+n );
$( "#trainerposition_"+n+" input:nth-child(3)").attr('name', 'trainer_'+n+'_nachname');
$( "#trainerposition_"+n+" input:nth-child(3)").attr('id', 'trainer_'+n+'_nachname');
}
}
You have an extra r in your selector :-)
$( "#trainer_0_vorname" ).clone().appendTo( "#rtrainerposition_"+n );
I think this should be
$( "#trainer_0_vorname" ).clone().appendTo( "#trainerposition_"+n );
I created slider using the following code available on jsfiddle:
http://jsfiddle.net/3cpsoft1/
However there is some weird behavior when the max value element of the slider is changing itself when left slider is activated.
I think this has something to do with ui part of the slider function but I don't know what is affecting it.
So at first the correct value is 0.0474 and it should stay that way. But somehow it becomes negative as if one value of step was deducted from it.
You can see that on the fiddle i provided.
Is there a way to fix this?
When you divide your total length by the step, you'll end up with a small remainder which is not able to render. Therefore, you must set it to the smallest decimal value you want slide over. Also, your max value should be outside the bound.
$( function() {
$( "#slider-range-max" ).slider({
range: true,
min: -1000,
max: 0.475,
step: .001,
values: [-1000,0.474],
slide: function( event, ui ) {
$( "#amount1" ).val( ui.values[0] );
$( "#amount2" ).val( ui.values[1] );
}
});
$( "#amount1" ).val( -1000 );
$( "#amount2" ).val( 0.474);
} );
i have a problem with jquery slider value after changing it.
I'm just using normal jquery UI (version 1.10.4) and jquery core 1.7.2
First time after refresh i have a value which i want. But after the change i can't get it. And i need that to have a if statemnet which will change a value of the paragraph.
This is a JQuery code:
$(function() {
$( "#slider" ).slider({
range:"min",
min: 0,
max: 100,
value: 10,
slide: function wynik( event, ui ) {
$( "#price" ).val("$" + ui.value);
}
});
$( "#price" ).val( "$" + $( "#slider" ).slider( "value") );
var val = $('#slider').slider("value");
if ( val >= 20 ) {
$("#priceText").text("first text");
} else {
$("#priceText").text("second text");
}
});
What is wrong here?
I want to change a text in label:
<p>
<input type="text" id="price">
<label id="priceText" for="price">Some text to change</label>
</p>
Input working correctly and show the value all the time in right way. But label doesn't change (only first time after refresh).
I have read a lot of posts on SO before i post this one. For example:
How to get value from jQuery UI slider? or How to get value from input with dynamically changed value by jquery UI slider?
But i can't get it done anyway.
You can try this:
$("#selector").change(function() {
$("#slider-range").slider('values',0,$(this).val());
});
Working Fiddle
Jquery Slider emit a "slidechange" event everytime it change value
Remember, it should be listened on the jQuery element after you've registered the event in the element itself
$( "#slider" ).slider({
change: function( event, ui ) {
// register event here
}
});
$( "#slider" ).on( "slidechange", function( event, ui ) {
// use ui.value to get the current value
} );
Check the official api wiki for all the slider related events
Official Slider Api
I have the following line of code in jQuery:
$( "#amount-deposit" ).val( "" + $( "#slider-deposit" ).slider( "value" ) );
I'd like to apply toFixed(2) to amount deposit. I'm unsure how I can do this in this instance though, can anyone suggest how I might do this.
Thanks
Looking at the api:-
value()
Returns: Number
Get the value of the slider. This signature does not accept any
arguments. Code examples: Invoke the method:
var selection = $( ".selector" ).slider( "value" );
So, all you need to do is:-
$( "#amount-deposit" ).val( "" + $( "#slider-deposit" ).slider( "value" ).toFixed(2));
I have an element which I need to append into other element, and after some other manipulation I need to put element back to its default position.
Save the object's parent with .data() and retrieve it when you move it back.
$( '#move' ).data( 'originalParent', $( '#move' ).parent() );
// moving to new position
$( '#moveToNew' ).click( function() {
$( '#move' ).appendTo( '#new' );
});
// move element back to where it was
$( '#moveBack' ).click( function() {
$( '#move' ).appendTo( $( '#move' ).data( 'originalParent' ) );
});
you should use $.data in jQuery
or you can clone the object and then used the cloned one to revert