CODEWITHSUNDEEP
asp.netwebformstinymcejquery-ui-dialogformview
PhilPursglove
PhilPursglove

Reputation: 12589

TinyMCE Editor In a jQueryUI Dialog

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

enter image description here

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?

Upvotes: 1

Views: 880

Answers (2)

Thariama
Thariama

Reputation: 50840

As solex already stated the div-element gets moved around the DOM. Tinymce doesn ot like such movements and the editor instance will get scrambled leading to the loosing of your context.

Upvotes: 0

Solex
Solex

Reputation: 81

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"));

Upvotes: 2

Related Questions