Modeling a form with an Auto-Suggest Lookup in Backbone.js - ajax

I have report UI with a small form at top where the user looks up a person by name using an Auto-Suggest textbox, and I set a hidden ID field when they select one. They then enter a start and end date, and hit submit to load a report below. The report data is fetched using the Person's ID, and the date range as a Backbone route. I can also show the person's name in the report header since I have it from the Auto-Suggest lookup.
The problem is, if someone bookmarks a report (a nice feature to have), I'd like to repopulate the form (which shows the person's name) and the report header.
So, currently I have one route ('id/startdate/to/enddate') that sometimes is triggered by an already populated form model, and sometimes is triggered by a bookmark/refresh and needs to repopulate the form model from route data and server-side data.
How would you model this? I was going to have a model bound to the form:
{ id: 234, name: 'Bill', startDate: '1/1/2011', endDate: '1/1/2012' }
But I am struggling with this idea of sometimes needing to fetch the name and populate the form, and sometimes already having a populated form (and name). Feels like there should be a better design for my Backbone views/models/routes.

You can populate your Model from the router by triggering a message with the name, startDate etc parameters that the Model will listen to.
The same thing can be done in the View that sets the data on the Model. So, regardless of where you get the information from (View, Router), your Model would correctly hold the state.
Then your Form View could listen on changes to its Model, re-rendering itself with pre-filled information on Model change.
Hope it helps.

Related

Load data from the model into form fields through AJAX in Symfony2. Right way

In my application I use two entities.
1) City
2) Shop
They have a relationship one-to-many
For example:
- Barcelona:city
-- Decathlon:shop
-- Salewa:shop
- New York:city
-- Puma:shop
-- Nike:shop
First step:
Via the dropdown list the user selects a city:
It raises the event by changing the value of the list. At this point the javascript code must request and obtain all the stores for the selected city.
Second step:
Show the second drop-down list with the values of stores for the selected city.
Ok. Now my questions:
1) How to make a request to the data model? (I am interested not so much JS code but backend architecture. Should I do API or rather request data from the controller to the same page?)
2) How should look the part of code implements the class of this form?
1) Request. The best way is a JSON response via a separate controller. Everything is very simple here.
2) Form. This question is more interesting. The City dropdown should be a not-mapped field of City Entity. The Shop field should be a simple Shop entity field with no choices if you don't have default city in your form ('choices' => array() in field options), or make it select all default city shops by the query_builder option. When you get a response from the backend after selecting a city, just append all possible options to the shop dropdown which consist a shop ID as their value.
There are many schools of thought about implementing this but I am personally a big fan of sending the whole relation to the view and managing the switching with javascript, so something like this would do:
return $this->render('YourBundle:Controller:index.html.twig', array(
'cities' => $cities_with_shops_json,
'form' => $form->createView(),
));
The javascript part is just capturing the event but there are many examples in google.
http://javascript.about.com/library/bldydrop1.htm
One advantage of this is avoiding the ajax call every time the user click on the select.

Spring MVC update field based on calculation

I have page with spring form fields.
They're bind using command.
Couple of fields in form need to be update based on calculation from other fields.
Those fields can be modified by user.
How can I do that?
I think about trigger java calculation in model using onchanged in web page. But I don't know how access methods from model and how read fields from page.
I notice, that field are update by setter when page is submit. This is too late if I want calculate 'live' when depending fields are changing.
If you need these calculations to be done on server (java model)... I suggest to use input's onChange event as you said, send values with AJAX to server and calculate there, returning the result to client again for update UI in real-time.
With this approach, you will get the 'live thing' you are wondering for.

Joomla 2.5 - custom registration field not remembering values

