I am trying to get the ckeditor working. Obviously it doesn't make use of the textarea so on submit the form doesn't submit the text in the editor. Beceause I make use of polymorphic associations etc. I can't make a onsubmit function to get the value of the textarea (when the form is submitted) .
So I found this question: Using jQuery to grab the content from CKEditor's iframe
with some very good answers. The answers posted there keep the textarea up to date. That is very nice and just what I need! Unfortunately I can't get it to work.
Does somebody know why (for example) this doesn't work?
I have a textarea (rails but it just translates to a normal textarea):
<%= f.text_area :body, :id => 'ckeditor', :rows => 3 %>
And the following js:
if(CKEDITOR.instances.ckeditor ) {
CKEDITOR.remove(CKEDITOR.instances.ckeditor);
}
CKEDITOR.replace( 'ckeditor',
{
skin : 'kama',
toolbar :[['Styles', 'Format', '-', 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', 'Link']]});
CKEDITOR.instances["ckeditor"].on("instanceReady", function()
{
//set keyup event
this.document.on("keyup", CK_jQ);
//and paste event
this.document.on("paste", CK_jQ);
}
function CK_jQ()
{
CKEDITOR.instances.ckeditor.updateElement();
}
I get the following "error" in my firebug.
missing ) after argument list
[Break on this error] function CK_jQ()\n
Before submit do:
for(var instanceName in CKEDITOR.instances)
CKEDITOR.instances[instanceName].updateElement();
have you figured it out?
I'm using CKEditor version 3.6.1 with jQuery form submit handler. On submit the textarea is empty, which to me is not correct. However there is an easy workaround which you can use, presuming all your CKEditor textareas have the css class ckeditor.
$('textarea.ckeditor').each(function () {
var $textarea = $(this);
$textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
});
Execute the above before you do your submit handling ie. form validation.
Thanks #JohnDel for the info, and i use onchange to make it update every change.
CKEDITOR.on('instanceReady', function(){
$.each( CKEDITOR.instances, function(instance) {
CKEDITOR.instances[instance].on("change", function(e) {
for ( instance in CKEDITOR.instances )
CKEDITOR.instances[instance].updateElement();
});
});
});
Combination of all of the above answers into one.
Create a new custom.js file and add this:
CKEDITOR.on('instanceReady', function(){
$.each( CKEDITOR.instances, function(instance) {
CKEDITOR.instances[instance].on("instanceReady", function() {
this.document.on("keyup", CK_jQ);
this.document.on("paste", CK_jQ);
this.document.on("keypress", CK_jQ);
this.document.on("blur", CK_jQ);
this.document.on("change", CK_jQ);
});
});
});
function CK_jQ() {
for ( var instance in CKEDITOR.instances ) { CKEDITOR.instances[instance].updateElement(); }
}
You don't have to worry about the name of the textarea, just add a class ckeditor in the textarea, the above and you are done.
ADD Function JavaScript for Update
function CKupdate() {
for (instance in CKEDITOR.instances)
CKEDITOR.instances[instance].updateElement();
}
It's work. Cool
Just Add
CKEDITOR.instances.textAreaClientId.on('blur', function(){CKEDITOR.instances. textAreaClientId.updateElement();});
where textAreaClientId is your instance name
Regards
CKEDITOR.instances["ckeditor"].on("instanceReady", function()
{
//set keyup event
this.document.on("keyup", CK_jQ);
//and paste event
this.document.on("paste", CK_jQ);
})
I just increase that to the response of T.J. and worked for me:
$("form").on("submit", function(e){
$('textarea.ckeditor').each(function () {
var $textarea = $(this);
$textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
});
});
On load:
$(function () {
setTimeout(function () {
function CK_jQ(instance) {
return function () {
CKEDITOR.instances[instance].updateElement();
};
}
$.each(CKEDITOR.instances, function (instance) {
CKEDITOR.instances[instance].on("keyup", CK_jQ(instance));
CKEDITOR.instances[instance].on("paste", CK_jQ(instance));
CKEDITOR.instances[instance].on("keypress", CK_jQ(instance));
CKEDITOR.instances[instance].on("blur", CK_jQ(instance));
CKEDITOR.instances[instance].on("change", CK_jQ(instance));
});
}, 0 /* 0 => To run after all */);
});
There have been some API changes with the latest versions of CKEditor, so here's an answer for CKEditor 5:
let ckeditor;
// Create a CKEditor, and store its handle someplace that you may
// access later. In this example, we'll use the `ckeditor` variable:
ClassicEditor
.create(document.querySelector("textarea"), {})
.then(editor => { ckeditor = editor; });
// When your form submits, use the `updateSourceElement` method
// on the editor's handle:
document.querySelector("form").addEventListener("submit", function() {
ckeditor.updateSourceElement();
});
To my knowledge, CKEditor does this automatically when you submit a form, so this particular example shouldn't actually do anything. But it is useful when you need the content of the textarea to udpate without submitting the form that contains it.
All above answer are focusing on how to fix this error but I want to take the answer on what cause me this error
I had a
<textarea class="ckeditor" rows="6" name="Cms[description]"></textarea>
changed to
<textarea class="ckedit" rows="6" name="Cms[description]"></textarea>
I changed class attribute value to anything other than ckeditor and boom error gone.
Hope that help
Related
I'm loading in a report and displaying it with jquery-ui in tab format. The report is returned by an ajax call in json, and a function is formatting it into HTML. Example code below:
<div id="reportdiv">
</div>
<script>
function displayreport(objectid)
{
$( "#reportdiv" ).hide();
$( "#reportdiv" ).html("");
$.ajax({
type: "GET",
headers: { 'authtoken': getToken() },
url:'/reportservice/v1/report/'+objectid.id,
success: function(data){
if(data == null)
{
alert("That report does not exist.");
}
else
{
var retHTML = dataToTabHTML(data.config);
$("#reportdiv").html(retHTML).fadeIn(500);
$(function() {
tabs = $( "#reportdiv" ).tabs();
tabs.find( ".ui-tabs-nav" ).sortable({
axis: "x",
stop: function() {
tabs.tabs( "refresh" );
}
});
});
}
}
});
}
</script>
This works fine the first time displayreport is called. However, if the user enters another value and runs displayreport again, the "tabs" format is completely lost (the tabs are displayed as links above my sections, and clicking on a link takes you to that section further down the page).
I figured completely re-setting the reportdiv html at the beginning of the function would bring me back to original state and allow it to work normally every time. Any suggestions?
After more testing, found that destroy was the way to go. If I've set up tabs already, run the destroy, otherwise, skip the destroy (http://jsfiddle.net/scmxyras/1/) :
if(tabs!=undefined)$( "#reportdiv" ).tabs("destroy");
Im using http://www.dynatable.com/ and there is a search input for filtering data. The problem is it works on hitting enter/losing focus etc and I want to use it on every letter change.
You can change dynatable to accomodate your needs. At line 1215 of jquery.dynatable.js(version 0.3.1), the search is performed on enter keypress. You may change this to keyup without waiting for enter key press.
Default Code:
$search
.bind(settings.inputs.queryEvent, function() {
obj.queries.runSearch($(this).val());
})
.bind('keyup', function(e) {
if (e.which == 13) {
obj.queries.runSearch($(this).val());
e.preventDefault();
}
});
Modified code:
$search
.bind(settings.inputs.queryEvent, function() {
obj.queries.runSearch($(this).val());
})
.bind('keyup', function(e) {
obj.queries.runSearch($(this).val());
e.preventDefault();
});
The following change to the jquery.dynatable.js code will do what you want, and will also update the results when the search input box is cleared with the "x" if you are using one. The reason the clear will also work is the event being used is "input" instead of "keyup" or "change", for reasons detailed in the documentation.
Unlike the input event, the change event is not necessarily fired for
each change to an element's value.
Original code
$search
.bind(settings.inputs.queryEvent, function() {
obj.queries.runSearch($(this).val());
})
.bind('kepress', function(e) {
if (e.which == 13) {
obj.queries.runSearch($(this).val());
e.preventDefault();
}
});
Modified code
$search
.bind(settings.inputs.queryEvent, function() {
obj.queries.runSearch($(this).val());
})
.bind('input', function(e) {
obj.queries.runSearch($(this).val());
e.preventDefault();
});
Note: Based off answer from nexuscreator. Very good answer, helped alot thank you.
worked for me :)
$search
.bind(settings.inputs.queryEvent, function() {
obj.queries.runSearch($(this).val());
})
.bind('keyup', function(e) {
obj.queries.runSearch($(this).val());
e.preventDefault();
});
Friends I have a problem
We need to make a user control that has the ability to delete itself, I made it but we did not clear the mechanism for removal, it should be tied to a nice picture. Code that is attached to the frame is given below, but not
$('#delete').bind('click', function () {
alert('test');
var urlA = '<%=Url.Action("DeleteMessage","Ticket")%>';
$.ajax({
url: urlA,
type: 'POST',
data: { idMessage:$(this).parents("div:first").find("input[name='MessageID']").val(),idticket:$('#TicketID').val() },
success: function (data) {
alert(data);
}
});
});
But when I write this, but to throw me to the homepage what's wrong
$('#delete').live('click', function ()
$("#delete").live("click", function(){
//code
$(this).remove(); //delete itself
});
If your image is declared as input type="image" then it will behave like a submit button and submit your page. You should prevent the default behavior of submitting the page by adding an event.preventDefault() or equivalent to your javascript function.
I have a form that pops up using jQuery, when I click on submit, the form submits and then the form is replace with a message. When i press close the popup box closes out. The problem that I am having is this, how can I remove the message that comes in after hitting submit back to initial state (which is the form itself).
This is what my code looks like.
<script type="text/javascript">
$(document).ready(function(){
$('#send').click(function(){
$.post('process.php', {option:$(".option").val(),picid:$("#picid").val() },
function(response){
var message = 'thanks';
$('#formMsg').html(message);
}
);
return false;
});
$('#close').click(function(){
$('#Container').fadeOut();
$("#formData")[0].reset();
});
});
</script>
You can have a message container inside form and show that when you want and hide result all content and vice versa. Try this.
$(document).ready(function(){
$('#send').click(function(){
$.post('process.php', {
option: $(".option").val(),
picid: $("#picid").val()
},
function(response){
var $msg = $('#msgContianer');
if($msg.length == 0){
$msg = $('<div id="msgContainer" />')
.appendTo($('#Container'));
}
$msg.html('thanks').show();
$("#formData").hide();
});
return false;
});
$('#close').click(function(){
$('#Container').fadeOut(500, function(){
$("#formData").show()[0].reset();
$('#msgContianer').hide();
});
});
});
Remove these two lines:
var message = 'thanks';
$('#formMsg').html(message);
You would probably want to cache the form in a variable, then after closing the form window, you would replace the HTML with the HTML from the cached variable. so your code would look like this:
<script type="text/javascript">
$(document).ready(function(){
// cache the formMsg selector and HTML
var formMsg = $('#formMsg'),
formHTML = formMsg.html();
$('#send').click(function(){
$.post('process.php', {option:$(".option").val(),picid:$("#picid").val() },
function(response){
var message = 'thanks';
formMsg.html(message);
}
);
return false;
});
$('#close').click(function(){
$('#Container').fadeOut();
$("#formData")[0].reset();
// replace the formMsg html with the html from the cached variable
formMsg.html(formHTML);
});
});
</script>
with the below code, I'm able to add a page fragment to an other page. The page contains a form to be posted to a certain action method.
$("#ul-menu a").click(function () {
$.get($(this).attr("href"), function (response) {
$("#dialog-div div").replaceWith($(response));
});
return false;
})
Instead of having the form anywhere in the page, I'd like to get it as a modal JQueryUI dialog.
How can I do that.
Thanks for helping.
This will work for you. Also, I've added a better method of preventing the original click. Instead of returning false, which kills all bubbling, you should use event.preventDefault();
$("#ul-menu a").click(function (event) {
event.preventDefault();
$.get($(this).attr("href"), function (response) {
$(response).dialog({ modal : true });
});
})
You don't even need to insert the response into the page.
You can just do this:
var myDialog = $(response).dialog();
EDIT
Not the above snippet won't create a modal dialog, I assumed you know you need to pass in { modal: true } as part of your configuration.