jQuery UI Datepicker and var

Question

I can't seem for the life of me to get this working. Basically the scenario goes like this. I have a function that gets executed and pops up a jQuery dialog window with a datepicker embedded in it. The user selects a date and presto, the date gets chosen and an automated message is captured into a var. The problem is that when the same type of code is executed again, the sdate changes but the text remains the same with a new date. I'd like to have dynamic text with a dynamic date. This is tricky because I know that the datepicker is a call back function, which is basically beyond my knowledge of javascript coding.

<div style="display:none" id="dd">
<div id="d1"></div>
</div>

eg. test('1') test('2')

var sdate, text

//==========================================================================
    function test(x) {
        //==========================================================================
        if (x == '1') {

            $('#dd')
                .dialog({
                autoOpen: true,
                modal: true,
                overlay: {
                    opacity: 1.0,
                    background: 'black'
                },
                title: "SELECT DATE 1...",
                height: 235,
                width: 235,
                draggable: false,
                resizable: false
            });
            $('#d1')
                .datepicker({
                onSelect: function () {

                    sdate = $(this)
                        .val();
                    $("#dd")
                        .dialog("close");

                    text = 'THE DATE YOU HAVE CHOSEN IS: ' + sdate + '.'
                    alert(text)

                } //end of onSelect: function() {
            }); //end of datepicker

        } //end of (x == '1')


        else if (x == '2') {

            $('#dd')
                .dialog({
                autoOpen: true,
                modal: true,
                overlay: {
                    opacity: 1.0,
                    background: 'black'
                },
                title: "SELECT DATE 2...",
                height: 235,
                width: 235,
                draggable: false,
                resizable: false
            });
            $('#d1')
                .datepicker({
                onSelect: function () {

                    sdate = $(this)
                        .val();
                    $("#dd")
                        .dialog("close");

                    text = 'THE 2ND DATE YOU HAVE CHOSEN IS: ' + sdate + '.'
                    alert(text)

                } //end of onSelect: function() {
            }); //end of datepicker

        } //end of (x == '2')

    } //end of function

Going crazy and need the help of the experts on this forum.

Much thanks and appreciation for all your help an support

Answer 1

I had a slight problem with the order that you ran it in, so I changed a few things. I ran this in jsFiddle :

I used this html:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" rel="stylesheet" />

<div style="display:none" id="dd">
    <div id="d1"></div>
</div>

<button data="1">1</button>
<button data="2">2</button>

The buttons are just used to trigger the code

I used the following script:

jQuery(document).ready(function(){
    jQuery("button").click(function(){
        test(jQuery(this).attr("data"));        
    });
});

var sdate, text

function test(x) {
    if (x == '1') {
        $('#d1').datepicker({
            onSelect: function() {
                sdate = $(this).val();
                $("#dd").dialog("close");
                text = 'THE DATE YOU HAVE CHOSEN IS: '+ sdate +'.';
                alert(text);
                //jQuery(this).datepicker("destroy");
             }//end of onSelect: function() {
        });//end of datepicker

        $('#dd').dialog({ 
            autoOpen: true, 
            modal: true, 
            overlay: { 
                opacity: 1.0, 
                background: 'black' 
            }, 
            title: "SELECT DATE 1...", 
            height: 400, 
            width: 400, 
            draggable: false, 
            resizable: false});

    } else if (x == '2') {
        $('#d1').datepicker({
            onSelect: function() {
                sdate = $(this).val();
                $("#dd").dialog("close");
                text = 'THE 2ND DATE YOU HAVE CHOSEN IS: '+ sdate +'.';
                alert(text);
            //jQuery(this).datepicker("destroy");

             }//end of onSelect: function() {
        });//end of datepicker

        $('#dd').dialog({ 
            autoOpen: true, 
            modal: true, 
            overlay: { 
                opacity: 1.0, 
                background: 'black' 
            }, 
            title: "SELECT DATE 2...", 
            height: 400, 
            width: 400, 
            draggable: false, 
            resizable: false});

    }//end of (x == '2')

}//end of function

The only problem I had getting it to work was the order of operations. So I create the datepicker before I create the dialog.