I cant type text into editor

2 posts, 0 answers
  1. Michael
    Michael avatar
    66 posts
    Member since:
    Dec 2009

    Posted 19 Mar 2014 Link to this post

    I'm using the editor and its in a jquery ui dialog, and I can't type text into the editor.

    I call this function to open the jquery ui dialog:
    function openSendEmailWindow(checkedArray) {
    debugger;
    $.ajax({
    cache: false,
    url: '/SendEmail/Email',
    data: { checkedRecords: checkedArray.toString() },
    type: "GET",
    success: function (response, status, jqXHR) {
    //debugger;
    if (jqXHR.responseText) {
    //debugger;
    $("<div id='sendEmailWindow' style='display:none' title='Send Email'></div>").appendTo(".body-content");
    $("#sendEmailWindow").html(response);
    $("#sendEmailWindow").dialog({
    position: ['top', 60],
    width: 1300,
    height: 625,
    modal: true,

     close: function (event, ui) {
    $(this).dialog('destroy').remove();
    }
    });
    }
    },
    error: function (jqXHR) {
    //debugger;
    alert(jqXHR.statusText);
    }
    });
    }

    This is my partial view:
    <div id="windowWrapper">
    @using (Ajax.BeginForm("Email", "SendEmail", new AjaxOptions() { HttpMethod = "Post" }, new { id = "sendEmailForm", role = "form" }))
    {
    <div id="commandBar">
    <span style="line-height:2em; margin-left:0.125em">
    <button type="submit" class="k-button k-button-icon"><span class="k-icon k-update"></span></button>
    <button type="button" onclick="closeSendEmailWindow(event);" class="k-button k-button-icon"><span class="k-icon k-cancel"></span></button>
    </span>
    </div>
    <div id="windowContent">
    <br />
    @*@Html.AntiForgeryToken()*@
    @Html.ValidationSummary(false, "Please correct the errors and try again:")
    <div class="container-fluid">
    <div class="row">
    <div class='col-md-12'>
    <div class="form-group">
    @Html.LabelFor(m => m.Subject)<br />
    @Html.TextBoxFor(m => m.Subject, new { @class = "form-control" })
    @Html.ValidationMessage("Subject", "*")
    </div>
    </div>
    </div>
    <div class="row">
    <div class='col-md-12'>
    <div class="form-group">
    @Html.LabelFor(m => m.Message)
    @(Html.Kendo().EditorFor(m => m.Message)
    .HtmlAttributes(new { @class = "form-control", style = "height:400px" })
    )
    @Html.ValidationMessage("Message", "*")
    </div>
    </div>
    </div>
    <div class="row">
    <div class='col-md-12'>
    <div class="form-group">
    @Html.LabelFor(m => m.Attachment)<br />
    @(Html.Kendo().Upload()
    .Name("Files")
    .HtmlAttributes(new { @class = "form-control" })
    )
    @Html.ValidationMessage("Attachment", "*")
    </div>
    </div>
    </div>
    </div>
    @Html.HiddenFor(m => m.CheckedRecords)
    @Html.HiddenFor(m => m.Attachment)
    </div>
    }
    </div>

    <script type="text/javascript">

    function closeSendEmailWindow(e) {
    this.parent.$("#sendEmailWindow").dialog('close');
    }

    $(document).ready(function () {

    //for kendo numeric textbox to enable validation
    $.validator.setDefaults({
    ignore: ""
    });

    $.validator.unobtrusive.parse("#sendEmailForm");

    $('#sendEmailForm').submit(function (e) {
    debugger;
    e.preventDefault();
    $.ajax({
    cache: false,
    url: '@Url.Action("Email", "SendEmail")',
    type: 'POST',
    data: $(this).serialize(),
    success: function (response, status, jqXHR) {
    debugger;
    if (jqXHR.responseText == '') {
    $('input:checkbox').each(function () {
    this.checked = false;
    });
    checked = {};
    checkedArray = null;
     $("#sendEmailWindow").dialog('close');
    }
    },
    error: function (jqXHR) {
    debugger;
    alert(jqXHR.statusText);
    }
    });
    return false;
    });

    });

    </script>


  2. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 21 Mar 2014 Link to this post

    Hello Michael,

    Please check if setting the content after initializing the dialog:
    $("#sendEmailWindow").dialog({
        position: ['top', 60],
        width: 1300,
        height: 625,
        modal: true,
     
        close: function (event, ui) {
            $(this).dialog('destroy').remove();
        }
    });
    $("#sendEmailWindow").html($("#template").html());
    or if calling the refresh method:
    $("#sendEmailWindow").html($("#template").html());
    $("#sendEmailWindow").dialog({
        position: ['top', 60],
        width: 1300,
        height: 625,
        modal: true,
     
        close: function (event, ui) {
            $(this).dialog('destroy').remove();
        }
    });
     
    $("#Message").data("kendoEditor").refresh();

    resolves the problem. The dialog will move the element to the <body> which will cause the editable iframe to be reloaded by the browser and the content will become not editable.

    Regards,
    Daniel
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top