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

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.

Related

How to make an API endpoint in Laravel, that can be used to search any table we want?

Background
Let us consider a hypothetical scenario. Suppose we have five different tables in our database,
Customers
Categories
Products
Orders
OderDetails
Our client wants us to add a search bar to the frontend, where a user can search for a specific product and upon tapping the search button, matching products has to be displayed on the frontend.
My Approach for Tackling This Problem
In order to add the aforementioned functionality, I came across the following strategy.
๐Ÿ‘‰ I would add an input box to ender the product name and a submit button.
๐Ÿ‘‰ Upon pressing the submit button, a GET request will be sent to the backend. On the query parameters, the product name that has been entered by the user will be included
๐Ÿ‘‰ Once the GET request is received to the backend, I will pass it down to the ProductsController and from within a method defined inside the ProductController, I will use the Product model to query the products table to see if there are any matching results.
๐Ÿ‘‰ If there are any matching results, I will send them to the frontend inside a JSON object and if there aren't any matching results, I will set a success flag to false inside the JSON object and send it to the frontend
๐Ÿ‘‰ In the frontend, if there are any matching results, I will display them on the screen. Else, I will display "No Results Found!"
Problem with My Approach
Everything works fine if we only want to search the products table. But what if, later our client tells us something like "Remember that search functionality you added for the products? I thought that functionality should be added to orders as well. I think as the list of orders by a user grows and grows, they should be able to search for their previous orders too."
๐Ÿ‘‰ Now, since in our previous approach to search products was implemented in the ProductController using the Product model, when we are adding the same functionality to Orders, WE WOULD HAVE TO DO THE SAME THINGS WE DID IN THE ProductsController AGAIN INSIDE THE OrdersController USING THE Order model. It does not take seconds to understand that this leads to duplication of code.
Problem Summary
โ“ How do we add an API endpoint in laravel for a search functionality that can be used to search any table in our database and get results, instead of the search functionality being scoped to a specific controller and a corresponding model?
A good start would be to create a trait called something like searchable and add it to all the models you want to search and put any shared logic between the different models in there. Possibly you'd want to manually allow different columns so in each model you have an array of searchable columns which you'd refer to in your trait.
Your controller would have to point to the related model and call a method in the trait that searches.
As others have pointed out this is a high level question so I won't go too much in detail. Of course there are a million ways to implement this, just try and keep shared logic in place.

Laravel multiple models in controller

This question regards the structure of applications when using laravel.
I have a view for making a sale/purchase from a company. This single view contains a client search, product list, service list and a staff list. Each of the items listed above has their own model. In the view, i would say search for a client which will call a function within the controller and populate a list. Same for the products and services etc etc.
What confuses me is that for the client search i would click a button that would fire to a url like /clients/search/search string, which would return the array of clients to display on the page. This function seems as if it would be appropriate within the client controller. I am unsure as to how i would be able to maintain the information from the client search and other parts of the sale to then submit it all together under one single controller (let's call it InvoiceController).
Can controllers share the functions from other controller? Do i simply store the information in a session variable? Do i simply put all relative functions to this sale under the InvoiceController?
Thanks for any help!
I would do a search for clients against the client controller, then when you select the client add this (client_id) to your invoice form. then save this with other invoice info via the invoice controller
After much deliberation, it appeared that AJAX was the simplest answer. In this case i used Angular JS and had that running a controller to fetch each segment of the Invoice, then use the main InvoiceController in Laravel to fire the final update.

creating a form field populated by a relationship in Laravel 4

I am trying to build a form for a Happening. The Happening references a Places table by place_id.
e.g. happening "OktoberFest" has a place_id 123 which corresponds in table Places to Mรผnchen
These are the relationships declared in the models:
For model Place:
public function happenings()
{
return $this->hasMany('Happening');
}
For model Happening:
public function place()
{
return $this->belongsTo('Place');
}
model Happening has a place_id field linking it to Place.
I am also using {{Form::model($happening, array('route' => array('happenings.update', $happening->id)...}} as form opening
Problem 1: how to create a {{Form::text('......')}} that will be properly prefilled with Mรผnchen when editing the happening Oktoberfest ?
Problem 2: I was trying to get that field to work as an ajax autosuggest (i.e. starting to pull suggestions from the Places table as soon as 3 characters have been entered). I have checked a few implementations but they don't seem to mix correctly with Problem 1
To try and solve Problem 1, I have tried the solution here
Laravel 4 Form builder Custom Fields Macro
but I was unable to make it work.
Long question, it's my very first on stack overflow, please be patient :)
If a Happening is linked to Place via the column 'place_id' you have to supply an id to save in your model/table.
There are a couple of ways that I can think of:
make a list of availble Places in a radio of select, the name will be 'place_id', the value the id of the Place en something like title for the value.
instead of displaying radio's or a select a textfield with autocomplete is a great solution if you got a lot of places. I won't go into detail how to implement it but the general idea is to autocomplete the typed in placename and on selection of that place to put the id of that place in a hidden field named 'placed_id'
After saving the form save your model with the posted place_id
(and check that id if it's valid and existing, never trust user input )

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

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.

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