Multiple AJAX requests to populate form fields? - javascript

Let's say my Backbone.js-based web application has a form containing multiple drop downs, each containing a different type of data, populated via API data.
As I am using Backbone.js, my application logic lives entirely on the client side. Thus, I do not want to populate these drop downs via a typical server-side MVC approach of injecting data into the MVC view via the server side; instead, I want Backbone to retrieve data for these dropdowns.
So, my question is: To populate three different dropdowns, will I perform three different AJAX requests to my API? Example:
GET /categories/
GET /countries/
GET /vehicle/models
Or does it make sense from a RESTful perspective to combine these into some "meta" API method?

I think Backbone is pretty agnostic about this. If you don't mind making three requests, it's certainly okay to do so. If you want to make one call to your API that compiles all three groups of data together and returns them, to be processed on return that is totally legitimate as well.

Related

Django: fastest way to update the data that was once sent from template to view

I am working on an data visualisation app that will allow the user to filter the data that he sees by various criteria.
I want to keep as much logic as possible on Python/Django side, like this:
Data is passed from Django view to the template.
On the frontend, user filters the data through various controls: dropdowns, sliders etc.
The controls inputs are sent back to Django view (via AJAX post request?), which returns filtered data and sends it back to the template.
4.The template - the visualization - is updated with the filtered data.
Is this a good approach? My concern is that a lot of data will be flying around and the app might be unresponsive.
Another, possibly faster idea is to filter the data on client's side in JavaScript - but I would really like to leverage the great Python data munching libraries instead.
If you want to use DRF API, then go with it. A lot of websites have filtering features. I'd suggest you to take a look at django_filter package. It's possible to integrate it with DRF.
The worst thing in filtering data on client side is that you can't use pagination. Imagine that you have 500+ objects to filter, javascript filtering function is what really will make your app slow.
At the same time, if you have 20-30 objects to filter and this number won't grow up, then you can go with JS only and single endpoint: getAll()
Common approach is to set up javascript on_change handler and construct GET requests like(example from real project) this:
https://yourbackend.com/api/product/?status=not_published,published,inactive&search=132&moderation_status=declined,on_moderation,not_ready&ordering=desc&price_max=1000&page=1
DRF + django_filters will work just fine that, with minimum of your code
involved.
Well known pitfall on js side is to make request without timeout, eg user writes text and on every keyUP() event request being sent. Or he moves the slider and a lot of requests being made - you'll need to make request when users stop it, eg 300ms after he chosen value. See this question for reference.
Sure, there's one more point. Your database have to be normalised and have proper indexes. But you have to look at this side if you'll have really slow SQL queries.
Summing up: I'd choose thin js layer and do most of work on backend.

nodejs Architecture with multiple sets of data per page

Background Information
I am making a visual display system using NodeJS and Express that will get information from multiple sources, format them and display them as slides in a full page site on a TV in a reception within my school. I have 5 separate models that follow a similar pattern:
Connect to source
Collect data
Format data into an object
Return information
Question
What is the best way to handle the data from the models coming into the controller? I have 5 different sources, each one will take different amounts of time and I only want to start generating the html for the view once all 5 have returned information as I want to mix the information shown on the slides. Is the best way executing a passed callback function within the model rather than returning the data? If so, is it normal then to have 5 nested callbacks? What happens if one fails, will the entire operation fail?
Ideally what I want is to only execute the rendering function after all 5 sources have returned their information (or errored).

Multimple forms for one model backbone.js

The question is about managing models in forms on client with backbone.js
There is a model User on the server. It contains various fields:
Personal info
Name
Last name
Date of birth
Other info
About me (text)
My hobbies (text)
I have a single page application of settings. There are two forms on it: "personal info" form and "other info" form. I although have an api, that contains two routes to handle it - /api/user/<id>/personal_info, /api/user/<id>/other_info (it could be changed, it does not matter). I can PUT or GET info from these apis.
So I can't decide how to organize my backbone models right. Right now I have two models - UserPersonalModel and UserOtherModel, each of them has it's own api and I save them apart from each other.
Am I doing right or I shall rewrite it to one js model UserModel and call different save methods like .savePersonal and .saveOther? What is the best practice?
This question came here from ru.stackowerflow.com
Unless you're displaying multiple user forms at the same time and you'll have to do extra work mapping each other_info model with respective personal_info, I don't see any reason to combine those two as single model.
Especially since you have two endpoints, it's easier to have them as separate models, you can have separate view controlling each forms with respective models as well.
Combining the models will probably create nested attributes, then you'll have to manage that as well (Using plugins like deep model).

