CODEWITHSUNDEEP
jqueryjquery-ui
Alejandro Hinestrosa
Alejandro Hinestrosa

Reputation: 501

add data to a modal dialog

i'm working with modal dialog, can i put data from a form on the modal dialog? like textbox value, or dropdown list value? how can i do that?

modal dialog code:

var isConfirmed = false;
$('form').submit(function(e) {
    var dialog = $("#dialog");
    if ($("#dialog").length == 0) {
        dialog = $('<div id="dialog" style="display:hidden"> Los datos ingresados son:</div>').appendTo('body');
    }
    dialog.load(

        $("#dialog").dialog({
            close: function(event, ui) {
                dialog.remove();
            },
            resizable: false,
            //height: 140,
            //width: 460
            modal: true,
            buttons: {
                "Ok": function() {
                    $(this).dialog("close");
                    isConfirmed = true;
                    $("form").submit();
                },
                Cancel: function() {
                    $(this).dialog("close");
                }
            }
        })
    );
    if (isConfirmed)
        return true;
    else {
        e.preventDefault();
        return false;
    }
});

Upvotes: 1

Views: 3063

Answers (3)

bfavaretto
bfavaretto

Reputation: 71939

Use the same procedure you're currently using to append the dialog to the page. You're using this:

dialog = $('<div id="dialog" style="display:none"> Los datos ingresados son:</div>').appendTo('body');

(Note: you were using display:hidden, which is invalid. Changed to display:none above.)

Similarly, you can do this:

$('<div id="dialog_content">Whatever you want inside the dialog</div>').appendTo(dialog);

Upvotes: 1

Jay Blanchard
Jay Blanchard

Reputation: 34426

Since the dialog method is attached to an element of some sort - typically a div - you can place anything that you want in that div. Here is an example from the docs:

<script>
$(function() {
    $( "#dialog" ).dialog();
});
</script>



<div class="demo">

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

The paragraph is in the div that is bound to the method.

Upvotes: 0

silly
silly

Reputation: 7887

use

dialog.data('yourDataKey', 'yourData')

and change your check if the dialog exists to

if (dialog.length == 0) {
    dialog = $('<div id="dialog" style="display:hidden"> Los datos ingresados son:</div>').appendTo('body');
}

Upvotes: 0

Related Questions