We Keep Coding

Is it possible to launch/open a Bootstrap Modal with jQuery UI Autocomplete Select event or custom event?

I have PHP/MySQL AJAX source for my Autocomplete field. It works great, per the jQuery autocomplete remote source docs
The remote source docs allows an array of data so I can pass the labels var for the dropdown results and I have the ID in the array. (here is an example of a similar setup)
So feeling confident the server side data is good, I want to open a Modal on select from the list of options. The Select event needs to pass an ID to load the data in the modal. Is this possible?
My modal is opened with a class selector on click function. It reference a data-id.
<a name="views" class="leadview" data-task-id="179">Task 179 - user 1458</a>
So I assume triggering a modal must happen with the Select or Focus event?
$( " Some Selector? " ).on( "autocompleteselect", function( event, ui ) {} );
I'm really stuck connecting the autocomplete to the modal with an ID, it's my first time using autocomplete.

i assume the you want to display a bootstrap modal when user select an option listed in autocomplet ...
if so then use :
$( ".selector" ).autocomplete({
select: function( event, ui ) {
var taskid = $(this).data("task-id");
$('#myModal').modal('show');
$('#myModal .header').html(taskid);
}
});

jQuery Widgets not working on tabs loaded by Ajax

I have an application that has many tabs, apart from the first tab - all others are loaded via Ajax.
The tab content all loads correctly.
However if I have a jQuery widget in a (ajax loaded) tab, the widget does not work.
I attempted to use:
$(document).on('click', '#dateOfBirth', function() {
$( '#dateOfBirth' ).datepicker();
});
But the datepicker does not display.
Confusingly (for me):
$(document).on('click', '#dateOfBirth', function() {
alert('This works properly');
});
Works properly! The alert displays when the date field is "clicked".
And of course if I have a simple page without the tabs / ajax content - the datepicker displays as expected when the date field is clicked.
I am using the jQuery 2.2.0 and
jQuery UI 1.12.0 with the "redmond" theme / CSS.
The view html follows the following;
<div class = "emr-bodycontent">
<div id="tabs">
<ul>
<li>Patient Details</li>
<li>Carers</li>
...
...
Here is the JS used for the TABS;
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.fail(function() {
ui.panel.html(
"There seems to be an error retrieving the data you requested."
);
});
}
});

Instead of using click use focus and datepicker will work . Assumes that the element id is valid and is an input
$(document).on('focus', '#dateOfBirth', function() {
$( '#dateOfBirth' ).datepicker();
});
For any other plugins inside tabs you can use load callback of tabs ... see api docs
DEMO

I will suggest you to setup the datepicker() after Ajax content loaded, do not use click event. Because the initiate call of $('#dateOfBirth').datepicker() is to set up the datepicker, you may need to click again to trigger the calendar.
Or, you can try to manually trigger it right after set.
$(document).on('click', '#dateOfBirth', function() {
$(this).datepicker();
$(this).datepicker("show");
});

Firstly, thanks very much for the answers / comments.
Both answers work successfully.
Kieran's worked straight away as it was manually triggering the event.
Charlie's worked, too - but only after I clicked several times.
Though after fixing my underlying issue, Charlie's worked straight away, too.
The underlying issue was indeed a duplicate ID.
(thanks for the prompt to check, Charlie).
Because the TAB contents are their own individual forms / pages - I only ever worried about making ID's unique within individual TABs.
After ensuring that ALL IDs are unique, the widget works correctly / as expected.

How to capture selection event in jQueryUI selectable?

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){});

jQuery UI modal dialog global close on overlay click

I have several modal dialogs in my page and there will be even more. I plan to use modal dialogs for them all and have them close on overlay click. I don't want to bind the overlay click event in every place I instantiate a dialog, so I would like to extend the dialog prototype or something similar to make it bind the click event globally for all modal dialogs.
http://jsfiddle.net/jurchiks/kLBJm/1/
Let's say I have the following dialog constructor:
$('#dialog').dialog({
modal: true,
open: function()
{
$(this).find('input[type=text]').focus();
}
});
I've tried putting this code before dialog instantiation:
$.extend(
$.ui.dialog.prototype.options,
{
open: function()
{
var dialog = this;
$('.ui-widget-overlay').on('click', function()
{
$(dialog).dialog('close');
});
}
}
);
but it does not work, jQuery only calls the open function passed in the dialog parameters. I have suspicion that this simply changes the default open function and whatever is passed to the constructor is overriding this.
$.widget(
"ui.dialog",
$.ui.dialog,
{
open: function()
{
this._super();
var dialog = this;
$('.ui-widget-overlay').on('click', function()
{
$(dialog).dialog('close');
});
}
}
);
This does not work either; jQuery spits out an error - "cannot call methods on dialog prior to initialization; attempted to call method 'close'" - even though the popup is open.
How could I make it so the overlay click & close event is global and not overridable?
P.S. why the hell is this not provided by the jQuery UI library? I would think this is something very popular.

Ok, I made my own slightly hackish solution that works, but it seems that it only works on my version of jQuery (1.10.3). I tried the exact same code with jsfiddle's offered jQuery UI 1.9.2 and it simply didn't call the function. I'm guessing the function name has been renamed in 1.10.
Anyway, here's the code:
$.widget(
'ui.dialog',
$.ui.dialog,
{
_createOverlay: function()
{
this._super();
if (!this.options.modal)
{
return;
}
this._on(this.overlay, { click: 'close' });
}
}
);
And the test fiddle: http://jsfiddle.net/jurchiks/R944y/1/
Had to add external jQuery UI 1.10.3 CDN links to it to make it work, but hey - at least it works and it's a pretty simple solution, just had to dig inside jQuery UI's code to find out the simplest way to do it.
P.S. This would take so little effort to be built into the dialog plugin itself, it is remarkable that nobody has done it. All you'd need to do is add an option to enable/disable close on overlay click and the last line of my function inside an IF that checks if that option is enabled, a total of max. 4 lines.
Edit: created a patch for current jQuery UI: https://gist.github.com/jurchiks/7264596

it's not overriding but you can listen to certain events on the document:
$(function() {
var theDialog;
$( document ).on("click",
".ui-widget-overlay",function(){
$(theDialog).dialog("close");
});
$( document ).on( "dialogopen", function( event, ui ) {
theDialog=$(event.target);
});
});

jQuery UI datepicker display without action

Is it possible to display jQuery UI datepicker without having to click on anything?
I want the datepicker to be visible when the window loads. Or is this not possible? If not is there another plugin for this or is it best to create a new on my own?

one thing you could do is give focus to the input so that the datepicker shows:
$('#datepicker').focus()
look here http://jsbin.com/agazes/edit#preview
or show it after creating it:
$('#datepicker').datepicker('show')
http://jsbin.com/agazes/2/edit#preview

This does not seem to be possible by passing an option. However, you can call the show method after creating your datepicker:
$(document).ready(function() {
$("#yourElement").datepicker({
// your options...
}).datepicker("show");
});

http://jqueryui.com/demos/datepicker/#method-show
You could call the show method when you want it to open.

In Some jQuery versions show is not available, in that case use:
window.addEventListener('load', function () {
document.getElementById('datepicker').click();
});
jQuery(document).ready(function() {
$('#datepicker').bind('touchstart click', function(){
$(this).focus();
});
});