I have been asked to design an "intelligent home" website based on an API provided. I have "Rooms" (actual rooms in a house) and "Devices" in each room.
I have a page (HTML file) "Rooms" which contains a list of all the availabe rooms in the API. I have another HTML file named "RoomX" which is the "template" for all the rooms. It has a list of all the devices in the specified room.
I don't know how to "create" and link new "Room" pages every time I add a Room to the Rooms list. Example: I added "Room 1" as a room in the API and as an element in the page "Rooms". I click on it, and right now, it takes me to my "RoomX" page. I want to create "copies" of that "RoomX" page; so that when I click on the new room I created, I can access a page that has the selected room title and its devices.
The creation and deletion of rooms is dinamic, so I would need to create these pages depending on the user's needs. I am only just starting to use HTML, CSS and JS (I am using JQuery on my page), so I would appreciate an extensive explanation.
Thanks!
What I understand is that you have an API ready and they asked you to design the front end? or are you supposed to design everything?
if the API is already made please go back to it and look for the specification, Usually the response is going to be a JSON.
example:
let's say that to get all available rooms > yourwebsite.com/rooms
to get one room, for example room 1 > yourwebsite.com/rooms/1
if that was made for you already, all you need to make is the UI + use jquery AJAX to get the json response and display it
if nothing was made then pretty much doing it dynamically with html is impossible. What you need to do then is:
pick any RESTful API framework and learn it if you don't know one already
make a restful api that generates json responses
make the UI using either front-end frameworks or by classic html, css and js
Related
I am building a website with an articles page, and on the home page we have a featured article (The most recent one). When we upload a new article, we would like the one on the home page to update automatically.
So what I need to do, is use a JS function on page load, to then search the articles file for the article with the most recent date, and pull the data from this element and use it on the home page.
Are you going to have lots of articles published ? What is the frequency ?
In any of the case if you build simple API for retrieving articles then you can achieve your goal using below.
create a lighweight API to give you latest details about articles for e.g. HEAD /{category}/articles this might return latest articles ID.
Compare from step1 what articles Id you have retrieved before.
If from first step you get latest articles Id then fire another API to get article data using /{category}/articles/{articleId_retrieved_from_step2}
you can perform above steps in standard frequency based on your need using standard AJAX or simple polling frameworks. Refer this for more details https://javascript.info/long-polling
I will recommend to use SSE (Server Sent Event) which work without page refresh and continuous check the latest data in the database.
Please check the below link
https://www.w3schools.com/html/html5_serversentevents.asp
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.
Currently I'm working on a project where a user enters a lot of data constantly for a hour long window. I'm looking to have one user control all the data via some control panel and then have a link they can distribute to other users that will allow them to view that data without the ability to edit it.
Right now I'm doing some extremely weird methods. I have an XHR request on the control page that fires whenever a field is finished being edited. From there the data is sent to a php file that converts the data into a simple text file. Then the distributed link file will load that file one time and translate it into the necessary format.
Some potential problems I've run into are it seems odd that I'm sending starting as javascript data then going to a php file then to a text file then translating the data all the way back into javascript data again. Another problem I've come into is I'm not sure of a way to force users to reload the page when a field is edited in the control panel after the user has opened the view page.
Have I totally gone overboard here? What are some better concepts I could employ to accomplish this task?
If i understand what you want to do this is how i will do this:
First the data entry
if you have lot of fields you better use a form wizard, i don't have a particular one in mind right now but there is lot of them just search jQuery Form wizard
Here is an example:
http://i.stack.imgur.com/Luk2b.jpg
The concept of the form wizard is to guide user via multiple page and also validate the data. And click save when and the end.
Then save date in database.
Display content
All you need to do is to create a global separate page to display your content.
Let see something like: http://yourserver.com/view/{id}
where id is the identifier of the particular row in your database.
i'm not sure if i totally understand what u about to do. i'm trying to make your work description shorter here:
want to build a website that one person can edit a single page's content in 1 hour, and others can view the content change in that 1 hour.
if this is what u want to build, here's the module:
teacher: the one who can edit the page
student: the one who can only view the page
server: information center
teacher client edits page -> teacher client sends update data to server -> server saves data -> server sends update notice to student client -> student client receives update notice -> student fetches update data from server
to make this module work well, i suggest try socket instead of http reqeust, just like online games or IMs do.
well, try socket.io
i want to populate this json http://www.godsgypsychristianchurch.net/music.json using a get request, there are multiple level's data which i would like to have parsed using jquery and using some hidden div's (this json hold's music from multiple church's in different cities)
the idea of the parsing is this
Cities>Albums>Tracks>Div with Mp3 Link/Player
detailed explaination
Church
with the string church i'd like to list firstly a list of cites which you click on and then the string
Album is to populate & list each album for the selected city (while hiding the city list)
once a album is selected the string
tracks is to be populated and listed (again while hiding the album list)
once a track is selected id'd like to have a hidden dive which links to the mp3 (which will have to be combined with the baseurl string to complete the url, but once i can get to this div i am capable of creating the template for it, it just parsing the nested json in that type of manner thats the problem..
please help and if you would please include full code (i get very confused when just a snippet of code is shown, and JSfiddle is a big help too, i know it's asking a lot but i really need some help, thank you in advance
to get more of a idea of what i am trying to do, go to you can download the iOS app from the app store "GGCC MOBILE" I'm basically trying to duplicate that but for the website http://www.ggcc.tv
i've rewritten the JSON format and got it working in Sencha touch http://www.ggcc.tv/app/STNL the rewritten data is here http://www.ggcc.tv/app/data.json but the problem with that is scrolling with a mouse, ST would require you having to click and drag in order to scroll, i can't seem to find a way to disable is, so i'm asking for your help in parsing this data for our website without using sencha touch, thank you very much for all your help, time and effort.
"Populating Nested JSON from remote data" is worrying.
Think of it this way :
Web page issues a .getJSON() request (or its $.ajax() equivalent).
Remote server application receives the request.
Script on the remote server responds to the request by retrieving data from database and composing a data structure (deep-object or deep-array or a combination of the two).
Script on the remote server JSON-encodes the data and sends it back to the client in its response.
Client receives the response and jQuery automatically JSON-decodes it into a javascript data structure that mirrors the server's original data structure.
Exactly what you then do with the data is up to you and your application building skills, which, as a byproduct of the exercise, will be honed to perfection.
We are developing a page with GWT that has a list view and selecting an item it opens a detail with ajax style, there is no refresh in the page and a new view is shown in the client. When that detail is shown( or accessed directly by its url), the meta tags for the Open Graph are set in the header. That detail is our Open Graph object.
The problem is that setting meta tags by code (even at the beginning of the onModuleLoad method) doesn't work because Facebook doesn't detect them when a user performs an action and Facebook thinks that the page is not an Open Graph one. We suppose FB reads the page directly without executing any javascript.
Any ideas or workaround with that?
Thanks in advance.
You'll need to this server-side, with a handler that takes an object id from the query string or path, and does two things:
write out the correct tags for facebook.
'deep-link' into your GWT app to show the detail view for the
object.
So for URLs like:
http://myapp.com/og/?type=movie&id=1234
http://myapp.com/og/?type=film&id=6789
The HTML output should have all the tags for the object specified, and it should launch your GWT app with a 'bookmark' or some other info it needs to navigate to the detail view.
Each object needs its own permanent, distinct URL. So when you pass it to the facebook API, facebook can 'crawl' it, and they can publish it as a link in news feed stories etc. (so machine readable, and shows the relevant content for non-machines!)
It should pass the test here:
http://developers.facebook.com/tools/debug
Some more recent information to refer to:
Put the OpenGraph tags in your server side HTML rendering, like detailed here:
http://www.gwtproject.org/articles/dynamic_host_page.html#servlet
Since Google considers AJAX crawling deprecated, they recommend using the HTML rendering on the server side as well:
https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html