Slider and Date Picker is not showing JQuery - javascript

I am creating a page where every time a user presses a button, a row will appear in a table with 4 columns. I am trying to add slider and date picker. it works when i add it in HTML, but doesnt work when I have it in a javascript and jquery function.
Here is function that happens when I press the add button.
$(function() {
$("#date").datepicker()
});
$(function()
{
$("#amount").val(60);
$("#slider1").slider({
slide: function(event, ui)
{
$("#amount").val(ui.value);
},
orientation: "horizontal",
min: 0,
max: 100,
value: 60
});
});
function addLab()
{
var labs = $('#lab tr').length;
if (labs <= 10)
{
var newSlider = $('<div>', { id: 'slider1' });
var newLab = $('<tr><td><input type="text" onchange="sumAll()" id="earnedLab" title="Enter Your Score Out Of 25."/></td><td>' + "25" + '</td><td><input type="text" id="date" /></td><td><div id="slider1" style="width: 200px"/></td></tr>');
$('#lab').append(newLab);
}
else alert("No more boxes allowed for labs");
}

I believe i figured it out... I should have been using classes, not IDs. I switched it and it worked..

Related

How to reset progressbar in Jquery

When I add a card to the inbox list, it is possible to double click on the card to open a modal dialog. In the dialog it is possible to add some checkboxes dynamically. When the checkboxes are checked the progress bar changes value.
The issue is, lets say, I create 2 checkboxes and then check one of them, the progress bar will show 50% done. After that, I save the data and press the save button. The dialog closes.
Then, when I add a new one card to the inbox list and double click on it to open dialog, the progress bar still shows the value of 50%. You can see the problem in the image below:
I have tried to fix it by my self using the code below: But it doesn't seem to work.
$('#modalDialog,#progressbar').val($currentTarget.children('#progressbar').val());
Live Demo
How can I reset the progress bar after adding a new card?
HTML:
<!--Modal Dialog-->
<div id="modalDialog">
<form>
<input type="button" id="Save" value="Save Data" />
<hr/>
<br/>
<label>Add checkBox</label>
<br />
<div id="progressbar"></div>
<br />
<input type="text" id="checkBoxName" />
<input type="button" id="btnSaveCheckBox" value="_Ok" />
</form>
</div>
Jquery:
$(function () {
// Click function to add a card
var $div = $('<div />').addClass('sortable-div');
var cnt = 0,
$currentTarget;
$('#AddCardBtn').click(function () {
var $newDiv = $div.clone(true);
cnt++;
$newDiv.prop("id", "div" + cnt);
$newDiv.data('checkboxes', []);
$('#userAddedCard').append($newDiv);
// alert($('#userAddedCard').find("div.sortable-div").length);
});
// Double click to open Modal Dialog Window
$('#userAddedCard').dblclick(function (e) {
$currentTarget = $(e.target);
$('#modalDialog,#progressbar').val($currentTarget.children('#progressbar').val());
$('.allcheckbox').remove(); // Remove checkboxes
$('#modalDialog').data('checkboxes', []); /* Reset dialog checkbox data */
/* Add checkboxes from card data */
$.each($currentTarget.data('checkboxes'), function (i, checkbox) {
addCheckbox(checkbox.name, checkbox.status);
});
$('#modalDialog').dialog({
modal: true,
height: 600,
width: 500,
position: 'center'
});
return false;
});
$("#datepicker").datepicker({
showWeek: true,
firstDay: 1
});
$("#Save").on("click", function () {
/* Copy checkbox data to card */
$currentTarget.data('checkboxes', $('#modalDialog').data('checkboxes'));
$('#modalDialog').dialog("close");
});
// Add a new checkBox
$('#btnSaveCheckBox').click(function () {
addCheckbox($('#checkBoxName').val());
$('#checkBoxName').val("");
});
function addCheckbox(name, status) {
status = status || false;
var container = $('#modalDialog');
var inputs = container.find('input');
var id = inputs.length + 1;
var data = {
status: status,
name: name
};
var div = $('<div />', { class: 'allcheckbox' });
$('<input />', {
type: 'checkbox',
id: 'cb' + id,
value: name
}).prop('checked', status).on('change', function () {
data.status = $(this).prop('checked');
}).appendTo(div); /* set checkbox status and monitor changes */
$('<label />', {
'for': 'cb' + id,
text: name
}).appendTo(div);
div.appendTo(container);
container.data('checkboxes').push(data);
updateProgress();
}
$(document).on('change', 'input[type="checkbox"]', updateProgress);
$("#progressbar").progressbar({
value: 0,
max: 100
});
function updateProgress() {
var numAll = $('input[type="checkbox"]').length;
var numChecked = $('input[type="checkbox"]:checked').length;
if (numAll > 0) {
var perc = (numChecked / numAll) * 100;
$("#progressbar").progressbar("value", perc)
.children('.ui-progressbar-value')
.html(perc.toPrecision(3) + '%')
.css("display", "block");
}
}
});
When you click Save button just reset #progressbar value like this:
$('#progressbar').progressbar('option', 'value', 0);
You can see documentation at http://api.jqueryui.com/progressbar/#option-value

