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.
Related
I have a table where I make drag and drop. To be possible to make drag and drop and also scroll the page without drag and drop I apply the Jquery Touch.
The problem is when I make a tab in table it shows an error in console.
This is the error
jquery.js:4737 Uncaught TypeError: ((jQuery.event.special[handleObj.origType] || {}).handle || handleObj.handler).apply is not a function
at HTMLTableElement.dispatch (jquery.js:4737)
at triggerCustomEvent (jquery.mobile-events.js:846)
at HTMLTableElement.tapFunc2 (jquery.mobile-events.js:498)
at HTMLTableElement.dispatch (jquery.js:4737)
at HTMLTableElement.elemData.handle (jquery.js:4549)
The code is this:
$('.touchtable').tap('tap', function(e) {
console.log('hola2');
});
How can I fix the error?
The info I read about jquery-touch is here
https://github.com/benmajor/jQuery-Touch-Events
Code to drag and drop
if ($('.touchtable').on('doubletap',function(e){
$("#tbodyproject").sortable({
items: "> tr",
appendTo: "parent",
helper: "clone",
placeholder: "placeholder-style",
containment: ".table",
start: function(event, ui) {
var cantidad_real = $('.table thead tr th:visible').length;
var cantidad_actual = $(this).find('.placeholder-style td').length;
if(cantidad_actual > cantidad_real){
var cantidad_a_ocultar = (cantidad_actual - cantidad_real);
for(var i = 0; i <= cantidad_a_ocultar; i++){
$(this).find('.placeholder-style td:nth-child('+ i +')').addClass('hidden-td');
}
}
ui.helper.css('display', 'table')
},
stop: function(event, ui) {
ui.item.css('display', '')
},
update: function( event, ui ) {
let newOrder = $(this).sortable('toArray');
$.ajax({
type: "POST",
url:'/admin/projects/updateOrder',
data: {ids: newOrder}
})
.done(function( msg ) {
location.reload();
});
}
}).disableSelection();
}));
Code must be like this:
$('.touchtable').on('doubletap', function(e) {
console.log('User tapped touchtable');
});
You should use on method instead tap method and pass the tap parameter on the on method which would call you the tap method.
$('.touchtable').on('tap', function(e) {
console.log('hola2');
});
In another way, you can directly call the tap method like this:
$('.touchtable').tap(function(e) {
console.log('hola2');
});
Note: The first method is an event delegation method and the second method is direct method. If you have dynamically inserted elements, then you must use event delegation method to make it work.
i have a draggable list, a sortable-droppable list and a couple of li's inside the first.
now i want to pull them over, in the stop-funtion i have a function that adds a class to the first child (it's a span representing the clip-number like
<li>
<span>1.</span>
<span>Title</span>
<span>1min23sec</span>
</li>
). the reason for this is, i want to represent the original clip number in the playlist(sortable).
but i get a console error saying
TypeError: ui.children is not a function
ui.children("li")[0].addClass(".slot_clip_info");
i am not 100% sure, but i think this exact code HAS already worked in the past time, i might have changed somthing without knowing, but i am not aware of that.
draggable:
$(function() {
$(".pl_clipEntry").draggable({
appendTo: "body",
revert: "invalid",
connectToSortable: "#tracks",
distance: 20,
helper: function(){
return $(this).clone().width($(this).width()); // hack for the drag-clone to keep the correct width
},
stop: function(ui) {
ui.children("li")[0].addClass(".slot_clip_info");
},
zIndex: 100
});
});
sortable:
$(function() {
var removeItem;
$("#tracks").sortable({
items: "li:not(.placeholder)",
connectWith: "li",
placeholder: "sort_placeholder",
helper: "clone",
distance: 20,
sort: function () {
$(this).removeClass("ui-state-default");
updatePlaylist();
},
over: function (event,ui) {
updatePlaylist();
removeItem = false;
console.log(event);
console.log(ui);
var originalClass = ui.helper.context.childNodes[0].className;
console.log(originalClass);
var small_clip = originalClass.match(/(\d+)/g)[1];
ui.item.context.children[0].innerHTML = small_clip;
ui.item.context.children[0].classList.add("slot_clip_info");
},
out: function () {
updatePlaylist();
removeItem = true;
},
beforeStop: function(event,ui) {
if (removeItem) {
ui.item.remove();
}
},
stop: function(event,ui) {
console.log("checking placeholder");
var list = $(this);
var count = list.children(':not(.placeholder)').length;
list.children('.placeholder').css("display", count > 0 ? "none" : "block");
savePlaylist();
}
});
as soon as i pull and element IN or reorder them, i get the said error.
also, on refresh, the list seems to multiply itself.. but i guess that's another issue...
Full fiddle (pretty messy, functionality in top dropdown button "PL TOGGLE"
UPDATE: another thing i noticed: the first drag works without problems, then shows the error on release, subsequent drags will (mostly.. sometimes they do...) not work
you need to make ui a jquery object, and then wrap the first element in another jquery object to do what you want.
so change:
ui.children("li")[0].addClass(".slot_clip_info");
to
$($(ui).children("li")[0]).addClass(".slot_clip_info");
In jQuery UI's draggable module, the stop function has 2 parameters : event and ui.
ui is a javascript object (and not a jQuery one, there's a difference.)
This object has 3 attributes :
helper which is a jQuery object
position which is a javascript object
offset which is a javascript object
Depending on your HTML code (we don't have), you could replace
ui.children("li")[0].addClass(".slot_clip_info");
by
ui.helper.children("li")[0].addClass(".slot_clip_info");
I'm working on sliding old questions to the left and new questions in from the right. You can see what I'm doing in this jsFiddle:
jsFiddle
$(document).ready(function () {
//$('ul').roundabout();
$("#question2").hide();
$("#question3").hide();
var x = 1;
$("input[type='radio']").change(function () {
var selection = $(this).val();
//alert("Radio button selection changed. Selected: " + selection);
$("#question" + x).hide("slide", {
direction: "left"
}, 800);
x++;
$("#question" + x).show("slide", {
direction: "right"
}, 800);
});
});
But when I'm working outside of jsFiddle (mostly because it won't load the roundabout.js file from GitHub correctly) I can't seem to get the show() and hide() to work correctly. I have the exact same code (with a reference to roundabout.js uncommented), and it will completely ignore the first hide and show references, then skip the next hide command and show the next question.
Any ideas on why it wouldn't be firing the hide() and show() functions in the click event?
EDIT: Editted with most current jsFiddle. It works there, but not outside of that environment.
Bind the event inside the DOM ready event
If you inspect the source in jsFiddle, you see all your code enclosed in the DOM ready event . So it looks like it works here and not on your local version.
$(document).ready(function () {
//$('ul').roundabout();
$("#question2").hide();
$("#question3").hide();
var x = 1;
$("input[type='radio']").change(function () {
var selection = $(this).val();
//alert("Radio button selection changed. Selected: " + selection);
$("#question" + x).hide("slide", {
direction: "left"
}, 800);
x++;
$("#question" + x).show("slide", {
direction: "right"
}, 800);
});
});
This approach doesn't use jQuery UI and is also different than yours, but you'll still get the same end result. Note that the HTML/CSS are also different in this approach.
Working example: JSFiddle.
$(document).ready(function () {
var x = 1,
distance = $('.container').width(),
qNumber = $('.question').length;
$('.questionList').width(distance*qNumber);
$("input[type='radio']").change(function () {
alert( "Radio button selection changed. Selected: " + $(this).val() );
$('.questionList').animate({'margin-left':'-='+distance+'px'}, 500);
});
});
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
Here is my piece of code in jquery actuall I want in such way where :
Where by default value of Ball will be shown in Textbox.
same time either All or Stopall will be work(it's not working here properly :( )
For multiple times checking All button,which is not working according to the expectation
here is the fiddle link : http://jsfiddle.net/bigzer0/PKRVR/11/
$(document).ready(function() {
$('.check').click(function(){
$("#policyName").val('Start');
$("#features").val('');
$('[name="startall"]').on('click', function() {
var $checkboxes = $('input[type="checkbox"]').not('[name="startall"], [name="stopall"]');
if (this.checked) {
$checkboxes.prop({
checked: true,
disabled: true
});
}
else{
$checkboxes.prop({
checked: false
});
}
});
$(".check").each(function(){
if($(this).prop('checked')){
$("#policyName").val($("#policyName").val() + $(this).val());
$("#features").val($("#features").val() + $(this).data('name'));
}
});
});
});
Any comments on this context will be welcome
You're code is broken in many ways. You are binding a click event inside a click event. You should take that outside and just make sure it's inside the document.ready function since your element is a static element.
$(document).ready(function() {
// cache features
var $features = $('#features');
// cache policyname
var $policy = $("#policyName");
// cache all/stopall
var $ss = $('[name="startall"],[name="stopall"]');
// cache all others
var $checkboxes = $('input[type="checkbox"]').not($ss);
// function to update text boxes
function updateText() {
var policyName = 'Start';
var features = '';
// LOOP THROUGH CHECKED INPUTS - Only if 1 or more of the 3 are checked
$checkboxes.filter(':checked').each(function(i, v) {
policyName += $(v).val();
features += $(v).data('name');
});
// update textboxes
$policy.val(policyName);
$features.val(features);
}
$checkboxes.on('change', function() {
updateText();
// check startall if all three boxes are checked
$('input[name="startall"]').prop('checked', $checkboxes.filter(':checked').length == 3);
});
$('input[name="startall"]').on('change', function() {
$checkboxes.prop({
'checked': this.checked,
'disabled': false
});
updateText();
});
$('input[name="stopall"]').on('change', function() {
$checkboxes.add('[name="startall"]').prop({
'checked': false,
'disabled': this.checked
});
updateText();
});
// updatetext on page load
updateText();
});
FIDDLE
you are checking click function in click function. you should use if statement.