How to capture selection event in jQueryUI selectable? - javascript

I have a few links on a webpage. They open a similar dialog window and load equal content via $.load(). Content has ul list and it use $.selectable() plugin:
$('.select-dialog-cities > ul').selectable({filter: 'li'});
I would like to handle the selectableselected event. As I have three links, I need to separate the events. Is it possible without global flags? Something like this:
$("#dialog_id .select-dialog-cities > ul").on("selectableselected", function(event, ui){});

Depending on what you're trying to achieve, you might also just query which elements are actually selected, like this:
$("#selectable").on("selectableselected", function(event, ui){
$('.ui-selected').each(function(){
console.log($(this).text());
});
});
Example on JSFiddle
If you're doing this on different dialog windows, you will probably need to bind to the event every time you create a new dialog window.

To capture that event you should provide a function to the selected property of the object you initialise selectable with. Try this:
$('.select-dialog-cities > ul').selectable({
filter: 'li',
selected: function(e, ui) {
console.log('You chose something!');
}
});
You can get information about the element that raised the event via the selected property of the ui parameter passed to the function.
More info in the jQueryUI Docs

As I sad:
load equal content via $.load(). Content has ul list
I could not assign event this way:
$("#dialog_id .select-dialog-cities > ul").on("selectableselected", function(event, ui){});
Because I forget about one moment from documentation $.on():
Event handlers are bound only to the currently selected elements; they
must exist at the time your code makes the call to .on().
So the solution was very easy:
$("#dialog_id").on("selectableselected", ".select-dialog-cities > ul", function(event, ui){});

Related

Capturing focus on a specific jQueryUI tab

