Question

I have an ASP.NET databound textbox inside a FormView, which I want to display in a jQuery UI dialog with the TinyMCE editor attached to it. I’ve got it displaying correctly with the editor attached

but when the form is posted back (to be saved to a database), the text inside the editor is lost and does not get posted.

This is the markup of the <div> I’m using for the dialog:

<span id="ExcessiveDutyOfCareWordingDialogLink" style="cursor: hand;">View/Edit Wording</span>
<div id="ExcessiveDutyOfCareWordingDialog" title="Excessive Duty Of Care Wording">
    <asp:TextBox runat="server" ID="ExcessiveDutyOfCareWordingTextBox" 
    Text='<%# Bind("ExcessiveDutyOfCareWording") %>' CssClass="richText" ClientIDMode="Static" />
</div>

and the Javascript I’m using to initialise the dialog and editor, and then actually display it when the <span> is clicked:

$('#ExcessiveDutyOfCareWordingDialog').dialog({ autoOpen: false, height: 300, width: 400, modal: true, resizable: false, buttons: {
        Save: function ()
        {
            // This is from an earlier attempt to fix this problem
            // it may be a red herring
            tinyMCE.triggerSave();
            $(this).dialog("close");
        },
        Cancel: function ()
        {
            $(this).dialog("close");
        }
    }
});

$('#ExcessiveDutyOfCareWordingDialogLink').click(function () 
{
    $('#ExcessiveDutyOfCareWordingDialog').dialog('open'); return false; 
});

$('.richText').tinymce({
    // Location of TinyMCE script 
    script_url: '/Scripts/tinymce.3.4.5/tiny_mce.js',
    theme: "advanced",
    theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,cut,copy,paste,|,bullist,numlist,|,undo,redo",
    theme_advanced_buttons2: "",
    theme_advanced_buttons3: "",
    theme_advanced_buttons4: "",
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    width: "100%",
    height: "20px"
});

Can anyone suggest what I might be doing wrong to explain why I’m losing the text from the editor?

Answer 1

There is actually two problems with the sample code you provided:

1) jQuery dialog actually moves the DOM element (the <div> of your dialog) out of the <form> tag on the rendered document (you can confirm that by looking at the source of the page once it is rendered)

Unless you move the <div> back inside the <form> you will loose the value of the controls inside the dialog on postback.

To fix that, just add the following line of code after the .dialog function definition:

$('#ExcessiveDutyOfCareWordingDialog').parent().appendTo($("form:first"));

2) The “Save” button is rendered as a <span> which will not cause a postback when clicked. If you just want to trigger a postback, you can simply call form.submit() on the page’s form.

You code would look something like that:

$('#ExcessiveDutyOfCareWordingDialog').dialog({
    autoOpen: false,
    height: 300,
    width: 400,
    modal: true,
    resizable: false,
    buttons: {
        Save: function () {
            $('form:first').submit();
            $(this).dialog("close");
        },
        Cancel: function () {
            $(this).dialog("close");
        }
    }
});

$('#ExcessiveDutyOfCareWordingDialog').parent().appendTo($("form:first"));