Attach a jQuery dialog to a text field and make it disappear when the user clicks something else?

Question

I like the jQuery DatePicker widget. It is very user friendly that when the user clicks on a date field in my web application, the user sees a dialog that allows her to select a date.

What's even better is the way the datepicker is so unobtrusive. If the user doesn't want to use the datepicker, she can easily type a date on her own. Furthermore, the datepicker automagically disappears when the user clicks on anything that isn't the datepicker or shifts the focus to another field.

What I would like to do is have the same functionality with the jQuery dialog. Basically, I want to create a dialog with some widgets that the user can use to select a value for a text field.

I want the dialog to automatically appear underneath the text field when the field is selected. I want it to automatically disappear after the user shifts the focus somewhere else.

In order to accomplish this, I've attached a handler to the text field .focus event in jQuery to make the dialog appear. That works fine. :-)

I've tried adding a handler to the .blur event to make the dialog automatically close when the user goes somewhere else. However, merely opening the dialog causes the blur event to fire, closing it :-/

Furthermore, I don't know of any way to make the dialog appear directly underneath the text field the same way that the datepicker does.

How can I make a jQuery dialog appear next to a text field and disappear appropriately like the datepicker?

Answer 1

See example of the following here.

First, to make the dialog appear beneath the input, use position:absolute and the jQuery .offset() method to find the position of the input in question to assign values to the position of the dialog. For example:

$('#input').focus(function(e){
    var $t = $(this),
        $d = $('#dialog'),
        to = $t.offset();

    $d.css({
        'position':'absolute',
        'top':to.top + $t.height() + 4,
        'left':to.left
      })
      .show();
});

In the above, I positioned the dialog by adding the top value of the input to the height of the input plus a 4px buffer.

Second, to hide the dialog, attach a click handler to the document that doesn't hide the dialog if the event target is either the dialog or the input. Like so:

$(document).click(function(e){
    if (e.target.id !== "dialog" && e.target.id !== "input") {
        $('#dialog').hide();
    }
}

See example.

Answer 2

i can't give a direct answer. but my first try would be to look up how the DatePicker does the trick with the position here

it seems to me, the widget is dynamically generated when needed and not placed there from the beginning.

Answer 3

If you wish to use the actual jQuery UI-Dialog features, here's one way:

$('#main').find('input').click(function(e) {
    var $box = $('<div class="box" />').html('In dialog'); // make a dialog
    var xpos = $(this).position().left; // get position of clicked field
    var ypos = $(this).position().top + 20;
    $box.dialog({ // trigger the dialog
        position: [xpos, ypos], // position it relative to clicked object
        close: function() { // destroy on close for neatness
            $(this).dialog('destroy');
        }
    }).mouseleave(function() { // if you mouseout:
        $(this).dialog('close'); // close the dialog
    });
});

Example: http://jsfiddle.net/redler/dAr69/