jQuery UI Dialog, How to change text once the dial

Question

I'd like to click a button in a dialog and change the text on the message area before running the function associated with the button or simply change the text as part of the function.

Answer 1

Just put a text area into the dialog, it will be editable. If you want to toggle whether or not you can edit it just add a button.

(function ($) {
    var $dialog = $('<div></div>')
                    .html('<textarea id="myContent" rows=7 cols=25>Edit me</textarea>')
                    .dialog({
                        autoOpen: false,
                        title: 'editable dialog',
                        buttons: {
                            "Edit": function () { $("#myContent").attr("disabled", !$("#myContent").attr("disabled")); }
                        },
                        height: "auto",
                        width: "auto"
                    });

    $('.dlog').click(function () {
        $dialog.dialog('open');
        return false;
    });
})(jQuery);

Answer 2

You can use a .onclick event as such...

<div id="targetSelector">Click Me</div>
<div id="messageAreaSelector"></div>

//jquery code to attach click to targetSelector
$('#targetSelector').click(function() {
  //code to update message area 
  $('#messageAreaSlector').html("Text to tell user"); 
  //call to function you want to perform 
  CallSelfDefinedFunction(arguments); 
});

Answer 3

You can bind a function to the close event - http://jqueryui.com/demos/dialog/#event-close. I'm betting you can change your text in there.