JQuery Modal Dialog with drop-down list and textarea embedded

Question

I'm new to jQuery so forgive me if this is an easy question.

I am trying to create a dialog box, from an onClick event, that comprises of:

1) A drop down list 2) A text area (height possibly 300px) 3) Yes/No buttons

I have got to the stage where i can display a dialog with the Yes/No buttons, however i am struggling to include a dropdown and textarea field.

Current code:

function placeOrder() {

if ($('#dialogDiv').length == 0) {
    $('body').append("<div id='dialogDiv'><div/>");
}

var dialogDiv = $('#dialogDiv');

dialogDiv.attr("Title", "Are you sure you want to place this order.");
dialogDiv.html("Are you sure you want to place this order? Please select delivery option from the drop down and enter any special requirements in the text field.");

dialogDiv.dialog({
    modal : true,               
    buttons : [
            {
                text : "Yes",
                class : 'Green',
                click : function() {
                    // Some functionality.                      
                }
            },
            {
                text : "No",
                class : 'Red',
                click : function() {
                    // Some functionality.
                }
            } ]
});

}

If there is a better way of structuring my dialog im happy to hear.

Thanks

-- UPDATE --------------------

Thanks - That seems to have work but are still a few issues.

I have created the div element outside of the body tag, yet, when the page first loads, i can see the drop-down and text-area at the bottom of the page. Once the dialog appears, and the drop-down and text-areas are displayed in the dialog, yet, they disappear from the bottom of the page (As i expected on page load) upon clicking No.

I thought it was because i hadn't hid the div on page load, tried with:

$("#dialogDiv").hide(); 

Although that hides the div on PageLoad, when the dialog appears the drop-down and text-area are still hidden.

Updated function:

function placeOrder() {

if ($('#dialogDiv').length == 0) {

}

var dialogDiv = $('#dialogDiv');

dialogDiv.dialog({
modal : true,               
buttons : [
        {
            text : "Yes",
            class : 'Green',
            click : function() {
                // Some functionality.                      
            }
        },
        {
            text : "No",
            class : 'Red',
            click : function() {
                // Some functionality.
            }
        } ]
});

Updated HTML:

</body>

    <div id="dialogDiv" title="Are you sure you want to place this order.">
        <p>Are you sure you want to place this order? Please select delivery option from the drop down and enter any special requirements in the text field.</p>
        Reason<select for="postage">
            <option value="">Please select...</option>
            <option value="00111">Fedex - 001</option>
            <option value="00112">UPS - 002</option>
        </select>
        <textarea id="details" name="details" class=" type="text" maxlength="760"></textarea>     
    </div>

Answer 1

Your JavaScript dialog call is fine. In your HTML markup, outside of the body tag, create a div element that will wrap your dialog. With your div now defined in the HTML markup, you can remove the lines of JavaScript with the append,attr,html calls.

</body>

<div id="dialogDiv" title="Are you sure you want to place this order">
    <!-- Define your textarea and select here as you normally would -->
    <textarea/>
    <select/>
</div>

</html>

With the HTML outside of the body tag, this div will be hidden until called by your dialog method. You can treat the textarea and select as you would any other HTML element in your JavaScript code.

UPDATE:

Here's a JSFiddle for the answer: http://jsfiddle.net/zMs5n/

$("#dialogDiv").dialog({
    autoOpen: false
});

// Open the dialog when the user clicks some button
$("#myButton").button().click(function() {
    $("#dialogDiv").dialog("open");
});

Basically, you need to create the dialog() as soon as the page loads. JQuery UI, as part of the dialog initialization, will not display this div outside of the dialog. Setting the autoOpen property to false will prevent the dialog from opening. At this point, you can call the dialog open function to open the dialog at your leisure.

Answer 2

你必须在dialogDiv div中编写select和textarea的html代码。