Question

I’m trying to post a form that contains an instance of tinyMCE editor to an action method using AJAX. My View:

<script src="@Url.Content("~/Scripts/tinymce/tiny_mce.js")" type="text/javascript"></script>

<div>
    <fieldset>
       @using (Html.BeginForm("SubmitNewTRForm", "LaboratoriesOrdersGrid", FormMethod.Post,
            new {enctype = "multipart/form-data", @id = "newTrUploadForm" }))
            {
                <div  style="overflow: hidden;width: 763px; height:312px;  border: black solid thin;">
                      @Html.TextAreaFor(model => model.TestSummary, new {@class="TestSummaryEditor"})
                </div>
             }

    </fieldset>
</div>

In the same view I instantiate the editor:

    $(document).ready(function () {
        tinyMCE.init({
            directionality: "rtl",
            width: "760",
            height: "300",
            language: 'fa',
            // General options
            mode: "textareas",
            theme: "advanced",
            plugins: "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
            // Theme options
            theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect,|,sub,sup,|,charmap,iespell,advhr,|,print,|,fullscreen",
            theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,cleanup,|,insertdate,inserttime,preview,|,forecolor,backcolor,|,insertlayer,moveforward,movebackward,absolute,|,blockquote,pagebreak,|,insertfile,insertimage,|,visualchars,nonbreaking,template",
            theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,ltr,rtl,|,cite,abbr,acronym,del,ins,attribs",
            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            theme_advanced_statusbar_location: "bottom",
            theme_advanced_resizing: true,
            // Skin options
            skin: "o2k7",
            skin_variant: "silver",
            add_form_submit_trigger: false,
            // Example content CSS (should be your site CSS)
            content_css: "css/example.css",
            // Drop lists for link/image/media/template dialogs
            template_external_list_url: "js/template_list.js",
            external_link_list_url: "js/link_list.js",
            external_image_list_url: "js/image_list.js",
            media_external_list_url: "js/media_list.js",
            // Replace values for the template plugin
            template_replace_values: {
                username: "Some User",
                staffid: "991234"
            }
        });

    });

ANd my AJAX call:

        $("form").live('submit', function (e) {
            tinyMCE.triggerSave(true, true);
            e.preventDefault();

    var form = $("#newTrUploadForm");
            if (form.valid()) {
                    $.ajax({
                        url: '@Url.Action("SubmitNewTRForm")',
                        data: form.serialize(),
                        type: 'POST',
                        error: function (xhr, textStatus, exceptionThrown) {
                            $("#errorDIV").html(xhr.responseText);
                        },
                        success: function (data) {
                            if (data.success) {

                            }
                            else {

                            }
                        }
                    });
                }
        });

And my AJAX call always returns an error whenever the tinyMCE editor is on the form, removing tinyMCE solves the problem, but why is this happening? I know this issue has been addresses on SO a couple of times already but I’ve tried all the proposed solutions and none seem to work for me, plus those solutions are somewhat outdated. During serialization in my AJAX call, i get this error:

[MissingMethodException: No parameterless constructor defined for this object.]

Any ideas?

Answer 1

The error I posted and the tinyMCE problem happen to be totally unrelated. The tinyMCE problem was fixed by saving the contents after preventing the default action of the button click, basically changing my AJAX call from:

   $("form").live('submit', function (e) {
        tinyMCE.triggerSave(true, true);
        e.preventDefault();

to:

   $("form").live('submit', function (e) {
       e.preventDefault();
       tinyMCE.triggerSave(true, true);

and the form serialzed properly and the conents of teh editor sent to the action flawlessly.

Totally irrelevant to this question, but that error posted was caused by setting my model property’s type as SelectList and the form posting a SelectListItem.