i'm trying to implement an edit/add profile page which looks the following:
image upload component (Tomahawk t:inputFileUpload) with upload button
several input text fields
cancel and save button
As said, this form is used for adding a new profile as well as editing existing ones. At first, i used two elements, one for the text input, one for the upload component. The problem with this is, since the upload componenet does not support ajax/ partial rendering, the whole page is reloaded and any changes on the text inputs is lost. When i use one unified , the validation is triggered on the textfields when the upload button is pressed and the user is forced to fill out all the inputs first, before it is possible to upload an image.
My desired behaviour would be, that if the textinputs are unchanged, i can still upload the picture while changes are being applied to the backing bean and validated. Validation on unchanged/empty fields should only be triggered, when the final submit button is pressed. How can this be done? Any standard scenario/best practice methods for this or do i have to implement a valueChange Listener? Thank you guys in advance and kind regards!
Solved the problem, i wrote a custom validator and checked for the action that triggered the submission of the form using this:
ctx.getExternalContext().getRequestParameterValuesMap().containsKey("form:uploadButton");
Where ctx is the current instance of FacesContext. Maybe this helps someone, it is a workaround however it does the job.
Related
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.
I have used webshims for html5 form validation in a single page app with multiple pagelets(divs). The forms are not submitted but local javascript is invoked after each conversation and collected data is posted .
Next I iterate over all the fields and reset the values.
Then I take the new user back to the first pagelet having first form for the new conversation. This time even after filling the correct values the border does not turn green.
Note:
However when we select the field and click outside the field without filling it. and then after filling the correct data border turns green.
However when we tried to achieve it programmatically iterating over each field resetting it and using javascript focus method, that did not do the trick.
I am sure I must be missing some thing. would be able to point out what.
Regards
Barman
I'm not sure, what you want to achieve. I would need to see some code. If you change the value programmatically you can update the validation ui with the event refreshvalidityui on the form field. If you want to reset the ui, you can either trigger a reset event on the form or resetvalidityui on the form field
$('input').val('foo').trigger('refreshvalidityui');
or
$('input').val('foo').trigger('resetvalidityui');
or
$('form').trigger('reset');
Please let me know, if this helps.
I'm new to django, and I'm working on a quiz project. The idea is to create something similar to this (http://www.stylemint.com/quiz). Basically, there will be a question on each page and the user clicks on an image with the answer. I was planning on using a django form with a radio select input type, however, I'd like the image to act as the radio button (ie, be clickable) and also a click on the image will take you to the next question (instead of having to click submit after each). Is this possible with django, or do I need java?
it's perfectly possible - if you just want a series of images, and clicking on them to take you to the next question you might achieve that by:
Having multiple input fields of type "image" which all submit the form. If you go down that route you'll have to template the forms out yourself or make your own widget.
Using javascript to replace radio buttons with images dynamically. If you do that, it'd be a good idea to make it fall back to a straight list selection for people who don't have javascript.
Ignoring forms altogether and just using a view with a parameter of what the choice is.
Yes, it's completely possible. My suggestion is if you want to save the result in the db use model and model form in django. So, my next suggestion is you can customize model field for combine radio button functionality and image together. But actually you must programming and use a little jquery and javascript to do it.
You may want to see:
https://docs.djangoproject.com/en/dev/topics/forms/modelforms/
https://docs.djangoproject.com/en/dev/howto/custom-model-fields/
Currently, a spring application I am working on has several wizards that it is using with Spring's AbstractWizardFormController. During the early stages of development(pre-design phase), the type of "next" button did not matter.
Just to refresh, the Next and Back button are submit buttons with target attributes. So a next button on the first page of a wizard would look like the following.
<input type="submit" name="_target1" value="Next"/>
This is the standard way Spring does wizards on the view. This works fine, given that you want your Next button to be a standard HTML submit button. Otherwise, in my case, If I want a custom button, I am not sure how to do this. I know it is possible, but haven't found any documentation.
I imagine I will need to do a javascript submit, but I am not sure how to set the name of the button, of if something else needs to be done.
I just need to know how I can still extend AbstractWizardFormController, and use custom buttons.
When clicked, HTML submit button submits a form with additional parameter {name}={value}, that is _target1=Next. I guess the value doesn't matter here, controller looks at the name. So, if you want to emulate this with Javascript, you may, for example, dynamically add a hidden field with name = "_target1" before submit.
I just finished my first CRM callout, and it's working great, but it doesn't actually seem to take effect until the form that calls it is saved. It's a PreCreate deal that assigns a value to one of the attributes present on the form. Is there any way to get it to assign the new value and display it on the form as soon as you load it, or is this just the way it works?
You'd have to add some JavaScript to the onload event of the form and default any form fields that way. Callouts don't fire until after the save event happens, so they can't be used to default fields in the UI.