I have a theory as to how to approach them, and was looking for some guidance on how to solve this problem and see if I am on the right path, because I am not sure.
I have a web app for a project I am building, and I have a database that I need to query for specific information. I have a search button that is attached to a function in my MainController, and I need to have my data passed on to my result.html file, which displays information from a ResultsController.
This is my theory for how to get this working using fake data, and an html request (which uses promises I imagine?)
for fake/test data, I stored an array with objects that represents JSON data in my services file that was basically the parent to ResultsController and MainController, and ResultsController would take in that information and display it on the screen.
For querying a database, my search function would search the database, and fill/replace the array in my services file with additional information. By virtue of changing that array of objects in my services, my results.html should pull down new data automatically when I click search, since the ResultsController has access to that same JSON data. (also, clicking search submits the query and then does $location.path("/results") after to get to the results page).
For querying a database and dynamically changing the information on a page, are these the right steps to submitting a request to a database in pulling information down upon each "search" request?
You are on the right track in using a service to share logic and data between the two controllers. This is generally seen as best practice - and it is better than the approach that is sometimes used of putting the logic and data in a parent controller, and using scope to access it in child controller.
The style guide linked to above is worth a read if you are looking for some guidance on best practice in setting up an angular app (https://github.com/johnpapa/angular-styleguide).
Related
I am building a library for listing products in a web application. It has to have filter, search and sort features. I have a web service that when called with filter, search and sort parameters can return the result set with all the those parameters applied. If page number is passed along with that, with number of products per page, it can return that specific page as well. It looks very much suitable to have the data populated through AJAX at client side using this web service. However the page will lose all the parameters (filter, search & sort) when clicking back button and coming back and the page will display the default list of products, as the URL will remain the same as below, irrespective of the filter or page or search or sort parameter
<domain>/productlist
. To retain them, I have to save these in sessionStorage or any other such mechanism. Will this be a violation of REST principles? Do I have to avoid AJAX and have the parameters always passed in the URL for the actions to be repeatable and abide by REST principles like
<domain>/productlist?filter=f1f2f3&search=apple&sort=price&order=1&page=3&items=10?
I may be wrong in understanding REST as well, as I am a bit new to this. So would like to understand better to have a proper & compliant design.
To retain them, there should have some better approaches instead of putting those params into session storage; one of the approach would be for every AJAX requests, pushing the search params into the window.history via window.history.pushState function, once user go back to previous page, all you have to do is check whether urlParams is filled with something or empty, and fetch the data according to the urlParams.
REST is a concept that how you should handle the requests throughout the frontend and backend.
AJAX is a method of fetching data from backend.
They could coexist therefore you could use AJAX and at the same time abide the statelessness of REST.
I want to load a new template page with data inserted via the previous call.
I have a list of items generated and they link to the general item page but without php all is lost.
I was thinking about using a href="page.html#itemid" then finding the item by querying the url.
Is this overthinking it? Any easier ways to do it?
I am assuming that on the current page, you have used AJAX to load all the data you need to display on the new template page, correct?
I can think of multiple ways to do this. It just depends on the nature of your data:
Have a popup instead:
You could have the new template page be a popup (instead of a real, separate page). Grey out the main page's content (via a darker, half transparent overlay) and then have this new popup div display the data you want. This is typically used on sites that want you to sign up for their newsletter, etc.
Pass the data via URL:
If you have very small amounts of data and it isn't sensitive data, you can just pass it through the parameters. Let's say page.html is the new page template you want to populate the data with. Then just have the link on the current page be page.html?itemid=123¶m2=Hi or something like that. Then, on page.html, make sure you have JS to read the parameters from the URL and display the data.
Pass the data via cookie:
Otherwise, you might just want to use JS cookies. Especially if you have a medium or larger amount of data. Store the data loaded from AJAX into cookies. If you are expecting the user to open multiple page.html templates at the same time, you might want to use an identifier and pass it to each one, such as page.html?itemid=1 and page.html?itemid=2 etc. Then have that page.html's JS look up the appropriate cookie based on the URL's parameter id.
Do be careful and use best practices if handling sensitive data.
Since I needed to customize my survey, I ended up using javascript to record most of my important responses. Firstly, if it's a "textarea" element that I'm using to record answers from the user, I am not able to save it as a response. So, I used Multiple Choice Question where each choice is populated by piping embedded data collected through textarea element. This way, I was able to see the answer as the recorded response. However, when I export is at CSV file, I don't get the data but just variable name ${e://Field/input1}.
I googled to see some examples that used survey flow to save the embedded data but in my case, these embedded data are generated dynamically in the process by the participants and setting value isn't possible in the survey flow.
I'm currently making an application for a client to automatically fill some web forms on the website he uses to store his item pricing. The website doesn't have a documented public API, and there doesn't seem to be a way to add bulk pricing on the website itself. In order to accomplish this, I'm making a simple python application that reads his data, then sends POSTs to the website.
Their website is giving me a hard time, however, because it's sending payloads containing dozens of fields, while the form used to enter the pricing information only has 4 input fields. On top of that, their website uses angularjs to generate most of the web page, so I can't just find the <form>[...]</form> block and look at what's being sent, because that's not what they use.
Here is what the payload json looks like:
{
"entities":
[
{
"Price_Line_ID":"{}",
"Price_List_ID":"{}",
"Item_ID":"{}",
"Uofm_ID":"{}",
"Amount":"{}",
"Dtstamp":"{}",
"Tenant_ID":"{}",
"Created_On":"null",
"Created_By":"null",
"Changed_On":"null",
"Changed_By":"null",
"Seq":"0",
"Begin_Qty":"0",
"End_Qty":"0",
"Customer_ID":"null",
"Tax_Before_Discount":"false",
"Discount_Target":"All",
"Max_Discount_Amount":"null",
"Min_Discount_Amount":"null",
"Customer_Name":"null",
"Uofm":"null",
"Item_Number":"null",
"Uofm_Schedule_ID":"null",
"Uofm_Schedule":"null",
"Inactive":"false",
"entityAspect":
{
"entityTypeName":"PriceLine:#SalesPad.Spo.Api.Model",
"defaultResourceName":"PriceLines",
"entityState":"Added",
"originalValuesMap":
{},
"autoGeneratedKey":
{
"propertyName":"Price_Line_ID",
"autoGeneratedKeyType":"Identity"
}
}
}
],
"saveOptions":
{}
}
The 7 values at the top (with values of "{}") are found when I do a GET or POST action on the website's other pages. I've managed to find where all the values originate from, except the "Price_Line_ID" one, because it appears to change from page to page (and it changes after a price is added).
I know a web page can get the data needed for a POST event either in its own html (when using tags like <form>), and it can get them from other GET and POST events. Is there any other way for a web page to determine a value that will be sent in a POST event?
I'm not very familiar with angularjs, although from what I understand it only creates a bunch of Javascript for the page. Does it offer different ways of determining what values are sent in a POST or GET event?
Edit: I've already tracked all responses from GET and POST events from logging-in to adding a price, the Price_Line_ID field changes from page to page, and adding the price appears to use an ID different to the one received in the GET event. I just want to know the different ways that a web page (specifically one using angularjs might use to determine the value of the data sent in POST events.
This is my situation: I have a web application, frontend written in AngularJS/HTML.
For the moment, I have 2 views (2 different HTML - pages).
I enter in the first view a serial number, which is passed on from the first controller to the controller of the 2nd view with the help of a service.
At the second view, I display some json-data, obtained from a Django API endpoint. When I refresh the page, this data is gone and the fields are empty...
In my case, this is not so user friendly, so I want to preserve the data (or serial number I pass on in the controller) to retrieve back the data or serial number after refreshing. Because after refreshing, the variable (the serial number) will be null in my service, so the json call will fail.
I've red many things on the internet already, but nothing is actually working for me. Does anyone have an idea?
If your second view is dependent on a value, this value could be the param for your view url, instead of sharing it through service. Pass on the param using either angular ui-router or built in ngRoute.
Here are helpful links:
https://github.com/angular-ui/ui-router/wiki/URL-Routing
https://docs.angularjs.org/api/ngRoute/service/$routeParams
You can use the $cookieStore service in angular and store the value in a cookie in the first controller, and get the value in the second controller.
$cookieStore.put("key", "value");
In, the second controller do,
$cookieStore.get("key");