I need to show elements when a checkbox is checked and hide them when unchecked.
for (var id = 1; id <= N; id++) {
var $newSlider = $("<div/>", {
id: 'slider-' + id,
class: 'ui-slider'
}).slider({
range: 'min',
min: initVal,
max: N,
value: initVal,
step: 2,
slide: function( event, ui) {
$newResult.val( ui.value );
}
});
var $newResult = $('<input/>', {
type: 'text',
id: 'result-' + id,
class: 'sliderText',
value: '4'
});
var $x = $("<div/>", {
id: 'sliderContainer-' + id
}).append($newResult).append($newSlider);
$("#showSldr").append($x);
}
This is the function to show/hide them but it's not working:
$("body").on("click", "#showChck input", function() {
show_hide_sliders();
});
function show_hide_sliders() {
$("#showSldr>div").hide();
$("#showChck input").filter(":checked").filter(":visible").each(function() {
var id = this.id.replace(/\D/g, '');
$('#sliderContainer' + id).show();
});
}
The problem must be something I didn't notice...
The truth is originally the sliders (each one) were created the first time a checkbox is checked: http://jsfiddle.net/dhirajbodicherla/6vkyh4kL/10/
But I prefer to have them created and just show/hide, so that no matter what checkbox you check first they will always be in order (from 1 to 30): http://jsfiddle.net/6vkyh4kL/13/
Related
I want to filter some text based on the attribute data-length. For example if the slider is in between the value 15 and 20, I want all the tags to be displayed where the data-length is between these two values and hide the all those that have in the data-length more than 20 or less than 15.
Here is a link what I tried so far but was not successful:
FIDDLE
the jQuery code:
$(function() {
$('#slider-container').slider({
range: true,
min: 0,
max: 100,
values: [0, 20],
create: function() {
$("#value").val("0 - 20");
},
slide: function(event, ui) {
$("#value").val(" " + ui.values[0] + " - " + ui.values[1]);
var mi = ui.values[0];
var mx = ui.values[1];
filterSystem(mi, mx);
}
})
});
function filterSystem(minPrice, maxPrice) {
$("#computers div.match js-match").hide().filter(function() {
var price = parseInt($(this).data("data-length"), 10);
return price >= minPrice && price <= maxPrice;
}).show();
}
In your code there is no #computers id, so your selector won't run. You also do not have a div with the class match nor do you have a js-match node.
I would change your selector from #computers div.match js-match to em.match.js-match
You can also get the data length by using .attr('data-length'), or .data('length')
The result would be:
$("em.match.js-match").hide().filter(function () {
var price = parseInt($(this).data("length"), 10);
return price >= minPrice && price <= maxPrice;
}).show();
Edit: Also change your selector from $("#computers div.match js-match") to just $(".js-match")
You would simply use $(this).data("length") instead of $(this).data("data-length")
I have this code:
for(i = 0; i < 1; i++){
$("body").append(questions[i]);
for(j = 0; j < prompts.length; j++){
var temp_id = "slider-" + j;
var temp_num_text_id = "slider-text-" + j;
var temptextdiv = $("<h5>50</h5>");
$("body").append(temptextdiv);
temptextdiv.attr('id', temp_num_text_id);
var tempdiv = $("<div></div>");
$("body").append(tempdiv);
tempdiv.attr('id', temp_id);
$("#" + temp_id).slider({
min: 0,
max: 100,
value: 50,
slide: function(event, ui){
$("#" + temp_num_text_id).html(ui.value);
}
});
}
}
The goal is to have one question with various prompts about the question, each being a ranking done on a jquery-ui slider. My trouble is trying to 'link' the text that displays the value of the slider with the slider itself. When I was testing this out with one slider it was as simple as the function within the declaration of the slider object shown above, but when this is done within a loop, all of the sliders only change the text value of the last slider. As I understand it from similar questions others have had, every iteration of the loop overwrites the previous declaration. How do I avoid this?
As I mentioned in the comment, all id attributes should be unique. This can be done by assigning a consecutive number to the ids.
For example: https://jsfiddle.net/Twisty/vLut8ysw/
JavaScript
var questions = [
"<div id='q1'>Question 1</div>",
"<div id='q2'>Question 2</div>",
"<div id='q3'>Question 3</div>",
"<div id='q4'>Question 4</div>",
"<div id='q5'>Question 5</div>",
];
var prompts = [
25,
50,
75,
];
var promptIds = 0;
$(function() {
$.each(questions, function(q, i) {
$(i).appendTo("body");
$.each(prompts, function(p, j) {
var temptextdiv = $("<h5>", {
id: "p-slider-text-" + promptIds
}).html(j).appendTo("body");
var tempdiv = $("<div></div>", {
id: "p-slider-" + promptIds
}).appendTo("body");
tempdiv.slider({
min: 0,
max: 100,
value: j,
slide: function(event, ui) {
temptextdiv.html(ui.value);
}
});
promptIds++;
});
});
});
This will create unique ids for each slider.
When I set a stock value of say 100, it works.
A live copy of this problem is here: http://mypcdeals.com/product-list.php?c=motherboards#limit=20&p=0
The "SATA 3GB/S PORTS" slider in the bottom left of the product search is not being formatted properly for a min 0 max of 10.
Here is the code that should set it:
initPopulateRangeSliders: function () {
$('.rangefilter').each(function () {
var id = $(this).attr('id');
//get the max value for this field
$.getJSON("/getSliderMax?f=" + id, function (data) {
if (data.success)
{
var theMax = data.max;
alert('Max should be set to:' + theMax);
var theSlider = document.getElementById(id);
var settings = {
start: 0,
behaviour: 'snap',
range: {
'min': 0,
'max': theMax
}
}
noUiSlider.create(theSlider, settings);
}
});
});
If you load the page you will see the alert box show you the max value, but I get the error of:
Uncaught Error: noUiSlider: 'range' contains invalid value.
Why?
initPopulateRangeSliders: function () {
$('.rangefilter').each(function () {
var id = $(this).attr('id');
//get the max value for this field
$.getJSON("/getSliderMax?f=" + id, function (data) {
if (data.success)
{
var theMax = data.max;
alert('Max should be set to:' + theMax);
var theSlider = document.getElementById(id);
var settings = {
start: 0,
behaviour: 'snap',
range: {
'min': 0,
'max': parseInt(theMax)
}
}
noUiSlider.create(theSlider, settings);
}
});
});
Have the same issue.
The reason is that in input where the initial min or max values is value was with spaces like "1 234". Please Format initial data.
<p>Cost: $<span id="hddValue"></span></p>
<p>Cost2: $<span id="hddValue2"></span></p>
<select id="hdd">
<option>1000</option>
<option>2000</option>
<option>3000</option>
<option>4000</option>
<option>5000</option>
</select>
<select id="hdd2">
<option>1700</option>
<option>500</option>
<option>3700</option>
<option>4300</option>
<option>5070</option>
</select>
$(function () {
var select = $('#hdd');
var slider = $("<div id='slider'></div>").insertAfter(select).slider({
min: 1,
max: 5,
range: "true",
value: select[0].selectedIndex + 1,
slide: function (event, ui) {
select[0].selectedIndex = ui.value - 1;
$("#hddValue").text($('#hdd option:selected').text());
$("#hddValue2").text($('#hdd2 option:selected').text());
}
});
//show start value
$( "#hddValue" ).html( $('#slider').slider('value') );
$( "#hddValue2" ).html( $('#slider').slider('value') );
});
Can anyone please help me with this js script? What i want to do is when I move the slider i want each selected values to show up on the page as seen on two option values "hdd" and "hdd2".
right now what happens is when i move the slider only #hdd changes and when i add #hdd2 in the javascript, the hdd2 html view just freezes to the first option and doesn't change.
thank you in advance.
Your update method only updates both selects but with the value of the first one.
Havent tried it but it should look something like this, btw. having mutliple elements with the same id (your sliders) is invalid and breaks older browsers.
<p>Cost: $<span class="hddvalue"></span></p>
<p>Cost2: $<span class="hddvalue"></span></p>
<select id="hdd">
<option>1000</option>
<option>2000</option>
<option>3000</option>
<option>4000</option>
<option>5000</option>
</select>
<select id="hdd2">
<option>1700</option>
<option>500</option>
<option>3700</option>
<option>4300</option>
<option>5070</option>
</select>
$(function () {
var
$selects = $('#hdd,#hdd2'),
$values = $('.hddvalue')
;
$selects.each(function (i) {
var sel = this;
$("<div class='slider'></div>").insertAfter(select).slider({
min: 1,
max: 5,
range: "true",
value: sel.selectedIndex + 1,
slide: function (event, ui) {
sel.selectedIndex = ui.value - 1;
$values.eq(i).text(jQuery(this).find('option:selected').text());
}
});
});
//show start value
$values.eq(0).html( $('.slider').eq(0).slider('value') );
$values.eq(1).html( $('.slider').eq(1).slider('value') );
});
$(function () {
var
$selects = $('#hdd,#hdd2'),
$values = $('.hddvalue');
$selects.each(function (i) {
var sel = this;
$("<div class='slider'></div>").insertAfter(sel).slider({
min: 1,
max: 5,
range: "true",
value: sel.selectedIndex + 1,
slide: function (event, ui) {
sel.selectedIndex = ui.value - 1;
$values.eq(i).text(jQuery(this).find('option:selected').text());
}
});
});
//show start value
$values.eq(0).html( $('.slider').eq(0).slider('value') );
$values.eq(1).html( $('.slider').eq(1).slider('value') );
});
I wan't to get the order of the objects in my array so I can store them to my database? But I don't know what to write in my for loop.
here's the code
<script>
$(document).ready(function () {
var rootLimit = 8;
$('ul.sortable').nestedSortable({
handle: 'a',
items: 'li',
listType: 'ul',
maxLevels: '3',
toleranceElement: '> a',
update: function (event, ui) {
list = $(this).nestedSortable(
'toHierarchy',
{ startDepthCount: 0 }
);
var page_id = ui.item.find('> a').attr('data-page-id');
console.log(list);
for (var i = 0; i < list.length; i++) {
//Do something
}
$.post('/page/updatemenu/' + page_id, {
list : list
}, function (data) {
});
}
});
});
</script>
Instead of for you can use jQuery method .each():
list.each(function(index, item){
// do something with item or index of item
});
Use -
var index = $(ui.sender).index();