I have jQueryUI tabs, and on a specific tab, I have defined a click function (the ajax call works correctly):
$("a[href='#tabs-1ua']").click(function (event, ui)
{
//ajax call
});
Now what I am trying to do is to accomodate not just clicks, but any type of focus on this tab in general, such as navigating to it using a keyboard arrow key for example. I tried activate in place of click, but I got an error. How can I capture all types of focus on a specific jQueryUI tab?
Thank you.
You should set "tabsactivate" listener while the tab has been activated. Please check below code.
//tabs is the id of UL in which all the tabs has been wrapped. Please replace it with according to your code.
$('#tabs').tabs({
activate: function(event ,ui){
if(ui.newTab.attr('href')=='#tabs-1ua'){
//make ajax call
}
});
focus() by default is accepted by input elements (<input>, <textarea>, <select>) and not <a> elements. Try adding a tab index to the anchor first:
$(document).ready(function () {
$("a[href='#tabs-1ua']").attr("tabindex", "-1").focus(function
(event, ui) {
// JS goes here
});
});
Try
$("a[href='#tabs-1ua']").on('click hover', function () {
// Do something for both
});
I got it working as follows:
I initialized tabs in my application using the class attribute instead of an id, and within it is specified the activate option. In there, I got the id of the currently active tab using $(".tabui .ui-tabs-panel:visible").attr("id"); where tabui is the name of the class. The code is below.
$('.tabui').tabs({
activate: function (event, ui)
{
//do something 1
var currentTab = $(".tabui .ui-tabs-panel:visible").attr("id");
console.log (currentTab);
if(currentTab === "#tabs-1ua")
{
//do something 2
}
}
});
Thanks to all who replied trying to help me.
You do need to use the focus event for key movement, and can use it for mouse clicks as well. The focus event and related events are notoriously quirky in their behaviors, especially with respect to how they are implemented in frameworks and plugins. While I can't say just why, focus on the a element fires on a mouse click, and focus on the enclosing li element fires when you navigate to the element with keys. (Tested with Chrome.) So:
$("#myTabs").tabs();
$('#myTabs li, #myTabs a').on('focus', function(e, ui){
//do whatever
});
Demo

DataTable can't get id element after page change

I am trying to make ajax call on focus for every text input, I can make is in first page( when document ready) but when I change page , javascript can't parse inputs because it wasn't created when document is ready. How can I fix it ?
jQuery(document).ready( function(){
jQuery('[id^=urun_sirasi-]').focus(function(){
event.preventDefault();
var urun_sirasi=jQuery(this).data('sira');
console.log(urun_sirasi);
jQuery('#urun_sirasi-'+urun_sirasi).bind('keyup',function(e)
{
console.log(jQuery("#urun_sirasi-"+urun_sirasi).val());
jQuery.ajax({
url:'../ajax.php',
data:'process=siralama&urun_id='+urun_sirasi+'&urun_sirasi='+jQuery.trim(jQuery("#urun_sirasi-"+urun_sirasi).val()),
success:function(e){
// e -> 1 ve ya0 geliyor.
console.log(e);
}
});
});
});
});
Thanks for your help.
This seems to a very common problem in the jQuery section. See the docs for .on() at http://api.jquery.com/on/, specifically the section about delegated events:
Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time.
I use the following syntax in the doc ready that will create events for all future items with the "expand" class, should be able to be adjusted for you
$(document).on('click',"#myTable .expand", function(){
so yours should be something like this (maybe give your items a class rather than having an event to each element selector)
$(document).on('keyup',"#yourTable .urun_sirasi-key", function(){

Jquery appending in front of div

So I'm using Jquery Drag/Drop to drag and drop something onto a dashboard. I want to now drag anything that I have dropped onto the dashboard out of the dashboard in order to destroy it/remove it from the dashboard.
I've tried adding a class to the thing that is dropped onto the dashboard and then tried adding a draggable to that, but the drag is not working, I think because when I append the element to the dashboard it appears behind the dashboard(the colours are a little faded).
Here is my code-
$(".draggable").draggable({helper:'clone'});
$("#favouritesDashboard").droppable({
accept:".draggable",
drop: function(event,ui) {
var toDrop = $(ui.draggable).clone();
//create smaller version
$(toDrop).addClass("inDashBoard");
$(this).append(toDrop);
}
});
$(".inDashBoard").click(function(){
console.log("clicking elem in dashboard");
});
I've replaced the second draggable with a click, the console.log never prints, suggesting that what I think is going on is actually going on.
Use on for late binding http://api.jquery.com/on/ .
$(document).on('click', '.inDashBoard', function(){
console.log("clicking elem in dashboard");
});
This is due to the nature of event binding / listeners in jQuery.
The elements you want to trigger a click event on do not exist when the page is loaded, they are added dynamically. So to ensure that your method is attached to new elements that match the selector you should use "on" or "live"
$(".inDashBoard").on( "click", function(){
console.log("clicking elem in dashboard");
});
this should work:
$(".inDashBoard").live('click', function(){
console.log("clicking elem in dashboard");
});

Removing elements of list using parent/child

I'm looking to dynamically remove li elements from several connected ul lists. Right now I am assigning 'dblclick' event behaviors by using $("#sortable1").children().on('dblclick',function() {...})
The items in #sortable1 will be moved to other lists (#sortable2, #sortable3, etc) by the user.
When a list item is double clicked, a dialog box pops up asking if the user would like to delete it. If the user says yes, I want the list item to be removed from whatever list it is in. I am trying to do it using something like:
$($(this).parent().childNodes[$(this).index()]).remove()
But that doesn't work.
Advice?
Something like this should work.
var showPopup = function( elem ){
//show your popup with a function like this, as i assume it already does...
$( '#delete_toggle' ).one( 'click', function(){
elem.remove();
});
};
$("#sortable1").children().on('dblclick',function(){
showPopup( $(this) );
});
To remove the element that was clicked on, you just use this in the event handler:
$(this).remove();
or if you've saved the element reference to a variable elem, it would be this:
$(elem).remove();
You are trying to make it way more complicated than need be. The jQuery .remove() method looks at who its current parent is and takes care of all that for you.

JQuery: dialog doesn't fire autocomplete

I'm using the http://docs.jquery.com/UI/Dialog and http://docs.jquery.com/UI/Autocomplete with JQuery 1.7.2 and JQuery-UI 1.8.18.
There is a form with a text box, which will fire the autocomplete fine when loaded in the page as normal. It's nice and simple!
(function() {
jQuery(function($) {
return $("#type").autocomplete({
source: "/auto-suggest/supplies",
minLength: 2
});
});
}).call(this);
However, if the form is rendered via a dialog the autocomplete does not fire (no UI changes, and the server shows no access to the source url). I'm assuming this is because the input field has not been rendered at document load. So, I tried to use dialog's create event to assign the autocomplete, by passing the function to it as a callback. Again, the autocomplete does not fire.
I'm mystified as to how to get this to work. I would be tempted to get the dialog to create and then hide on document load, but in this instance there could be several instances of the dialog as it's related to table data.
Any help with this will be much appreciated.
Try using open event - this will ensure that the DOM elements are ready
$( ".selector" ).bind( "dialogopen", function(event, ui) {
$("#type").autocomplete({
source: "/auto-suggest/supplies",
minLength: 2
});
});
You can even get the values and then in the success call dialog
$.get('/auto-suggest/supplies', function(data) {
//call dialog here
});
Try delegate
Delegate autocomplete
BEST SOLUTION IS WROTE BY: ManseUK

Categories