views:

320

answers:

1

Hi

First time here, and more of a web designer than programmer, so be gentle! ;o) Anyway, as the title suggests, I have a dialog window that's opened and within that, a datepicker. What I want it that, if the user opens the datepicker, and then clicks the dialog window's close button, the datepicker is also closed.

Here's what I've got at present:

        <!--// Modal Windows -->        
        $.ui.dialog.defaults.bgiframe = true;
        $(function() {
            $('#advanced_search').dialog({
                autoOpen: false,
                width: 600,
                height: 400,
                modal: true,
                resizable: false,
                draggable: false,
                title: 'Advanced Search',
            });
            $('.adv_search').click(function() {
                $('#advanced_search').dialog('open');
            });
        });

        <!--// Date Picker -->
        $("#advanced_search .start_date").datepicker({
            dateFormat: 'dd/mm/yy',
            showButtonPanel: true,
            duration: 0,
            constrainInput: true,
            showOn: 'button',               
            buttonImage: '/img/icons/50.png',
            buttonImageOnly: true                               
        });
        $("#advanced_search .end_date").datepicker({
            dateFormat: 'dd/mm/yy',
            showButtonPanel: true,
            duration: 0,
            constrainInput: true,
            showOn: 'button',
            buttonImage: '/img/icons/50.png',
            buttonImageOnly: true                               
        });

But I'm a bit flummoxed as to how to do this. Anyone got any advice? It'd be much appreciated!

Thanks Phil

+2  A: 

Add the close callback to your dialog like this:

$(function() {
   $('#advanced_search').dialog({
        autoOpen: false,
        width: 600,
        height: 400,
        modal: true,
        resizable: false,
        draggable: false,
        title: 'Advanced Search',
        close: function() { 
          $("#advanced_search .start_date").datepicker('hide');
          $("#advanced_search .end_date").datepicker('hide');
        } 
    });
    $('.adv_search').click(function() {
        $('#advanced_search').dialog('open');
    });
});

Here's an all-inclusive approach that's slightly better, simpler selectors and the date pickers aren't created until the dialog is actually opened, so if a user never goes into it, less script running:

$(function() {
   $('#advanced_search').dialog({
        autoOpen: false,
        width: 600,
        height: 400,
        modal: true,
        resizable: false,
        draggable: false,
        title: 'Advanced Search',
        close: function() { 
          $("#advanced_search .start_date").datepicker('hide');
          $("#advanced_search .end_date").datepicker('hide');
        }, 
        open: function(event, ui) {
          $(".start_date, .end_date", ui).datepicker({
            dateFormat: 'dd/mm/yy',
            showButtonPanel: true,
            duration: 0,
            constrainInput: true,
            showOn: 'button',               
            buttonImage: '/img/icons/50.png',
            buttonImageOnly: true                               
          });
        }
    });
    $('.adv_search').click(function() {
        $('#advanced_search').dialog('open');
    });
});
Nick Craver
Thanks for the ultra speedy reply Nick. I'm embarrassed it was such a simple solution ;o)
Phil
@Phil: no problem, check again for a more compact overall solution, if you're going to be running a lot of scripts then it'll save some CPU cycles by not creating things until they're asked for. One thing to note is that all jQuery objects are really collections, you can at also do `$("#advanced_search .start_date, #advanced_search .end_date,")` and cut down on duplicate code.
Nick Craver
Hi Nick, thanks for the update. I've added that code, and Firebug is giving me the following error:missing } after property listopen: function(event, ui) {\nAny ideas?
Phil
@Phil - Sorry I never saw this, add a comma after the close function, answer has been updated, click the edit link to see exactly where this changed
Nick Craver
@Nick - No worries, I really appreciate the time you've spent helping me on this! Thanks!!
Phil