Im using custom profile plugin found at http://library.logicsistemi.it/images/joomla/plg_user_testprofile.zip
I have created several fields, both, optional and required and they all work. But there is a tiny problem.
When I enter some value in that custom fields and submit the form it can happen that some fields dont pass validation (which is good). However values entered are cleared and I must fill all the fields from the beggining.
Demo: http://goo.gl/eH1G2
Enter some (not all) data under the 'legend' named User Registration
Enter some (not all) data under the 'legend' named Company
Informations
Press Register button
Error message will pop in. -
Data entered in the User Registration will be saved
Data entered in the Company Informations (which are custom fields)
will not be saved.
If all required fields are entered, form will submit data to database
(which is ok).
I want that data in the Company Informations are saved, so users dont have to type in all over again.
The problem in your demo is on the template you are using.
For some reason it gives Javascript errors. These errors blocks the Javascript client side validation and your form is submitted with invalid data.
If you want only server side validation you can modify the onContentPrepareData function in your plugin by loading posted information from the user state. To do this you have to permeform a different action when user_id is not set under "Merge the profile data." comment.
I think next week I will write a new tutorial on http://library.logicsistemi.it to explain this. For now try to fix your Javascript code.
Regards

Magento - custom form

I have a form, which at the moment is a simple HTML based one, that doesn't do anything.
What I'm looking to do though, is to be able to send an email once the form has been submitted and also save the data to the database.
The problem comes, with the email sending. In the form, there is a drop down menu. The menu items are items in my suppliers model/module, which have a name and email address.
So, when I select Supplier A, the form passes validation, it needs to send Supplier A an email and save the details (this shouldn't be too hard).
I'm just not sure how I'd get the email address.
Would I need to pass some kind of parameter to a custom sendEmail() method?
All help appreciated.
Thanks
UPDATE:
Ok, so before I do the email part, I'd like to store the data in the table, named test drive.
I've created the module in the admin and a form to submit data from on the frontend end.
But I cannot seem to get the data to insert.
All help is welcome
Thanks
For sending email see this Mage_Contacts_IndexController::postAction() action or
Mage_Sales_Model_Order::sendNewOrderEmail()
If You created module with model, you can get instance of that model, insert data and then save it or You can create ResourceModel and then execute SQL.

Model Data Type versus View Control

I have having a little trouble wrapping my head around the design pattern for MVC when the data type of the model property is very different than what I wish to display in a form. I am unsure of where the logic should go.
Realizing that I am not really sure how to ask the question I think I will explain it as a concrete example.
I have a table of Invoices with a second table containing the InvoiceDetails. Each of the InvoiceDetail items has an owner who is responsible for approving the charge. A given invoice has one or more people that will eventually sign off on all the detail rows so the invoice can be approved. The website is being built to provide the approval functionality.
In the database I am storing the employee id of the person who approved the line item. This schema provides me a model with a String property for the Approved column.
However, on the website I wish to provide a CheckBox for the employee to click to indicate they approve the line item.
I guess my question is this -- how do I handle this? The Model being passed to the View has a String property but the form value being passed back to the Controller will be of the CheckBox type. I see two possible ways...
1) Create a new Model object to represent the form fields...say something like FormInvoiceDetails...and have the business logic query the database and then convert the results to the other type. Then after being submitted, the form values need to be converted back so the original Model objects can be updated.
2) Pass the original InvoiceDetails collection to the View and have code there create render the CheckBox based on the value of the String property. I am still not sure how to handle the submission since I still need to map back the form values to the underlying database object.
Maybe there is a third way if not one of these two approaches?
To make the situation a bit more complicated (or maybe it doesn't), I am rendering the form to allow for the editing of multiple rows (i.e. collection).
Thanks for any insight anybody can provide.
You need a ViewModel, like #Justn Niessner suggests.
Your controller loads the complete model from the database, copies just the fields it needs into a ViewModel, and then hands the ViewModel off to the view for rendering.
I'd use Automapper to do the conversion from Model to ViewModel. It automates all the tedious thingA.x = thingY.x; code.
Here is an additional blog post going over in detail the use of ViewModels in the Nerd Dinner sample.
I believe what you are looking for is the ViewModel.
In cases where you are using a ViewModel, you design the ViewModel to match the exact data you need to show on your page.
You then use your Controller to populate and map your data from your Model in to your ViewModel and back again.
The Nerd Dinner ASP.NET MVC Example has some very good examples of using ViewModels.

Resources