In my controller and my view i have some content thats being. Some of the data is coming from api calls.
For example i have info coming from the database and now the user can update their information such as their last name. When they submit the data i make a call to the api to update the database for the users last name. Now what i want is for the page data to reflect the new user content from the database. I dont want to completely reload the page and i dont want to take what they put in the input and show that but instead completely have the page content reloaded without reloading the page. Is this possible?
If it were me I'd just add the new data to your $scope array after the promise or successful response from your server comes in. Or if that makes you nervous, you could re-request the array from the api after the promise. But IMO that could result in a lot of un-needed bandwidth.
Related
Usually I make content refresh automatically with the javascript function using setInterval.
But it seems ineffective because every second the content must be reloaded will take up a lot of resources.
Therefore if there is another alternative to creating an automatic refresh function only when the data has changed in the database.
One way to update your data would be to use Ajax in the frontend to request the data every few seconds and update it instead of reloading the page. Otherwise, you should check out socket.io (websockets)
I need to send form data to another page that will allow the user to do something in a form and return the result of that form back to the original page? Is this possible? I know it's not ideal, but the issue is that I need to make a "drop-in" solution that does not need to be integrated with other code. I know it's a very specific request and scenario.
I know how to send POST data that doesn't require any user input on the processing page. i.e. I can send POST data to 'calculate.php' which will do the math and send it back, but if I need additional user input on 'calculate.php', how can I still send it back?
An example of expected results would be:
Page #1: User enters a number and presses submit to go to next page.
Page #2: User enters a second number and presses submit to finish.
Back to Page #1: User receives sum of both numbers.
Obviously, this is a really redundant thing to do, but I'm trying to simplify the problem as much as possible.
EDIT: There a few restrictions I forgot to add.
Page #1 is not my application, I am developing Page #2 as a "drop-in" solution for Page #1. Essentially, I can only use Page #1 to call Page #2 and receive a response from it. The problem is that I need to be able to allow for user input on Page #2.
I know I can post to Page #2 and then post to Page #1 again, but what if I need to maintain the state of Page #1. For example, if there's an open Web Socket connection.
Please note, I understand that this may be impossible or extremely difficult, but if I don't ask I'll never know right?
You want it with PHP or any other language. If you are running Php on server side then you can use Global variables like $_GET and $_POST.
Page #1: Use Post/Get method to send data to second page.
Page #2: Receive all fields' values using Globe variables ($_GET and $_POST). You can use these values as default values of form fields. Now submit this data to page 1 using post or get method.
Back to Page #1: Here you will receive the data of first page from second page and newly posted data from page 2
Either of these should work:
Never leave the page - use AJAX / XMLHttpRequest to call out to other pages to process chunks of data
Do everything on page 1 using "postbacks" -- the form targets are the same page, there is a state variable like "stage=1", and you use JavaScript to add set hidden variables for any additional state that's needed.
... PHP state validation and processing for the different stages ...
... one or more blocks of HTML for the page (PHP if / else can be used to choose between multiple page views) ...
Edit for added restrictions:
Have page 2 use postbacks or AJAX to collect the additional information
I figured out a few ways to do it.
Update a Database (or Data Store of some sort, depends on security needs) and have Page #1 listen for events from a separate page (on the same server as the database). Very similar to the way PayPal's Instant Payment Notification (IPN) works. I was actually able to set up server sent events with it as well.
Essentially, Page #1 sends data to Page #2 where the user will perform the function and then Page #2 will send POST data to a listener somewhere (either on the same server or Page #1's server), the listener will update a database and Page #1 will be listening or pulling to an event handler that will send an update once the database updates.
Use JavaScript Child/Parent Window functions. This is okay if Page #1 and Page #2 are on the same server, but can get messy and browsers have a lot of restrictions and it varies depending on browser.
Page #1 will open Page #2 in a child window, after the user performs a function, Page #2 will call a function that accepts the result data on Page #1.
On page load, say for a particular route for (e.g. https://localhost:8000/home/index), a service is called and the response from the service is rendered to the page at the client side.
On the same page, I have a link that pops up a Backbone.js modal and from the modal a click event triggers which hits another url (e.g. https://localhost:8000/home/index2) upon which another service call triggers and the response is rendered to another html page.
On the same html page, I want to display a value which I got from the first service call on page load. However, I am unable to retain that value as there are two different requests each time. Hence, I cannot even append the value from first response to the request object and use it a second time.
You can use JavaScripts Web Storage API to storage information on client browser.
MDN Web Storage API
For example, If you are on the first screen and call a service, store the service information on localStorage
localStorage.setItem('firstService', serviceResponseObject);
Once you are navigated to second page, you can use localStorage to read to previous service information
localStorage.getItem('firstService');
There are multiple ways to store state between requests.
From the server, if you're using say Express etc, you could store the result in a Session. Or you can even store state in the requests query params, or from a POST request.
You could also store some data on the client end, using say Cookies or localstorage.
What you choose really depends, it might be best if you explain in more detail what sort of information your passing between pages.
If it's just a simple value, I would go for using query params.
eg. Just place in your url https://localhost:8000/home/index2?value=123, and then from node.js, req.query.value would have your value.
I am working in AngularJS application with Spring rest as backend. I am pretty new to angularjs.
I have a UI page where i display some list of objects in table.There is an edit button against every record.When i click edit, another page opens which set the data accordingly.
The issue is, being on edit page, if I refresh the browser, I loss my data. One way I can think is to make another rest call but I want to avoid making any rest call.
Is there any way to retain data on the page on refresh or making rest call is better solution?
I would think the cleanest way to do it is to make a REST call, as the data could have changed on the server. However, if you want to avoid the call anyway, you may use localstorage. Just store the data in your table in localstore with key value pairs (assign some unique key to every row). You could use this plugin: Angular LocalStorage
It has been a long time since I have worked with PhP or Javascript and I want to build a website that runs on a server with MYSql that can update the page when the data in the MYSQl table changes.
I am not sure how to do this, if anyone has any ideas I'd love a boost.
assuming this data is being gathered using an SQL SELECT statement,
move your statement and the way in which it displays the results into a different file.
then you can load the results from the query into a div using jquery .load
$("#someDiv").load("somefile.php");
If the data is not being updated from the page in which you want it auto refreshed, use setInterval
$(document).ready(function(){
setInterval(function(){
$("#someDiv").load("somefile.php");
}), 2000);
});
with 2000 meaning it will run every 2 seconds.
If you are updating the data and want the updated results shown without the need for a page refresh, use ajax and in its 'success' function call:
$("#someDiv").load("somefile.php");
You want a webpage to be notified of a change in the server. More specifically, you want the data in your page to be refreshed when the data in your database changes.
You have at least two options:
You write some javascript so that you browser periodically asks (polls) the server for changes via ajax (as another user has already explained). You could even consider long polling.
or...
You make use of websockets, which will allow your server to push the data to the client whenever the server wants.
You may want to take a look at the many posts in SO which discuss this matter.
Refresh content automatically if the database changes
Automatically refresh browser in response to file system changes?
How can I refresh a page when a database is updated?