Hi, I have been using asp.net mvc3 with fluent validation. I have code to validate textarea in fluentvalidator. But have attached ckeditor in textarea.
The problem is:
After ckeditor is validated and error is shown and user rectifies error, user has to click submit button twice to submit the page.
for example, let's say textarea(with ckeditor) cannot be empty. If user leaves textarea empty and clicks submit button, the error in red is shown from fluentvalidation.
now user enters text in the textarea
now
on first click of the submit button, page doesn't gets posted, user has to click again and then page is posted as all the errors is rectified.
Can i have page postback on single click on submit button after user has rectified the error.
ckeditor is hooked to the submit event in order to update the textarea on postback. validation is also hooked, and running first. you need to force ckedit to update the textarea before the submit validation. see their api for how to force an update, then
either attach to the click events to force it or write a custom validator that call the api save before checking the textarea content.
Thank's for the reply. Your idea helped me to solve the problem. I started searching again on your idea and i came acorss this post on stackoverflow: http://stackoverflow.com/questions/924145/using-jquery-to-grab-the-content-from-ckeditors-iframe
Reading through the replies in this post and combined help from this post helped me solve the problem. From first reply and third reply, i sovled this. I am writing this so that if anybody else encounteres same problem, it will be helpful to them. Here is
the script i wrote:
$(document).ready(function () {
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].on("instanceReady", function () {
//set keyup event
this.document.on("keyup", function () { CKEDITOR.instances[instance].updateElement(); });
//and paste event
this.document.on("paste", function () { CKEDITOR.instances[instance].updateElement(); });
});
}
});
And included this in in the page and it is working fine.
But this solution doesn't work for multiple ckeditors in the same page.
If we include this in a page where there are multiple ckeditors, it only works for the last ckeditor
for multiple ckeditors, you have attach the events by taking the name of the indivisual instances
like this:
$(document).ready(function () {
CKEDITOR.instances["body"].on("instanceReady", function () {
//set keyup event
this.document.on("keyup", function () { CKEDITOR.instances["body"].updateElement(); });
//and paste event
this.document.on("paste", function () { CKEDITOR.instances["body"].updateElement(); });
//and cut event
this.document.on("cut", function () { CKEDITOR.instances["body"].updateElement(); });
});
CKEDITOR.instances["RennovDescription"].on("instanceReady", function () {
//set keyup event
this.document.on("keyup", function () { CKEDITOR.instances["RennovDescription"].updateElement(); });
//and paste event
this.document.on("paste", function () { CKEDITOR.instances["RennovDescription"].updateElement(); });
//and cut event
this.document.on("cut", function () { CKEDITOR.instances["RennovDescription"].updateElement(); });
});
CKEDITOR.instances["OnSiteActivtties"].on("instanceReady", function () {
//set keyup event
this.document.on("keyup", function () { CKEDITOR.instances["OnSiteActivtties"].updateElement(); });
//and paste event
this.document.on("paste", function () { CKEDITOR.instances["OnSiteActivtties"].updateElement(); });
//and cut event
this.document.on("cut", function () { CKEDITOR.instances["OnSiteActivtties"].updateElement(); });
});
});
Note, in above code the attaching of cut event is not necessary.
Although this solved the problem, it would be really good to have a generic solution.
nccsbim071
Member
24 Points
44 Posts
need to click twice for validation of ckeditor
Jun 10, 2011 11:09 AM|LINK
Hi, I have been using asp.net mvc3 with fluent validation. I have code to validate textarea in fluentvalidator. But have attached ckeditor in textarea.
The problem is:
After ckeditor is validated and error is shown and user rectifies error, user has to click submit button twice to submit the page.
for example, let's say textarea(with ckeditor) cannot be empty. If user leaves textarea empty and clicks submit button, the error in red is shown from fluentvalidation.
now user enters text in the textarea
now
on first click of the submit button, page doesn't gets posted, user has to click again and then page is posted as all the errors is rectified.
Can i have page postback on single click on submit button after user has rectified the error.
Thank's
nccsbim
bruce (sqlwo...
All-Star
36836 Points
5443 Posts
Re: need to click twice for validation of ckeditor
Jun 10, 2011 05:15 PM|LINK
ckeditor is hooked to the submit event in order to update the textarea on postback. validation is also hooked, and running first. you need to force ckedit to update the textarea before the submit validation. see their api for how to force an update, then either attach to the click events to force it or write a custom validator that call the api save before checking the textarea content.
francesco ab...
All-Star
20912 Points
3279 Posts
Re: need to click twice for validation of ckeditor
Jun 10, 2011 08:17 PM|LINK
TinyMce works better with asp.net Mvc see here: http://tinymce.moxiecode.com/
Mvc Controls Toolkit | Data Moving Plug-in Videos
nccsbim071
Member
24 Points
44 Posts
Re: need to click twice for validation of ckeditor
Jun 12, 2011 06:39 AM|LINK
Hi bruce,
Thank's for the reply. Your idea helped me to solve the problem. I started searching again on your idea and i came acorss this post on stackoverflow: http://stackoverflow.com/questions/924145/using-jquery-to-grab-the-content-from-ckeditors-iframe
Reading through the replies in this post and combined help from this post helped me solve the problem. From first reply and third reply, i sovled this. I am writing this so that if anybody else encounteres same problem, it will be helpful to them. Here is the script i wrote:
$(document).ready(function () { for (instance in CKEDITOR.instances) { CKEDITOR.instances[instance].on("instanceReady", function () { //set keyup event this.document.on("keyup", function () { CKEDITOR.instances[instance].updateElement(); }); //and paste event this.document.on("paste", function () { CKEDITOR.instances[instance].updateElement(); }); }); } }); And included this in in the page and it is working fine. But this solution doesn't work for multiple ckeditors in the same page. If we include this in a page where there are multiple ckeditors, it only works for the last ckeditor for multiple ckeditors, you have attach the events by taking the name of the indivisual instances like this:$(document).ready(function () { CKEDITOR.instances["body"].on("instanceReady", function () { //set keyup event this.document.on("keyup", function () { CKEDITOR.instances["body"].updateElement(); }); //and paste event this.document.on("paste", function () { CKEDITOR.instances["body"].updateElement(); }); //and cut event this.document.on("cut", function () { CKEDITOR.instances["body"].updateElement(); }); }); CKEDITOR.instances["RennovDescription"].on("instanceReady", function () { //set keyup event this.document.on("keyup", function () { CKEDITOR.instances["RennovDescription"].updateElement(); }); //and paste event this.document.on("paste", function () { CKEDITOR.instances["RennovDescription"].updateElement(); }); //and cut event this.document.on("cut", function () { CKEDITOR.instances["RennovDescription"].updateElement(); }); }); CKEDITOR.instances["OnSiteActivtties"].on("instanceReady", function () { //set keyup event this.document.on("keyup", function () { CKEDITOR.instances["OnSiteActivtties"].updateElement(); }); //and paste event this.document.on("paste", function () { CKEDITOR.instances["OnSiteActivtties"].updateElement(); }); //and cut event this.document.on("cut", function () { CKEDITOR.instances["OnSiteActivtties"].updateElement(); }); }); });
Note, in above code the attaching of cut event is not necessary.
Although this solved the problem, it would be really good to have a generic solution.