How to reload information correctly in app? - javascript

I'm developing a Angular App using Restangular with Web Services REST, but when I change between sessions several user the information have a delay to display information. for example a view CustomerDetail with Information of User1 but when I change a User2 then it show me information of User1 and later in n seconds show information correctly the user User2.
My question is, how to reload information correctly in view?

first of all, try reducing server calls by getting as much data at once and then create client side reload. regarding your case, when you click on some button to change users, first change a variable to "onLoad" to true and perform ng-show="onLoad" for some loading div and ng-show="!onLoad" for some other div contains users info. then when you get back your data flip "onLoad" value...

Related

Is there a way to send POST data to another form and return the result of that form?

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.

Create Multiple Dynamic views inherited from single template

I am creating mobile chat app in angularjs.
It has lets say 100 userlist. If user presses on some userlist, it takes to next view(chat view). So, as user presses on userlist . I want to create a dynamic chat view of that user based on his userId.
One way of doing this is - I define the route like this 'chat/:userId'. Then access the userId. Also messages of particular user is coming from server. And new chat messages is appended to the view.
I have doubt that if user open the same view again it will load the basic template again because view is changed . It will again send the request to server again. It should not.
For clearing the question, In mobile jquery (http://iflychat.com/drupalchat/mobile-chat)
If user opens the view lets say public chatroom , It only takes load time once. If we again come back to this same view, it loads instantly. It creates the view based on url. Is this kind of functionality possible in angularjs?
Angular has an $http cache that could help you accomplish something similar:
$http.get(url, { cache: true}).success(...);
There are also a few other ways using the same cache.
Here is a very detailed post How to cache an http get service in angularjs
Thanks,
Paul

Angularjs reload page content without actually reoloading the page

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.

Store status between forms in AngularJS?

I am going to try to be as specific as I can. This is what I am trying to accomplish:
I want to be able to show a User, which kind of shoes fit its needs. The user will be shown 4 forms, one at a time.
My idea is to show a form, and once the user clicks 'Next', save that status and show the next form. After all forms have been filled, use those choices to fetch the API and return results to the User.
Here are my questions:
Where should I store the status of his choices? Cookie? Session?
How would I organize Angular in order to have all these forms that are shown one after the other? Any resources that I could use as an inspiration?
BTW, I am using Rails as a backend.
I have based my question on this tutorial: http://code.realcrowd.com/the-wonderful-wizard-of-angularjs/
I see that he uses saveState() on submit, but I am not sure where that function is defined.
Since the app is a angular SPA, you can use a angular service to store the state of the selection made by user. This state would persist until user explicitly refreshes the browser (F5).
Create a service like
angular.factory('shoeSelectionState',function() {
var states=[{selection:{}},{selection:{}},{selection:{}},{selection:{}}];
return states;
});
In your controller inject this service,
angular.controller('MyController', function(shoeSelectionState) {
$scope.states=shoeSelectionState;
});
and bind the states array to each form elements, something like
<input type='text' ng-model='states[0].selection.size' name='size'>
If you want to persist the data on page refresh try using sessionStorage instead of localStorage as it gets automatically cleared when user closes the tab. The service mentioned above can do the persistence of the content to storage.
You could use localStorage as #sumain-bogati suggested, but you could just as easily do this without any page reloads. What you will need is a container with a controller that will store the user's choices (i.e. the model) and then use ngShow or ngRoute to display each page. Here is some example code:
Plnkr example of three pages and a model
Instead of calling the fourth page, you would call a function which would initiate an $http call to your backend API to submit the model values.

Invoke webservice from javascript to refresh an update panel

I'm having a hard time figuring out how to do this,
Heres what I am trying to do:
I have a webpage containing statuses of users I've chose to follow(Something like facebook's statuses).
Now what am trying to do is to refresh the webpage automatically so that whenever a user changes his status I won't have to refresh the webpage to see it.
The status list is a Repeater located inside an UpdatePanel, it's data source is structure of List<User> I've created(there is no DB involved). Each user has an unique ID, name and status.
The users I follow is a List of strings containing the IDs of those users stored on the Session.
I have read countless articles about how to use a webservice and how to use javascript yet I remain clueless on how refresh the updatepanel's content automatically through the webservice.
Good example of using a timer (for an update panel) here:
http://msdn.microsoft.com/en-us/library/cc295400.aspx
Assuming you are using JQuery you can then call a webservice from this 'Timer_Tick()' method using the following:
JQuery & Timer :: Updating the text of a hyperlink from a webservice

Categories

Resources