CODEWITHSUNDEEP
javascriptjquery
quarks
quarks

Reputation: 35282

Dialog box with textbox with jQuery

This is my code for implementing a dialog box with textbox on it:

public static native void showEmailModal(String title)/*-{
    $wnd.$("<div><input id='emailAddresss' type='text'>Test</input></div>")
        .text("Enter email address:")
        .appendTo("body")
        .dialog({
            title: title,
            modal: true,
            width: 400,
            hide: "fade",
            show: "fade",
            buttons: {
                "Send": function() {
                    $wnd.$(this).dialog("close");
                },
                "Cancel": function() {
                    $wnd.$(this).dialog("close");
                }
            }
    });    
}-*/;

The problem I have with this is that the input does not show up in the dialog box. What could I be missing here?

As part of the function I also need to send the value of the text input to a method for processing.

Upvotes: 0

Views: 4636

Answers (2)

JJJ
JJJ

Reputation: 33163

You're overwriting the content (including the input field) with the .text() method.

Use this instead:

$("<div></div>")
        .html("Enter email address: <input id='emailAddresss' type='text'>")

Also, <input> can't have child nodes, i.e. <input>Test</input> is invalid.

Upvotes: 1

Jason P
Jason P

Reputation: 27012

I'm not sure what language/framework this is, but I'm going to assume the non-jQuery stuff is correct.

This line:

$("<div><input id='emailAddresss' type='text'>Test</input></div>")

Creates a new div, and this line:

.text("Enter email address:")

Sets the div element's text to Enter email address:, which overwrites/removes the input.

Also, input elements are self-closing: <input type="text" value="Test" />

Upvotes: 1

Related Questions