Filtering PDO and MySQL queries with JS/jQuery

Sorry for my ignorance on the lack of knowledge I have on this subject however I cannot find an answer to my question anywhere.
So I have this MySQL table:
Feed_ID Vehicle_ID FullRegistration Colour FuelType Year Mileage Bodytype Doors Make Model Variant EngineSize Price PreviousPrice Transmission PictureRefs ServiceHistory PreviousOwners Description FourWheelDrive Options Comments New Used Site Origin V5 Condition ExDemo FranchiseApproved TradePrice TradePriceExtra ServiceHistoryText Cap_ID
As you can see each column will contain vehicle data.
I have displayed all of the results in the database using PDO onto my front end, all data is displayed in a listing style similar to Ebay.
Now I need to filter these results however I have noticed that many result filter systems are using JS.
Here are some examples so you get a better idea of what I am talking about:
http://www.autotrader.co.uk/search/used/cars/
http://www.motors.co.uk/search/car/
As you can see all the filters are using JS however I am having a problem understanding how JS is filtering the MySQL query?
I know this question might be a little broad but can someone show me an example of how JS can filter PDO results just like the examples I have shown?
Thanks
The first one uses what I suspect to be a combined method of Javascript and a server-side language (it's hard to prove, because I can't see the server-side code involved). For simplicity, I'll assume this server-side language is PHP, though it could easily not be.
Basically, all Javascript is doing on the first website is setting cookies and telling you to refresh the page. Once you refresh, PHP fetches the cookies that Javascript set and filters the results from the MySQL query based on those cookies.
Now, the second one is actually filtering using Javascript, yet at the same time still using PHP (again, it could be any server-side language).
This is a method called AJAX. It is a function built into Javascript which allows you to fetch another page from Javascript (aka. send and receive an HTTP request).
The reason this is useful is because once you've changed an option on that page, Javascript can send an HTTP query using AJAX to something like "http://www.motors.co.uk/search/getcarinfo.php?transmission=manual", allowing PHP to fetch a new dataset from MySQL and return it to Javascript (this probably isn't the API entry point that they use, but it has to be somewhere in their Javascript).
Once Javascript receives the response from that page (usually in JSON or XML form), it can modify HTML to update what's shown on the page.
To answer your question directly, Javascript doesn't filter the data. MySQL filters the data based on a PHP query, which returns its response to the Javascript. Then, Javascript just puts it on the screen.

Can I access my requestScoped JavaBean-objects both client side and server side?

Short Version:
In a java web app, I can set javabean objects as requestscoped parameters, and access detailed fields, even hierarchical, within these objects through i.e. JSTL/EL while building a website.
Can I in any way access the full extent of these JavaBeans, in i.e. javascript-functions that are fired on, for instance, onclick of some elements within my web page?
Long version:
I am making a java web-app, and I am trying to learn the basics, so I am not using any frameworks like Spring or Struts, but I am building the app by the front controller pattern.
I have a page, which should be able to create new, recieve, edit and/or finally update data in my database. The database has foreign keys, and my choices in the editor should depend on the number of elements of other linked tables in the database.
I would like my editor to be able to:
Create the editor menu based on secondary tables of the database (static until leaving the site)
Load data from a database-element
Edit data in html-elements
Undo changes (which is basically repeating step 2, if data is available still)
Save data, and reset editor.
Point 4 is the center of attention here. I wish to be able to do step 4 without reloading the whole page. If I am able to do this, I figure step 2 should also be executed client side, as it does the same thing, only first time. It feels like a setup like this will grant me a good seperation of creating the form itself server side, and let step 2-4 happen client side, until step 5 again requires server side action.
I am not sure how to approach this goal though, or if it is a good idea. It is only a problem, when data is loaded from the database, and I want to store that data client side. Right now I am building the form in jsp/html/jstl, and I am using requestScoped java objects to do it, through a HttpServletRequest-object from the Servlet Controller. I have been trying to use these objects in javascript functions, with limited success. I have been able to extract all data, even hierirchal object's fields, except those in collections. Unfortunately these are essential to my editor page.
I have been looking into JSON for this, but is seems like i need to do big adjustements in my java code to implement this. Is it worth it?
finally, to repeat the question: How can I access requestScoped JavaBean-objectdata to be available client side, in i.e. Javascript?

Categories