Reset tinyMCE box after submit - model-view-controller

Question

i have the follow MVC View
#model Site.SupportItems.SiteAditionalInformation
#using Site.Helpers.Extenders;
#{
Response.CacheControl = "no-cache";
}
<div>
#using (Html.BeginForm("SaveSiteAdditionalInformation", "Support", FormMethod.Post, new { #Id = "frmSiteInformation" }))
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Site Aditional Information</legend>
<div class="site-PO-footer-outline-left-comment">
<div class="site-item-outline">
<div class="site-label-left ui-corner-all">
#Html.LabelFor(model => model.Office)
</div>
<div class="site-detail">
#Html.DropDownListFor(x => x.Office, Model.Offices.ToSelectList("ValueSelected", "DisplayValueSelected", Model.Office))
#Html.ValidationMessageFor(model => model.Office)
</div>
</div>
<div class="site-item-outline">
<div class="site-label-left ui-corner-all">
#Html.LabelFor(model => model.AdditionalInformation)
</div>
<div class="site-detail">
#Html.TextAreaFor(model => model.AdditionalInformation, new { #Class = "ui-site-rtb" })
#Html.ValidationMessageFor(model => model.AdditionalInformation)
</div>
</div>
</div>
<p>
<input type="submit" value="Save" id="btnSubmit" />
</p>
</fieldset>
}
<script type="text/javascript">
$(function ()
{
var thisTab = $(Globals.ActiveTabId());
var previousSelectedOffice;
$('#Office', thisTab).click(function ()
{
previousSelectedOffice = $('#Office', thisTab).val();
}).change(function (e)
{
var setNewContent = function ()
{
$('#loading-Panel').Loading('show');
$.ajax('#Url.Action("GetSiteSpecificText")', {
data: { Office: $('#Office', thisTab).val(),
rnd: Math.random() * 10000
},
cached: false,
success: function (response)
{
if (response != null)
{
$('#AdditionalInformation', thisTab).html(response);
}
else
$('#AdditionalInformation', thisTab).html('');
$('#loading-Panel').Loading('hide');
}
});
};
if (tinyMCE.activeEditor.isDirty())
{
$('<div/>').text('The Text has changed for the Additional Information. Would you like to save?').dialog({
title: 'Text has Changed',
buttons: {
'Ok': function ()
{
$('#loading-Panel').Loading('show');
var beforeSave = $('#Office', thisTab).val();
$('#Office', thisTab).val(previousSelectedOffice);
$('#frmSiteInformation', thisTab).trigger('submit');
$('#Office', thisTab).val(beforeSave);
setNewContent();
$(this).dialog('close');
},
'Cancel': function ()
{
$(this).dialog('close');
$('#Office', thisTab).val(previousSelectedOffice);
}
}
});
}
else
{
setNewContent();
}
});
$('#frmSiteInformation', thisTab).submit(function ()
{
tinyMCE.triggerSave();
var data = $('#frmSiteInformation', thisTab).serializeObject();
$('#loading-Panel').Loading('show');
$.ajax($(this).attr('action'), {
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(data),
success: function (data)
{
if (data.SaveResult)
$('<div/>').text('Save Successful for' + $('#Office option:selected', thisTab).text())
.dialog({
title: 'Save Successful',
buttons: {
'Ok': function ()
{
$(this).dialog('close');
}
}
});
$('#loading-Panel').Loading('hide');
}
});
return false;
});
});
</script>
</div>
and while most of it is doing what i expect if i change the dropdown i want to clear the RTB back to nothing (or the response value if there is one from the DB)
while this is working if i change the dropdown again the tinyMCE.activeEditor.isDirty() is always coming back as true when i believe it should be false.
i have tried tinymce.execCommand('mceToggleEditor',false,'AdditionalInformation');
but this only reloads the first RTB
and also tinymce.execCommand('mceRemoveEditor',false,'AdditionalInformation');
which causes an error.
if anyone could point me in the right direction i would really appreciate it.
thanks.
Edit I have solved the problem i am having using the mceRemoveEditor command
the function call for setNewContent is as follows
var setNewContent = function ()
{
$('#loading-Panel').Loading('show');
$.ajax('#Url.Action("GetSiteSpecificText")', {
data: { Office: $('#Office', thisTab).val(),
rnd: Math.random() * 10000
},
cached: false,
success: function (response)
{
tinymce.execCommand('mceRemoveEditor', false, 'AdditionalInformation');
if (response != null)
{
$('#AdditionalInformation', thisTab).html(response);
}
else
$('#AdditionalInformation', thisTab).html('');
tinymce.execCommand('mceAddControl', false, 'AdditionalInformation');
$('#loading-Panel').Loading('hide');
}
});
};
Thanks for the help.