when the user starts my app, there is a lot of data coming from a web service which is stored into the device´s database and then shown on the HTML-page using jquery`s .html() method. The problem is when the user selects another HTML page and then comes back, the data is not shown anymore, it has to be read out from the database again.
I know this isn't "rent a coder" but my question is: Is there a way to keep the data persistant on the HTML page even after the page is reloaded? Or do I have to pack everything into a single HTML document?
The solution could be to handle all navigation with AJAX, make your website a one page app and keeps things into cache. But i think this is a really big topic.
In any case a good Javascript MVC Framework like Backbone or Ember could help you.
Related
I have a single webpage that uses an API to query backend for data, which is returned and plotted in a few figures. Backend is Node.js with Express.
The appearance of the figures is controlled through a set of JS functions that are loaded when the page initially loads.
After the user has been on the page for 30 seconds, I want to ask them to login or register by displaying a modal over the page.
If the login is successful, I'd like to close the modal and have new functionality available to the user, including changing the behavior of the original JS functions that were loaded when the user first arrived. But, I'd like to do this without reloading a new page with a separate set of JS functions.
I'm a relative newbie at this and have been having a hard time figuring out the right way to accomplish this.
I thought maybe there was a way to update the original JS function file by submitting an API get request and using the response to overwrite replace/overwrite the non-authenticated version. Then user would have access to new functionality without having reloaded the page.
But, I can't seem to find anything that would support this as the correct approach, or even whether this would be possible.
Really need help on which direction to go.
Currently I am working on one project, that is a little complicated for my programming capabilities, so the general idea might be wrong. I need to do just one more thing to make everything functionable. I am using local storage in order to temporarily save data from page1.php and after that, display data on page2.php. But when I load page2.php, there is no data because I did not load page1.php first (it is needed to send data to local storage).
The user for his needs does not have to load page1.php first and that is a problem.
Is there any way to reload page1.php when any other page is loaded in order to save data on local storage. In JavaScript or PHP. Thanks in advance.
I tried some manipulations with reload() function, but did not find any solution.
When NOT using AngularJS, I create a web site that responds to /mysite/users . It returns an HTML page with user records filled within a table-like display.
I wish to try an AngularJS approach. I somehow load the web page, and that page's onload() calls /mysite/users, which returns merely a JSON list of users.
The "somehow" part is what bothers me. So far I'm reduced to first calling /mysite/showUsers. This downloads the HTML page which then itself calls /mysite/users.
Likewise, when editing with AngularJS I think I'll have to call /mysite/userEdit/1 which on load calls /mysite/user/1.
I think I'm missing something. Can I get a clue?
Thanks,
Jerome.
As you've noted, the AngularJS approach is not to load pre-rendered HTML from the server, but instead load a list of JSON data and rely on AngularJS directives to populate the DOM client-side.
A concrete example in your case would be a page which loads an Angular module that fetches a JSON list of users from /api/users, and leverages the ng-repeat directive to populate the data into the page right in the visitor's browser. Here's a JSFiddle I found that illustrates how you'd accomplish this.
It's all a matter of where the data gets inserted into the HTML; It can happen on the server-side or the client-side, and Angular favors the latter. (This is not to say you can't load pre-rendered HTML from the server, but you would be working against the way AngularJS is designed to be used.)
I've had trouble describing what I want to have happen. Perhaps it is because it goes against the grain of Angular.
My server responds to /user/1 with the JSON for user #1. For the browser to deal with it, I must have a web page already there that can display this JSON. Chicken and egg style, how do I get this edit web page into the browser? My classic example is using /user to list the users and having a link on each user to edit it, such as "/SOMETHING/1".
In the meantime, I've decided to go with /user/edit/1. That will cause the server to render an HTML file, using server-side scripting to insert a phrase that on window.onload() fills the skeleton HTML with the result of /user/1.
Thanks, Collin, for replying.
I have a php application with MySQL for database.
I want to create a site builder. The idea is to use ajax for loading and storing the dynamic page content. The user will be able to modify the site (create and edit pages, navigation menus, etc.) while viewing the front-end. The changes will be presented in real time, and then committed once saved.
I'm not sure what would be the best method for manipulating and storing the dynamic page content.
Should I just change the DOM, and then save its current state somehow? Or, would it be better to use an object for storing the page's content and structure? Would it be better to store the pages in SQL, or file?
EDIT
So, what I decided on, if it helps anyone (and thanks to all who responded!):
I have created jQuery functions which allow the user to manipulate the DOM simply by clicking an element on the page, and then adding content to a new element (so for example I have a text and image insert tool). I'm using a handler object to track changes, which are then applied to the DOM once the user clicks update button.
Once the user saves the page, I am using ajax to save a portion of the DOM to a MySQL database.
Then I have a pagebuilder function created which calls my custom theme's header, pulls the html from the database, and then calls the theme's footer.
So far this is working very well. The pagebuilder takes care of constructing the page by using the url's ?page=x reference. This still allows my core app and theme system to control each page's header and footer, while still allowing for an easy way to edit, save and retrieve the content, all using ajax.
Based on my experience with Magento and your dynamic things, i think it'll better to save the dynamic content on database, but saving things like:
"Home"
"3 columns"
"Input - Text"
...
And when you get it back, you use the "directions" saved on database, to build your dynamic website.
I would say that it is a matter of architecture here. Storing in a Database will provide you better performance retrieving and storing long data streams, and will probably a better data organization along the way.
The question is -how can you store a Web site into a Database efficiently?-
Has a partner say before there are many ways of skin the cat. How complex do you want to go? are you going to store single pages? images? tables? full websites? will your users be able to store raw/other data too?
You see?
Hope it helps.
I've got a problem. I'm working with a food supplier and I need save the content of each order as html. Orders are listed on a single page as links, but this has 2 difficulties
Page uses authentication (need to log me in in advance)
This is the real problem: the page use a lot of javascript. Actually everything works without changing the web address so I can't use wget or rio gem (url not like www.fooddoe.com/order, www.fooddoe.com/order/1, etc. but always like www.fooddoe.com/suplierx).
I think firewatir would be a good option but the problem is than I need to save the page in a format similar to html (including images). Is it possible using firewatir? Are there other options in clojure or javascript?
Thanks so much!!
I had to read your question twice to understand what you mean.
From web address from example I assume this is yours supplier web page. So IMHO the easiest way is:
Look into source of web page to get an idea how it gets the data (99% for some kind of AJAX request).
Request goes to the server which responds to it.
Now there are two ways:
Get idea how the request is made and write and app to make such request and generate web page with it (more difficult, more general)
Contact your supplier and get original database (simpler but one-time solution)
And I think that this is not the question specific to any language.