jQuery autocomplete 1.1: Show All Data on focus

How to make this extension show all data on focus?. I have tried to change minChars to 0 but it only show when the input double clicked.
$("#month").autocomplete(months, {
minChars: 0,
max: 12,
autoFill: true,
mustMatch: true,
matchContains: false,
scrollHeight: 220,
formatItem: function(data, i, total) {
// don't show the current month in the list of values (for whatever reason)
if ( data[0] == months[new Date().getMonth()] )
return false;
return data[0];
}
});
You need to bind a focus event to the input and call the jQuery UI method as a result. Take a look at this js fiddle for an example
I added the following code:
$('#month').autocomplete({
// Your current code
}).on('focus', function(event) {
var self = this;
$(self).autocomplete( "search", this.value);;
});
the value passed into the search method is what the autocomplete will look for.
How to search for all values on focus
If you want all available dropdowns leave it as "" but add minLength : 0 to the options object.
$('#month').autocomplete({
minLength : 0
}).on('focus', function(event) {
$(this).autocomplete("search", "");
});
I recently had the same problem, due to this plugin is old (and deprecated), there is very little documentation available for this version.
This worked for me:
var __n_clicks = 0;
$("#autocomplete_input").autocomplete(data, {
minChars: 0,
...
}).on('click', function(event) {
if(__n_clicks < 1){
__n_clicks++;
$(this).click();
}else {
__n_clicks = 0;
}
});
executing "dblclick" didn't work either, it had to be 2 clicks.
If you want some combobox with this plugin try this:
$('.lookup').on('click', function(event) {
var str =$(this).attr('id');
$('#'+str.slice(1)).focus().click().click();
});
$(".autocomplete_input").autocomplete(availableTags, {
minChars: 0,
}).focus(function(event) {
$(this).click();
});
this could also work for one click only, but it's best to just switch plugin entirely.

Error : cannot call methods on slider prior to initialization attempted to call method 'value'

