i'm using selectable jquery, i want to cater the value for selectable once the use select or unselect the item. My problem is, the last value of unselectable won't update.
Full code here http://jsfiddle.net/duQH6/ When I select Mon and Tue, then I unselect the Tue, the value is updated, but then when I click Mon, the value is not updated. Please advice.
Here my jquery code
$(function() {
$("#selectday1").bind('mousedown', function (e) {
e.metaKey = true;
}).selectable();
});
$('document').ready(function(){
$( "#selectday1" ).selectable({
selected: function(event, ui) {
var result=[];
jQuery(".ui-selected", this).each(function()
{
result.push(this.id);
$("#days").val(result.join(','))
});
}
});
$( "#selectday1" ).selectable({
unselected: function(event, ui) {
var result=[];
jQuery(".ui-selected", this).each(function()
{
result.push(this.id);
$("#days").val(result.join(','))
});
}
});
});
Thanks..
The problem is, you are updating the days value within the each loop, so when you unselect the last element the loop callback is never executed, that is why it is happening.
The days value is supposed to be updated once the each() loop is completed.
$(document).ready(function () {
$("#selectday1").selectable({
selected: function (event, ui) {
var result = [];
jQuery(".ui-selected", this).each(function () {
result.push(this.id);
});
$("#days").val(result.join(','))
},
unselected: function (event, ui) {
var result = [];
jQuery(".ui-selected", this).each(function () {
result.push(this.id);
});
$("#days").val(result.join(','))
}
});
});
Demo: Fiddle
But it can be simplified to
jQuery(function ($) {
function serialize(event, ui) {
var result = $(this).find(".ui-selected").map(function () {
return this.id;
}).get();
$("#days").val(result.join(','))
}
$("#selectday1").selectable({
selected: serialize,
unselected: serialize
});
});
Demo: Fiddle
Related
How can I get the underlying select element when JQuery autocompleteselect is fired? I need that element to fire its onchange(). The underlying select element is an ASP.NET DropDown control. Here's the code:
this._on(this.input, {
autocompleteselect: function (event, ui) {
var ele = this; //<---not working
ui.item.option.selected = true;
this._trigger("select", event, {
item: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
Finally I figured it out:
autocompleteselect: function (event, ui) {
ui.item.option.selected = true;
this._trigger("select", event, {
item: ui.item.option
});
var underlyingEle = document.getElementById(
ui.item.option.parentElement.id // <-- fetching the underlying select element
);
underlyingEle.onchange();
}
Hope this helps someone in future. :)
I have a list of textboxes in which a user can drop a letter but when a wrong letter is dropped inside the textbox I want to addClass("danger") I want to addClass only on the wrong letter textbox I have also attached a screenshot to illustrate the problem.
The textbox has a class with the name of box assigned.
Now my drop function is given below.
function dropabc(event) {
if ($(objBox).attr("correct1") != event.target.id) {
$(".imageError").fadeIn('slow').delay(1000).hide(0);
console.log("error");
$(this).addClass('danger');
} else {
console.log(event.target.id);
console.log("ok");
}
}
$(this).addClass("danger")
However, this is not working, I only want to add the danger class to the box on which a wrong value is dropped.
//makes all the textbox red
$(".box").addClass("danger")
Any help would be very appreciated!
This is the jQuery UI drag and droppable function which is working fine:
var objBox;
$('.drag').draggable({
revert: true,
helper: 'clone',
cursor: 'pointer',
start: function(event, ui) {
$(this).fadeTo('fast', 0.5);
objBox=$(this);
},
stop: function(event, ui) {
$(this).fadeTo(0, 1);
}
});
$("#textbox, .box").droppable({
hoverClass: "hoverPath",
drop: function(event, ui) {
var $this = $(this);
if ($this.val() == '') {
$this.val(ui.draggable.text());
$(this).addClass("checkDiv");
$(this).each(function(i, el){
$(el).addClass(myid[3]);
});
}
var empty = $(this).parent().find("input").filter(function() {
return this.value === "";
});
if(empty.length) {
console.log(empty.length);
}
else{
console.log("done");
}
}
});
This is the PHP code which is echo the number of textbox:
for($x = 0 ; $x < count($code_words); $x++){
echo "<input id='".$code_words[$x]."' ondrop='dropabc(event)' class='box' type='textbox'/>";
}
You're just running a function when you embed the ondrop event inside your input tag.
So instead of embedding it try using the jQuery on("drop").
$(document).on("drop", ".box", function(event){
if ($(objBox).attr("correct1") != event.target.id) {
$(".imageError").fadeIn('slow').delay(1000).hide(0);
console.log("error");
$(this).addClass('danger');
} else {
console.log(event.target.id);
console.log("ok");
}
})
Great it helped you :)
Cheers,
I'm using a Jquery UI drag/drop effect, and while i'm dragging the element I need to execute a piece of code that detects if an element is hovered.
Update: Live Example: here
Here is my Drag code:
<script type="text/javascript">
$(function(){
$('.list-disc').sortable({
connectWith: '.list-disc',
drag: function(event, ui){
$(".prof-name").hover(function(event) {
var $obj = event.target;
if (!timeoutId) {
timeoutId = window.setTimeout(function() {
timeoutId = null;
$($obj).next().slideToggle();
}, 2000);
}
},
function (event) {
if (timeoutId) {
window.clearTimeout(timeoutId);
timeoutId = null;
}
else {
$(event.target).next().slideToggle();
}
});
},
start: function (event, ui){
//SomeCode
},
stop: function (event, ui){
//SomeCode
}
})
</script>
The documentation says:
drag( event, ui )
Triggered while the mouse is moved during the dragging, immediately before the current move happens.
Maybe I've understood it wrong or something is wrong with the code...
As you can see, I can make that code inside drag:: event works when executing it inside my $(document).ready(function(){}. But I need to do it while draggin the element, test if the dragged element is hover that object for 2 seconds then i'll slideToggle() it.
Also tried to write a simple console.log() to verify if that's firing, but nothing...
*Update:*Tried Ron's answer: (Still not working - Nothing happens)
over: function(event, ui){
var timeoutId;
$(".prof-name").hover(function(event) {
var $obj = event.target;
if (!timeoutId) {
timeoutId = window.setTimeout(function() {
timeoutId = null;
$(this).next().slideToggle();
}, 2000);
}
},
function (event) {
if (timeoutId) {
window.clearTimeout(timeoutId);
timeoutId = null;
}
else {
$(event.target).next().slideToggle();
}
});
}
Try this:
$( ".list-disc").sortable({
over: function( event, ui ) { // $(this) will be the current hovered element }
});
<script>
$(document).ready(function(){
$("#customer").autocomplete("barcode.php", {
selectFirst: true
});
});
</script>
<script>
$(document).ready(function() {
$("#customer").change(function (e) {
var item = $("#customer").val();
$.post("add", {"data[Sales][item]": item }, function (data) {
$('#details').html(data);
});});
});
</script>
<input type="text" id='customer' name="data[Sales][customer]" class="input-small focused" autocomplete='off'>
<div id='details'></div>
Autocomplete is working fine . On change is not working properly . If I enter all text without selecting through autocomplte then onchange script is working . If I selected trough autocompleted then I pressed tab key then onchange is not working . Its not showing any result.
Use .keypress instead of change
See documentation of keypress
var item = $("#customer").val(); ---> Change Here.. That's It.
If you are using the jQuery autocomplete plugin then use its onChange method
Ex.
$( ".selector" ).autocomplete({
selectFirst: true,
change: function( event, ui ) {
var item = $("#select01").val();
$.post("add", {"data[Sales][item]": item }, function (data) {
$('#details').html(data);
});
// Add more code here!
}
});
You can use as following:
$("#customer").autocomplete("barcode.php", {
selectFirst: true,
select: function(e, ui) {
alert("selected!");
},
change: function(e, ui) {
alert("changed!");
}
});
$.post("add", {"data[Sales][item]": item }, function (data) {
$('#details').html(data);
});
I have an ul list and a multipe selectbox, i would like to know how can i use sortable to sort option's as li element (i have to start/stop position of sortable) using Jquery UI.
Example (my jsfiddle) :
<select id="myselect" multiple>
<option value="vA">A</option>
<option value="vB">B</option>
<option value="vC">C</option>
<option value="vD">D</option>
</select>
<ul class="myul">
<li>AnElementP1</li>
<li>AnElementP2</li>
<li>AnElementP3</li>
<li>AnElementP4</li>
</ul>
Javascript
$(document).ready(function () {
$(".myul").sortable({
start: function(event, ui) {
ui.item.startPosition = ui.item.index();
},
stop: function(event, ui) {
console.log("Start position: " + ui.item.startPosition);
console.log("New position: " + ui.item.index());
// How can i sort the select box option's
}
});
});
Get it !
Maybe this can help someone.
Link to Jsfiddle
$(document).ready(function () {
$(".myul").sortable({
start: function(event, ui) {
ui.item.startPosition = ui.item.index();
},
stop: function(event, ui) {
var El = $("#myselect option").eq(ui.item.startPosition);
var cpy = El.clone();
if (El.is(':selected'))
{
cpy.attr("selected","selected");
}
El.remove();
if (ui.item.index() === 0)
$("#myselect").prepend(cpy);
else
$("#myselect option").eq(ui.item.index() -1).after(cpy);
}
});
});
EDIT
.clone() doesn't clone selected value (See ticket), that's why i've add a condition.
if (El.is(':selected'))
{
cpy.attr("selected","selected");
}
It looks like you've solved it already yourself :)
Was trying out a variant without cloning myself, will post it here as an alternative:
$(document).ready(function () {
$(".myul").sortable({
start: function(event, ui) {
ui.item.startPos = ui.item.index();
},
stop: function(event, ui) {
var newPos = ui.item.index();
var startPos =ui.item.startPos;
if(newPos < startPos)newPos--;
var dropdown = $("#myselect")[0];
var tomove = $(dropdown.options[startPos]);
if(newPos===-1)
$(dropdown.options[0]).before(tomove);
else
$(dropdown.options[newPos]).after(tomove);
}
});
});