The text in ckeditor field is not sent when submitting forms for the first time (only on the second time, third time, etc).
For example, If try to create an article's post and submit the form I'll get a validation error: 'The field body is required'. If try to submit again (for the second time or third time), It will work well.
The real problem is when editing! For example, when editing a form the field 'body', among others fields, is filled out with the data from the database. In other words, there are already text in the ckeditor field.
If I try to submit the form for the first time it will not update the body because the text in the ckeditor is not sent; what is sent is the default value (the old article's body, which was filled out with data from the DB).
Therefore, it won't edit unless I get a validation error in other field (if I get a validation error, I'll have to submit again, and that will work).
How to solve this problem? Is this an known bug in CKEDITOR 4? If I don't solve it the users will feel frustrated if they have to submit the form at least twice to edit or to create an article.
Here is a list of plugins I'm using (may be useful to solve the problem):
a11yhelp, about, api, autocomplete, autocorrect, browser, clipboard, colordialog, copyformatting, crossereference, dialog, div, docprops, find, googlesearch, image, link, liststyle, magicline, mathjax, openlink, pastecode, pastefromword, preview, quicktable, scayt, section, showblocks, sourcedialog, specialchar, table, tableselection, tabletools, tabletoolstoolbar, texttransform, widget, wsc
By the way, I downloaded ckeditor using ckeditor builder in their official website.
I opened this issue in GitHub and a guy figured out the problem. His proposed solution worked wel!! Here is what he said:
Workaround
As the issue is more tricky to fix than it seems, for now I propose a
simple workaround: invoke ajaxRequest not on $( document ).ready,
but rather on editor's loaded event:
CKEDITOR.replace( 'editor', {
on: {
loaded: function() {ajaxRequest();}
}
});
Explanation of the issue
The issue is connected with how DOM listeners are registered for given
element:
The order of event listeners for a particular event type will always
be:
The event listeners registered with addEventListener() before the first time the event handler's value was set to non-null
Then the callback to which it is currently set, if any
Finally, the event listeners registered with addEventListener() after the first time the event handler's value was set to non-null.
In case of CKEditor 4, the value of the form's element is modified by
editor._attachToForm private method, which adds event listener to
form's submit event:
ckeditor-dev/core/editor.js form.on( 'submit', onSubmit );
However this listener is added on loaded event, which is fired
asynchronously when editor is loaded – so after registering
synchronous onsubmit handler with the validation logic. This way
editor's field is updated after validating.
Proposed solutions
Update editor's element on formdata event. This way we would have
total control over data being submitted and we would be sure that
correct data is set before submit event. The problem with this
solution is the fact that browsers' support is non-existent; the event
will appear in Chrome 77, however it is still not known if and when
the support will appear in Firefox or Safari.
Update editor's element on every change in the editor's content thanks
to change event. This solution will also fix cases, where some other
scripts are using value not from the editor, but directly from the
replaced textarea – they would get fresh data more often then only
after submitting the form. However this solution requires #1364, which
connects with a pretty big refactoring.
NOTE: AjaxRequest is the function I was using to submit the form togehter with Jquery.
We have global p:messages defined in tempate with autoUpdate set to true.
This is the place where we are shwoing all the messages from included content.
On one of the pages we have panel with save button. User fill in some fields and after succesfull save we need to:
1. Display succes message
2. Fill in automaticly other fields on same page based on saved data
So in the bean we are adding FacesMessage , set data based on saved object and rerender those other fields.
Unfotunatly those fields have some value change listeners attachted to them. So we end up with two ajax requests. First from the save button and second from the value change listnerer defined on one of the auto filled fields. The result is that succes message appear for short amount of time (it dissapear after second ajax). How can we keep this message after second ajax without setting auto update on messages to false?
Thanks for any adivce.
P.S. We are using primefaces 3 so ignore autoUpdates is not an option :(
I have a jqGrid in my page and I want to know when does the resize event occur. Will it occur when I refresh the page? If not, what event occurs when the page containing the grid is refreshed. I would like to capture the event to alter it's width when the page is refreshed.
A page refresh causes a postback, so jQuery/jqGrid events aren't really going to detect a refresh so much as the page loading.
Depending on your goals, I would suggest either the jQuery .ready() method or the jqGrid gridComplete() method to handle grid resizing any time someone opens or refreshes the page.
Which one you use will likely depend on whether the actual data that the grid receives is going to influence how large you want to set the grid.
If the data doesn't matter and you just are concerned about the size of the browser window, I would use .ready() and pre-populate your grid configuration with the appropriate size.
If the data does matter, you'll probably want to use the gridComplete method on your jqGrid.
If you want to be able to adapt your grid size when the user resizes the browser, see this answer: Resize jqGrid when browser is resized?
This question might be a bit specific since it invovles a specific type of grid called RadGrid from Telerik.
I have a RadGrid with 5 columns with the EnablePostBackOnRowClick set to true, but I only want the RowClick event to be executed on 3 grid cells, I don't want this event to be executed on the fisrt and last cell (column), is there anyway to disable the RowClick event from being triggered when you click on these particular cells? Is there a way to limit the RowClick event to just the 3 cells/columns in the middle?
Take a look at this Telerik demo: Grid Cell Selection
If you specify an OnCellSelected client method, you could check which column the cell belongs to, then send an AJAX request back to the server (if if it's one of your 3 columns) and put your remaining logic in the server-side AJAX request handler method. I'm not sure if the server-side ItemCommand method can detect which cell you clicked on, but try that first, and if it doesn't work then the AJAX route would suffice. Also, you need at least the 2012 build of RadControls.
This is the markup for setting the appropriate settings:
<ClientSettings>
<ClientEvents OnCellSelected="cellSelected"></ClientEvents>
<Selecting CellSelectionMode="SingleColumn"></Selecting>
</ClientSettings>
I have to validate a couple of fields in the CA grid every time a record is updated/added. The grid is used in the callback mode. What i cannot figure out how to do is cancel the callback if a cell is invalid. I am trying to do this 'onBeforeUpdate' event of the grid. I can call set_cancel(true) to cancel the update. But this will change the row mode from edit to display and i will lose all entered data. What i am trying to do is leave the row in the edit mode when any cell in that row is invalid. One of the things i have thought about but haven't done yet is attempting to change RunningMode to Client, validate the record, and set the RunningMode back to Callback when i'm ready to submit? Any suggestions are very appreciated. Thanks!
Turns out there is a method on the cancel event that allows to leave the row in the edit mode.
eventArgs.set_continue(true);