Im looking for a way to add a new row and keep the form data together with the Save button enabled, to have the chance to resend the same data already sent.
What im trying to achieve is to facilitate the submission of similar-but-not-equal rows. So, for example, if a merchant receives an order all of the same X product, but with slightly differences, he can keep the common fields after saving a product and only change the different properties to submit the next one, and so on.
Then the server will throw an error if exactly the same data is sent more than once.
As per our discussion I would refer to the following as an example of adding a custom button to the Add form:
How to add custom buttons to JqGrid add/edit forms?
as for saving the information you can use the the documentation as an example, I think the beforeSubmit event would work for saving the field data
In jqGrid 4.4.4, file jquery.jqGrid.min.js:
At line 279, after 'beforeSubmit' takes place, you will find the following statement: if(k[0]&&!b[d.p.id].processing), the second part of the test means something like 'if request is not being processed', then after the 'processing' variable is set to true, the request to the server is performed.
What prevents to resend data is that the processing variable is never set back to false 'afterSubmit' for example.
So, my solution was to do exactly that: b[d.p.id].processing=false; at the end of the if block performing the action, this is done on line 287, col 55.
This way i can resend slightly different 'products' and just let the server to manage errors.
I suppose it could be a bug in the library to not 'close' the processing state by setting back the variable to false.
Related
I have a grid with a method that calculates a value depending on different cells in the row.
I then set a specific cell to contain this value:
$("#gridID").setCell(rowid, "Cell_Name", myCalculatedValue);
I then want to finalize this by saving the value to the database but I cannot seem to find a method for this.
Basically what I want is
$("#gridID").saveCellToDataBase(rowid, "Cell_Name");
Since this cell is not the cell edited but a calculated value due to another cell being edited it's not saved by default.
I was hoping that methods that could solve my problem would be:
$("#gridID").jqGrid("saveRow", rowid, true);
or
$("#gridID").saveCell(rowid, "Cell_Name");
But none of these methods seem to do what I want.
If I understand correct you try to post a data to the server, but one (or more) field(s) is not editable and depend on calculation of other fields something like Quantity*UnitPrice.
As you know the not editable fields are not posted to the server and hence they can not be saved. In order to make this happen I see here two possible solutions.
Make the calculations at the server, without to post this value from jqGrid
Calculate the value in jqGrid and post it to the server
All of these have pro and cons, and I suppose that you can not make this calculation at server.
To post additional value to the server from editing depend on the editing method used - form edit, inline edit or cell edit.
Below I will describe a possible solution with inline edit and as exercise you will find it for other methods.
In jqGrid there is mechanism to post to post what you want to the server again with the edited fields. In our terms we name it serialization. This serialization happen before posting the data to the server and have different names depending on the editing module.
In case of inline edit this event is called serializeRowData and it is a grid parameter and not a parameter to the event.
In your case the code should like this:
$("jqGrid").jqGrid({
...
serializeRowData : function( data ) {
// suppose you have Qty and Unit field and want to post Total = Qty*Unit
if(data.Qty && data.Unit) {
data.Total = data.Qty*data.Unit;
}
return data;
}
Note the return at end of serializeRowData.
So this event execute every time you call saveRow, but this is well described in Guriddo documentation
The specific case I've got in mind is as follows: an AjaxFormComponentUpdatingBehavior("onchange") is added to a TextField in a form. The behavior verifies the text for certain conditions (either the model object or the form component model, doesn't matter), based on which it might display a message (or hide it, if it has already been shown).
The problem is, there are also validators added to the TextField. One of the possible (and likely) scenarios consists of the user typing in, first, a value that causes the message to be displayed by the AJAX request. If, then, he/she types in a value that doesn't pass validation, the message should disappear, but it does not.
Apparently, either the onUpdate() method for the AJAX behavior is not called at all, or I am failing in my attempts to insert a check for non-validated entries (I have tried to test for both null values and empty strings, to no avail; I have no idea what exactly Wicket's validators do to models when data is invalid).
I am wondering if someone who actually understands validators (or AJAX, actually) has any ideas on where the problem could be.
I can post edit and post code if someone tells me this is not a general issue tying validators and AJAX, but most likely a programming mistake. I still believe the former and thus I'll refrain from posting code sections, in order to keep the discussion on an API/theoretical frame.
Thanks.
When using an AjaxFormComponentUpdatingBehavior, if any of the IValidators fail their validation, onError() will be called instead of onUpdate(). Wicket will effectively prevent invalid user input from reaching the IModels in your components, so the component's ModelObject will not be changed at all. The invalid input will probably remain available by means of getInput()/getConvertedInput() (not sure if it will in an AJAX scenario, it sure is in a traditional form submission).
However, take into account that IFormValidators are not executed when using this mechanism. If you've got any, you might be interested in overriding getUpdateModel() so that AjaxFormComponentUpdatingBehavior will not bring maybe-invalid user input into your IModels, and set modelobjects manually when you're certain user input is valid.
Regarding your specific case, you could perform all the required logic in onError() (or rely on Models that will grab data from somewhere else), and just add the components that need refreshing to the AjaxRequestTarget. This is probably what's missing in your scenario.
Is there an existing library that would do this?
I want to be able to have code on the client side where the user chooses something, it makes a call to the server, and the server sends back "for this option, you need a have a text field called foo and a select field called bar with the following options, this one is selected, etc", and then the client side builds the next part of the form from that information. Or if they choose a different option, a different set of fields and values is returned from the server and populated on the screen. Also it might cascade so after the first selection we need a select field with some options, and then depending what they select on that select field the next field might be another select field or it might be a text input field.
Has anybody done anything like that? Is my best choice to have the AJAX call return some html that I just stuff into a div, or can I do it field by field and value by value?
If it matters, the back end is going to be written in Perl/MASON, and the front end will be using Javascript/JQuery/JQuery-UI.
I would use jquery and submit AJAX calls to whatever backend system you choose. Have this backend system compute the necessary changes and return the info as JSON. Let JQuery parse it for you and append the necessary form elements. However, it seems like under alot of use cases these decisions could be made on the client side without even talking to the server just as we pre validate form input before allowing posting to the server. I don't, however, have your requirements in front of me so I am sure there is a reason you want to get the info back from the server.
P.S. please do not return pure html from the back end to the client....ever.
On a webpage we have the following system of server side form validation. For example, if the user is adding date-details for an event (and an event can contain many such date-details), we call a javascript function on click of the 'Add' button like below.
validateForm('frmName','codelibrary/classes/myclass.php','validationArrName')
where:
#frmName = form name
#codelibrary/classes/myclass.php = location of class file, that contains classes and functions for server side validation
#validationArrName = Type of validation we apply
In the php script, validationArrName is defined as a list of keys (representing form fields) and values (representing the functions we will call to validate that form field).
validationArrName = array ('fieldName1'=>validationFun1,'fieldName2'=>validationFun2);
eg:
fieldName1 = email_address
validationFun1 = validateEmail()
On the html page, we call the server side validation through ajax as follows.
$.post(className,$("form[name="+formName+"]").serialize()+"&isValidate=1&validateArrayName="+validateArrayName,function(data){ ... });
If the validation function reports an error, we display an appropriate error message back on the html page.
The problem is that when we do this for the very first time (eg: after a hard refresh of the page), submitting this date-details form for validation takes a lot of time, as compared to subsequent requests.
We observed that instead of calling the codelibrary/classes/myclass.php file once, it actually refers to this file more than 10 times before jumping to the required location (validationArrName) and running that.
For subsequent requests, it works fine and refers to that file only once.
What could be the issue here? Could there be an issue with our usage of jquery submit ?
the best thing you can do is time stuff.
in javascript:
console.time('post load'):
$.post(className,$("form[name="+formName+"]").serialize()+"&isValidate=1&validateArrayName="+validateArrayName,function(data){
console.timeEnd('post load');
console.log('data');
...
});
in php, use microtime to time different part and echo them. they will be printed in the console.
It should not be cache or include related, as ajax starts a new connection each time.
Following your comments, I edit this answer:
I'm still at loss of what happens. However I see two possibilities. The first one is that you use a "flag" to validate forms or not. When you load the page, all forms flag are unset, and first submit check them all. Subsequent submits works correctly.
Another option is that the first time you submit a form, you dont event.preventDefault() on the submit click, but it's still a loosy explanation.
I would love to see how you call the $.post(...) function (how the submit button is binded, or how $().submit() is called).
Let's say you have an apex:form with ten apex:inputFields. All these fields are required and there are validation rules for all these fields that don't permit empty fields.
Given the error condition state of 10 empty fields, the default behavior of visualforce is that after you click on the submit button, it shows only one of the 10 errors at a time near the field location. This is done via the standard controller as it seems to throw an exception for the last error (as opposed to aggregating all the errors and then throwing the exception)
My question is then, how do you show multiple visualforce validation inputfield errors near their respective field locations instead of the standard one at a time? (which is annoying because you have to both fix the error and then click the submit button ten separate times!)
Yeah it's irritating, you'll need to use jQuery to get a neat solution. There's an article detailing the process here: http://developinthecloud.wordpress.com/2010/03/02/visualforce-form-validation-enhanced/.