I have the formwizard plugin integrated with an 8-step form; The problem is, whenever I'm trying to edit information and then jump to an specific step in the form so basically jumping ignoring previous steps, all steps that were not shown (cuz I jumped them) are not sent!!! :( so losing all data already populated into those fields.
For example,
$("#demoForm").formwizard("show","Step4");
This will trigger Step4, but if I am at Step1 and havent seen Step2 and Step3, and jump right into Step4.. then the plugin ignores those Step2 and 3 so when my processing script will process empty data. I would like to know how to notify the plugin that there are steps that were now shown in order to submit those values.
Note: I'm not using Ajax for this.
This is where the settings are:
$("#demoForm").formwizard({
formPluginEnabled: false,
validationEnabled : true,
disableUIStyles : true,
textNext: "Siguiente",
textBack: "Anterior",
textSubmit: "Guardar",
focusFirstInput : true
},
{
messages: { email: "Invalid email"}
},
{
// form plugin settings
}
);
Jumping to an specific step like this...
$('#gotostep').change(function(){
if($(this).val() != '')
{
$("#demoForm").formwizard("show",$(this).val());
return false;
}
});
..same thing happens if I try to force a submit changes on any steps using: $("#demoForm").submit(); :/
Thanks in advanced!
Frank
I guess it should suffice to enable all disabled input elements in the form when the form is submitted? Do this e.g. by hooking up a callback to the forms submit event like this:
$(function(){
var form = $("#demoForm");
form.submit(function(){
form.find(":input:disabled").removeAttr("disabled");
})})
Hope this helps.
Related
I'm using commitMode="Immediate" and I'm trying to disable my save button when any input is invalid.
What is the recommended approach to achieve this?
I understand that I can just set a variable when using "manual" mode from my component, but I can't find any event that represents a change in validity of preferably the complete Raddataform (otherwise of a single property) when using Immediate validation.
You can do this by listening for validation events and then updating your model.
From this example, add the propertyValidated listener:
<RadDataForm #propertyValidated="onPropertyValidated" ...></RadDataForm>
Then change your state:
methods: {
onPropertyValidated({ object, propertyName, entityProperty }) {
this.$refs.button.enabled = !entityProperty.isValid;
}
}
You will probably want to keep track of all validations in this case, or you could use the complete dataform.hasValidationErrors().
This is the NS-Vue solution, but totally applicable in Angular.
Add a #propertyValidated="onValidateForm" event listener that triggers on each validation. Then you can use hasValidationErrors() on the form to see if the form is valid. The only trick is that is has to be wrapped in a setTimeout(), like so:
onValidateForm(event) {
setTimeout(() => {
this.validated = !event.object.hasValidationErrors();
console.log("form valid: " + this.validated);
}, 100);
}
For a complete solution, see this playground.
I have a field like this:
{
render() {
return <Field type="text" onChange={this.debouncedSubmit} />
....
}
debouncedSubmit = debounce(this.props.submit, 500)
}
export default reduxForm({
form: 'week-form',
onSubmit: async function() {
await new Promise(resolve => setTimeout(resolve, 5000))
}
})
This works fine except for one issue. We see here submission takes 5 seconds. We see also that deboucne is 500ms. So lets say user typed in two characters, then waited 1sec. The debounce triggered and submission is in process. Now while submission is in process, lets say user inputs another character. This triggers debounce, and at time 1.5sec it triggers submit. However because submission is currently in progress, this one gets missed.
Is there a pattern with redux-form to not miss this?
What I tried:
I thought to "reinitialize" the form, but "do not update field value if current field value differs from value it is about to initialize with", and then in componentDidUpdate if form is dirty, then I would trigger submit again. However Im running into a problem:
I set in reduxForm:
enableReinitialize: true,
keepDirtyOnReinitialize: true,
And I initialize the form with data. However after the first submission, for some reason it overwrites the field and I lose the "third character" i put in while submission was going on. Why is this happening when I set keepDirtyOnReinitialize to true.
So actually my logic above works. I created a demo here on the web and it works perfectly:
https://codesandbox.io/s/37z9217q6
The problem is I am doing this in react-native on Android and there is a bug there that is causing this problem for me, I filed the bug - https://github.com/facebook/react-native/issues/19085
I have a form with elements that may be contained within collapsed accordion divs. When someone submits the form and the unobtrusive validator catches an error on one or more of these "hidden" form elements, I want the collapsed accordion to open so they can see their errors.
After doing a little research, I found a suggestion here, Using unobtrusive validation in ASP.NET MVC 3, how can I take action when a form is invalid? which says to make my own unobtrusive adapter. So I did, it is here:
$.validator.unobtrusive.adapters.add(
'collapsevalidation',
function () {
var tabs = $('.collapse').not('.in');
//console.log("tabs.length: " + tabs.length);
$(tabs).each(function () {
if ($(this).has('.field-validation-error').length) {
id = "#" + $(this).attr('id');
//console.log("id: " + id);
$("[data-target='" + id + "']").collapse('show');
}
});
}(jQuery));
The adapter plugin has been added to my page and now I am trying to figure out how to "hook" it in but I cannot seem to do so. So far I have added the following to my page:
jQuery.validator.unobtrusive.adapters.add("collapsevalidation");
This however does not seem to be working. When I produce an error on submit, the console.log lines to not write.
I understand that this is a custom adapter because it does not apply to a specific element and does not return anything, like a bool.
Can someone help complete this, please. Thanks!
While I did not find an answer directly to the above, I did get my desired result using the following:
$("form").bind("invalid-form.validate", function () {
//My code here
}
I have an AJAX / prototype related question. I have an AJAX call currently placed inline, in the onclick (i promise i'll move it out of there :) event, looking like this:
onclick="var pn = $('yards').value; $('inventory').update('Working...');
new Ajax.Updater('inventory','ajax.php?ac=checkInventory&productID='.$someproductid.'&yards='+pn,{method:'get', evalScripts: true, asynchronous: true, onComplete:function(tr){$('inventory').update(tr.responseText);}});"
File called ajax.php then gets the data from $_GET[], displays a small text input field. When filled in and clicked on a submit button, it calls a function which reads the relevant data from the file, and prints a result on the screen. The purpose of all this code is inventory check.
So, when a user clicks on the "get inventory" button with the onclick defined as above, everything works nice, the user fills the yardage, the right result pops up, everybody happy. But what makes it less usable is the fact that in case a user wants to do another inventory check, the entire page needs to be refreshed. If it's not, then when clicking on "get inventory" button, the user will be getting the same result of the last check again, not the text input field.
So, my question is, how do I make that after one inventory check, the whole thing sort of resets itself so that the next time a user clicks on "get inventory" button, he'll be offered to fill the text input field again, and hence get the new result.
I'm sorry if I didn't make myself clear enough. I'm very new to AJAX and prototype, and this is my colleague's work I need to finish...Thanks!
Ah I see,
I don't think Ajax.Updater works like that; have a look at the doc:
http://www.prototypejs.org/api/ajax/updater
new Ajax.Updater({ success: 'items', failure: 'notice' }, '/items', {
parameters: { text: $F('text') },
insertion: Insertion.Bottom
});
var pn = $('yards').value;
$('inventory').update('Working...');
new Ajax.Updater('inventory','/ajax.php
,{
parameters: { ac: 'checkInventory'
, productId: /*put productId here*/
, yards:/*put yards here too*/
}
, method:'get'
, evalScripts: true
, asynchronous: true
, onSuccess: function(tr){
//try an alert(tr.repsonseText); just to see what you get back
$('inventory').update(tr.responseText);
}
});
Things to try:
Clear the text input field before your repopulate it when the onComplete event fires in your ajax.updater call.
Alert the response to make sure your getting a different response from the server.
*Use Fiddler to make sure your passing in a different productId
Change onComplete to onSuccess
Hope this helps
Since you've promised to move the code out of the onclick handler do:
var inv = $('inventory');
inv.update('Working...');
new Ajax.Request('ajax.php', {
method:'get',
parameters:{
ac:'checkInventory',
yards:$('yards').value
},
onSuccess: function(response)
{
inv.update(response.responseText);
}
});
I have a delete button. which on click it should visit a url like /delete/{id} and once the response from that url is true. i want to delete the comment box like in facebook.
I wont add any extra than Leo's comment, but I will explain with some code. Presume that you are using jQuery...
$(document).ready(function(){
$('tr a.delete').live('click', function(e){
e.preventDefault();
var link = $(this);
$.get($(this).attr('href'), null, function(response){
if(response == 'ok'){ //you should invent how to get 'ok' or other string identifying that the deletion is successful.
link.parents('tr').remove();
} else {
alert('There is a problem while deleting this element');
}
});
})
});
if you put this code on your project it will handle all links which had .delete class and are in a table row.
There are two things which you should do:
You need to pass some string in
order to detect if the operation is
successful or not. In my example I
would print "ok" on success
deletion.
If your table has pagination, it wont
rebuild the table, while it just
will remove the row from the table.
and if you have let's say 5 rows per
page and you delete all of them the
page will remain empty while there
will be other records in the table.
That's why instead of removing the
tr I would reload the whole page.
In that case the code for successful deletion will look like this:
if(response == 'ok'){
$('#content').load(window.location);
}
The script is not optimised, but it will give you the ideas how to achieve your ideas.
HTH
So write an onClick event handler in your view, a php delete method on the appropriate controller called by the event handler and a javascript action to perform when the ajax call returns success.