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.
How do you force a Kendo grid to filter data after every character is typed, as in after every letter, not just when I press enter button?
I noticed that Kendo sends requests after every character typed, but without page size, and this request is used for autocomplete. I want to change that to bind this data not to autocomplete, but to the main grid instead.
I am using built in filters, one for each column.
Sorry for later response, I didn't have much time. Anyway as I mentioned in comment, this functionallity is not supported by Telerik. So you have to create everything by yourself.
In following example I have used filterMenuInit event which is fired after you click on filter icon (and only once!). In that event I have modified filter elements to add custom classes and ids. Then in jQuery I am catching keyUp events and adding items into filter.
Here is small example. I have implemented only equals filter, so you will have to do some modifications. But I hope it can help you in next work.
hi i've been using backbonejs for almost 2 years now and am just starting out on marionettejs with my first app at this website.
the reason for my question is that in my app i have a Layout with a 2 composite view rendered as dropdown list and table (which updates itself whenever we change the selection on the dropdown list).
what i did was for the "change" event on my dropdown list, i have an MyApp.vent.trigger() which i have a listener at the MyApp.addInitializer() function that updates the other compositeview (the table below the dropdown list). actually for the whole app i have almost 6 of this triggers inside itemViews and compositeViews and listeners are inside the addInitializer() for some of the other functions.
i just want to know if i did this right? or is this how dev in marionettejs normally is?
thank you
Yes, that's the recommended idea. However, you don't necessarily need to use the top-level vent attribute: each sub-app and view has their own (scoped) event manager. In addition, you don't necessarily need to add the listener in an addInitializer.
Here's an example (from my Marionette book):
trigger an event at the view scope: https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_view.js#L15 This uses the triggers hash, but you could also do this.trigger("my:event") from within the view, like here: https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_view.js#L29
listening to the events (and retriggering them if necessary): https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#L48 and https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#L38
Hope this helps !
I have read all the official documentation of jQuery 1.7.2, but I cannot find any detail about the 'beforechange' event (or something like that) which help me control some rules before allowing the element to change its value. Is there any plugins provide this handler?
Thank you so much!
The jQuery api doesnot provide the 'beforechange' event but instead provide great flexibility to write our own custom events. We can define our own custom events and can be triggered when the events is fired.
For example for input elements we can have onkeydown or onkeypress events and when fired we can trigger our custom events to control some rules.
The following link provides information for creating custom events. Its very simple and flexible.
http://scriptble.com/2009/05/custom-events-with-jquery
I'm using the jQuery Form plugin and more specifically the ajaxForm method to hijack a normal form and post it using ajax. I have a form with lots of rows. Each row has edit and delete options and each section has an add option. Hijacking the form I can work out on the server whether to add, edit or delete but would like the ability to know which button was pressed in the success method back in my JS. Is this possible?
I know there are two params: responseText and statusText and that I can work out the button type in beforeSubmit but I need it when the data is returned which button has been pressed. The reason is that I want to display a form in a light box for edit and add but for delete I want to do something different. It seems a bit naff to check the data coming back to look for a certain string (not to mention flakey and unmaintainable).
Anyone know of a simple solution?
Look at the beforeSubmit option: it's a function that will get called, well, before submit. More importantly, it provides the data. You could look at the data and set a flag that would then be used within the success function. This isn't beautiful, but better than being coupled to the server's behavior.
In this situation, I have often just created two different forms-- one for update and one for delete. Then, instrument them separately.