I have written something like below. onclick of div with id "PLUS" I
am getting the following error:
cannot call methods on slider prior to initialization attempted to call method 'value'
<div id="PLUS" class="PLUS"></div>
<script>
$(function() {
$(".slider").slider({
animate: true,
range: "min",
value: 18,
min: 18,
max: 70,
step: 1,
slide: function(event, ui) {
$("#slider-result").html(ui.value);
document.getElementById(findElement('ageId')).value = ui.value;
},
//this updates the hidden form field so we can submit the data using a form
change: function(event, ui) {
$('#hidden').attr('value', ui.value);
}
});
$(".PLUS").click(function() {
var value = $("#slider-result").slider("value"),
step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
});
</script>
Any help is appreciated.
If we check error in detail you will notice that it says you are trying to call the value method before the initialization of slider plugin.
Reason:
Actually JavaScript is an interpreted language, and it doesn't wait for first command to execute and finish. That's why your $(".slider").slider({ and $(".PLUS").click(function() { lines run at same time and the error occurs.
Solution:
You can put your code in setTimeout function here is an example given below.
<script>
$(function() {
$(".slider").slider({
animate: true,
range: "min",
value: 18,
min: 18,
max: 70,
step: 1,
slide: function(event, ui) {
$("#slider-result").html(ui.value);
document.getElementById(findElement('ageId')).value = ui.value;
},
//this updates the hidden form field so we can submit the data using a form
change: function(event, ui) {
$('#hidden').attr('value', ui.value);
}
});
setTimeout(function(){
$(".PLUS").click(function() {
var value = $("#slider-result").slider("value"),
step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
},200); // 200 = 0.2 seconds = 200 miliseconds
});
</script>
I hope this will help you/someone.
Regards,
You have used $(".slider").slider() at the time of initializing and
$("#slider-result").slider() at the time of getting the value some plugins work on selector you have used at the time of init, so try that.
The error is caused because $("#slider-result") is not the element initialized as slider and you're trying to execute slider widget methods on it instead of $(".slider") which is the actual slider.
Your code should be
$(".PLUS").click(function() {
var value = $(".slider").slider("value"),
step = $(".slider").slider("option", "step");
$("#slider-result").text(value + step);
//---- maybe you'll need to ----^---- parseInt() the values here
});
i had a similar problem.
your block here
$(".PLUS").click(function() {
var value = $("#slider-result").slider("value")
, step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
just keep it under
create: function( event, ui ) {}
ie.
create: function( event, ui ) {
$(".PLUS").click(function() {
var value = ui.value;
, step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
}
hope this works.
The best way I found to achieve this is to use the event from the ON function from the slider library to get the value. Ex:
slider.on('slideStop', function(ev) {
let value= ev.value; //try ev if you want to see all
console.log(value);
})
Regards

get spinner ui value on change

How could get the value of a spinner when the value is changing with the button up and down?
<input type="text" id="spinner1" value="1" onchange="selFirt()" readonly>
<script>
$("#spinner1").spinner({min: 1, max: 5});
function selFirt(){
$('#spinner1').spinner().change(function(){
alert($(this).spinner('value'));
});
}
</script>
$('input[name*="name"]').spinner({
min: 0,
max: 100,
spin: function(event, ui) {
$(this).change();
}
});
SEE HERE
try the following :
$(function () {
var spinner = $("#spinner").spinner({
step: 2 ,
spin: function( event, ui ){
handleSpinnerValue(ui.value);
}
});
});
function handleSpinnerValue(txtValue)
{
//do here whatever you want with the value;
alert(txtValue);
}

Show/hide div based on value of jquery UI slider

I am using the jQuery UI slider and trying to show a div when the slider hits a certain value and hide it otherwise. The div is showing/hiding but at unexpected moments. Can anyone spot where I'm going wrong with my syntax? Here's the script:
$(function() {
//vars
var conveyor = $(".content-conveyor", $("#sliderContent")),
item = $(".item", $("#sliderContent"));
//set length of conveyor
conveyor.css("width", item.length * parseInt(item.css("width")));
//config
var sliderOpts = {
max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),orientation: "vertical",range: "min",step: 304,
slide: function(e, ui) {
conveyor.css("left", "-" + ui.value + "px");
$("#amount").val('$' + ui.value);
// here's where I'm trying to show and hide a div based on the value of the slider
if ($("#slider").slider("value") == 304) {
$("#test").show();
} else {
$("#test").hide();
}
}
};
//create slider
$("#slider").slider(sliderOpts);
$("#amount").val('$' + $("#slider").slider("value"));
});
I did this for a project recently, but mine was showing a span tag as a warning note to users, the following is the code I used and its works fine:
$("#slider").slider({
animate: true,
min: 0,
max: 10000,
range: true,
slide: function(event, ui) {
$("#amount").val(ui.values[1]);
if (ui.values[1] > '2000') { //2000 is the amount where you want the event to trigger
$('.slider-warning').css('display', 'block');
} else {
$('.slider-warning').css('display', 'none');
}
}
});
so you should be able to just use this, but change the necesary attributes i.e the value and the selectors etc.
Edit - updated answer follows
got it, the ui.values was wrong, find below the corrected code
var sliderOpts = {
max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),
orientation: "vertical",
range: "min",
step: 304,
slide: function(event, ui) {
conveyor.css("left", "-" + ui.value + "px");
$("#amount").val('$' + ui.value);
if (ui.value > '200') { //200 is the amount where you want the event to trigger
$('#test').css('display', 'block');
} else {
$('#test').css('display', 'none');
}
}
};
this is taken straight from ur code, also notice:
if (ui.value > '200')
you'll need to change this to how ever you want the event to be triggered.
Hope this helps :)

Categories

Resources