This is a migrated thread and some comments may be shown as answers.

I cant type text into editor

1 Answer 195 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 19 Mar 2014, 04:23 PM
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>


1 Answer, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 21 Mar 2014, 01:38 PM
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.

 
Tags
Editor
Asked by
Michael
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Share this question
or