I have a ui slider element that I am using to let people rate a product, the purpose is to have this slider along with a button to insert the value into a MySQL table (sort of voting)
my slider looks like
$("#slider-range-max4").slider({
range: "max",
min: 1,
max: 10,
value: 0,
slide: function (event, ui) {
$("#slider-range-max-amount4").text(ui.value);
}
});
$("#slider-range-max-amount1").text($("#slider-range-max1").slider("value"));
How can I use a button to send the value selected by the user to mysql, do I have to embed the code into a form ?
Thanks
use ajax like bellow and send the value to php
$(function() {
$( "#slider-range-max" ).slider({
range: "max",
min: 1,
max: 10,
value: 2,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
$.ajax({
type:"POST",
url:"your.php",
data:"vote="+$( "#slider-range-max" ).slider( "value" ),
success:function(response){
alert(voted);
}
})
});
In PHP
<?php
$vote="";
if(isset($_POST['vote'])){$vote=$_POST['vote']}
//now do your job with MySql here
?>
Related
Can you please take a look at this jsfiddle and let me know how I can use the slider to get values from 0 to 1 like 0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1
Here is what I have
$(function() {
$( "#slider" ).slider({
value:1,
min: 0,
max: 1,
step: 10,
slide: function( event, ui ) {
$( "#opacity" ).val( ui.value );
}
});
$( "#opacity" ).val( $( "#slider" ).slider( "value" ) );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<p>
<label for="amount">Opacity:</label>
<input type="text" id="opacity" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider"></div>
Your step value is too high, try:
$( "#slider" ).slider({
value:1,
min: 0,
max: 1,
step: 0.1,
slide: function( event, ui ) {
$( "#opacity" ).val( ui.value );
}
});
jsfiddle demo
New fiddle demo
I try to drop dragged div into, for example, 3 div's.
I want to drop blue rectangle on 3 divs. When rectangle is dropped 3 div's have to change backgroud. I try to do this with draggable and droppable but it work only on to one element :(
$(function() {
$( ".event" ).draggable( {
grid: [ 5, 0 ],
containment: "parent"
}).resizable({
containment: "parent",
grid: [ 5, 0 ],
maxHeight: 40,
maxWidth: 1000,
minHeight: 40,
minWidth: 60,
handles: 'e, w',
resize: function( event, ui ) {
$( "#event" ).css("background-color", "blue");
}
});
$( ".eventPeriod" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" );
return false;
}
});
});
Any idea?
You change the tolerance of your droppable. Like this:
$( ".eventPeriod" ).droppable({
tolerance: 'touch',
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" );
return false;
}
});
I have multiple sliders and it updates the total slider accordingly per each slider. When I go to slide another slider it subtracts it again from the original total value and not the updated value that was from subtracting the previous slider amount.
// Photographer Slider
$('#TablePhotographer').toggle(this.checked);
$(function() {
$( "#photo-range-min" ).slider({
range: "min",
value: photo,
min: 1,
max: photo,
slide: function( event, ui ) {
$( "#photo_amount" ).val( "$" + ui.value );
$( "#total_amount").val("$" + (Number(ui.value) + Number(CityValue - photo)));
}
});
$( "#photo_amount" ).val( "$" + $( "#photo-range-min" ).slider( "value" ).toFixed(2) );
});
// Ceremony Slider
$('#TableCeremony').toggle(this.checked);
$(function() {
$( "#ceremony-range-min" ).slider({
range: "min",
value: ceremony,
min: 1,
max: ceremony,
slide: function( event, ui ) {
$( "#ceremony_amount" ).val( "$" + ui.value );
$( "#total_amount").val("$" + (Number(ui.value) + Number(CityValue - ceremony)));
}
});
//total slider
$('.BudgetTable').fadeIn(500);
$( "#total-range-min" ).slider({
range: "min",
value: CityValue,
min: 1,
max: CityValue,
slide: function( event, ui ) {
$( "#total_amount" ).val( "$" + ui.value);
}
});
$('#state_cost').text("Based on your selecttion, the average wedding cost in this state is $" + CityValue);
$( "#total_amount" ).val( "$" + $( "#total-range-min" ).slider( "value" ) );
As you can see, 2 sliders subtract from the same value, but I need to store the changed value per slider and show them in the total slider. I want to be able to be able to update the value according to each slider.
I am working with jQuery UI slider.
Here is the code i am using:
$(function() {
$( "#slider" ).slider({
value:1,
min: 0,
max: 5,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
There will be 5 steps and I'd like to show the strings in each step instead of the numbers:
1=very sad
2=sad
3=not so sad
4=happy
5=very happy
How can I do this ?
You can put your step labels in an array, then use the slider's value as an index into that array:
var steps = [
"very sad",
"sad",
"not so sad",
"happy",
"very happy"
];
$(function() {
$("#slider").slider({
value: 1,
min: 0,
max: 4,
step: 1,
slide: function(event, ui) {
$("#amount").val(steps[ui.value]);
}
});
$("#amount").val(steps[$("#slider").slider("value")]);
});
i've got a problem with updating slider value from code. i have tried
$('#slider').slider('value', newValue);
$('#slider').val(newValue).slider();
$('#slider').val(newValue).slider('refresh');
and no result
any other suggestions
here is a sample code
Determines the value of the slider, if
there's only one handle. If there is
more than one handle, determines the
value of the first handle.
Code examples
Initialize a slider with the value option specified.
$( ".selector" ).slider({ value: 37 });
Get or set the value option, after init.
//getter
var value = $( ".selector" ).slider( "option", "value" );
//setter
$( ".selector" ).slider( "option", "value", 37 );
<html>
<input type="text" id="amount">
<input type="text" id="amount2">
<div id="slider-range"></div>
</html>
_
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 217,
values: [ 0, 217 ],
slide: function( event, ui ) {
$( "#amount" ).val( ui.values[ 0 ] );
$( "#amount2" ).val( ui.values[ 1 ] );
}
});
$("#amount").change(function() {
$("#slider-range").slider('values',0,$(this).val());
});
$("#amount2").change(function() {
$("#slider-range").slider('values',1,$(this).val());
});
});
</script>
https://jsfiddle.net/brhuman/uvx6pdc1/
Just call showSlider() which was in slider.js file wherever u want. It will automatically refresh.