i am working in angularjs 1.i am trying to make CRUD in angularjs and laravel.i have successfully make the CRUD and CRUD is working fine , in my application their is child and parent routing present using ui router.At parents Route i have show the list of all the data and then by click on add new or edit button bootstrap modal appears , route change and after updating data , I change the route to parents route which works fine but the problems is with i update the data and try to reload the parent view , parents view does not update , remain same may be because of the angular store view in browser when every we call the view, then if you again call this view it will come from browser not from sever again.
How can i come back to the parent view with update data?
Thanks for Helping
this is my code i use to reload the the parents view , i parents do not update remain same although the route changes.
$location.path(ROUTE NAME);
$window.location.assign(ROUTE NAME);
$window.location.href = ROUTE NAME;
Don't be think this is a solution for your question. Just think it would be a key for you.
At first store the parent values in local storage before reload the parent view
$localStorage.set("parant", $form)
and after reload the page, check if local storage have data, then assign to your current form, like
if($localStorage.get("parant") != undefined)
{
$form = $localStorage.get("parant")
return false;
}
Related
In my angular app, there are two pages (list & checkout). In the list page the user could search for an item and the searched item will be displayed and then the user can select the item and continue to checkout.
From the checkout page the user could return back to list page, and at that time all the items in the list page should be same as how it was left before.
For implementing this feature, my code is
on moving from list page to checkout page, all the scope data are stored in a service
returnsService.setScopeData($scope);
And on returning back from checkout page to list page, this saved data are retrieved from service and assigned to scope variables.
var restoreScopeData = returnsService.getScopeData();
if (restoreScopeData) {
for (var key in restoreScopeData) {
if (key.charAt(0) != '$') {
$scope[key] = restoreScopeData[key];
}
}
}
This works fine to an extend, and I can see the list page same as how I left it.
But the problem is, now I'm not able to search for new item in the list page.
When ever a search happens, the items are populated to $scope.listSearch and they are displayed in html {{listSearch}}.
In the error case also,
I can see the new search data getting assigned to the $scope.listSearch, but the HTML binding is not happening.
I tried calling $scope.$apply() after the search assigning, but still not working.
Storing complete scope isn't good idea. You can just store the vars you need. Also, you can use localStorage for this.
As I understood, making new call is not an option, so you can try use $timeout.
$timeout(function() {
$scope.listSearch = myValue;
});
Instead of doing this, you may for localStorage or sessionStorage as suggsted by John.
You may check below link for example
https://www.codeproject.com/Articles/1015515/Working-With-Client-Side-Local-Storage
In button click event my state is going to change from one state to another.thats way I am passing Id value by using ui-sref.
this is my button declaration for id:-
<button ui-sref="list({id:'{{id}}'}"></buton>
In state I am getting value like
.state(list, {
url: '/list',
params:{id: 'null'},
template:''
})
The url should not contain id value,thats way i choose the above approach.The param value getting fine in first time loading but when i am going to refreash the page the param value became null again.
My button is in one controller(a.controller.js), and /list is another controller(b.controller.js).After changing state I want id in b.controller.js.
I tried but i was getting a proper solution for this situation except local storage.I donot want to store my value in local storage.So please any one can help me solve this problem.
Its normal to loose everythink when you refresh your page in angularJS (the major intrest of angularJs is that you have not to refresh your page !)
If you want to keep a value you need to store it in a database with an API or in a simpler way you can store it in the localstorage of the users browser.
localStorage.setItem('todos', JSON.stringify($scope.todos));
Exemple of a simple localstorage use in angular
#Katie Harron
If that you call refresh is just state change you have to store your value in $rootScope
I have a simple requirement where out of multiple pages, I have one Settings page in Ionic app, where I am allowing the user to toggle one data(say, language) that is maintained in LocalStorage in the app(via a factory).
This 'language' is used in all views(controllers).
I have Back button on the view but when user changes 'language' through Settings page(I update LocalStorage) and want to go back through IonicHistory back button to the preview view, change does not show up after going back.
"Previous view" uses LocalStorage.Language to fetch data
Back button uses following code:
$scope.goBack = function() {
window.history.back();
}
Can anybody help here or any workaround for this is possible.
Ionic caches views in the current navigation history. In order to update the view everytime you come to a view, you should use $ionicView lifecycle callbacks like .enter, .beforeEnter etc. The code written as part of these callbacks are executed everytime even if the view was cached:
$scope.$on('$ionicView.enter', function() {
// Get your settings data here to reflect it on page everytime
})
For details refer: http://ionicframework.com/docs/api/directive/ionView/
I am writing something like a registration process containing several steps, and I want to make it a single-page like system so after some studying Backbone.js is my choice.
Every time the user completes the current step they will click on a NEXT button I create and I use the router.navigate method to update the url, as well as loading the content of the next page and doing some fancy transition with javascript.
Result is, URL is updated which the page is not refreshed, giving a smooth user experience. However, when the user clicks on the back button of the browser, the URL gets updated to that of a previous step, but the content stays the same. My question is through what way I can capture such an event and currently load the content of the previous step and present that to the user? Or even better, can I rely on browser cache to load that previously loaded page?
EDIT: in particular, I'm trying something like mentioned in this article.
You should not use route.navigate but let the router decide which form to display based on the current route.
exemple :
a link in your current form of the registration process :
<a href="#form/2" ...
in the router definition :
routes:{
"form/:formNumber" : "gotoForm"
},
gotoForm:function(formNumber){
// the code to display the correct form for the current url based on formNumber
}
and then use Backbone.history.start() to bootstrap routing
I'm currently working on a single-page scrollable website (5 pages displaying as a single page) using CakePHP. I have worked on each controller action and everything runs well. I have one layout for the entire app and a view for each action. My challenge is finding a way to load the view of each action without reloading the page inside the layout. Should I just put all the view content inside the layout (without echoing $content_for_layout) or could there be a better way to do it?
Considering the div you want to update has the id #content:
$.ajax({
url:"http://yourdomain.com/controller/action",
context:document.body,
dataType:"html",
data:{id:123}, // in case you need to pass some params
success:function(data){
$("#content").html(data);
}
})
The action must return the HTML you want to display inside that div. If you want to have each pags loaded in different div's, you will have to create one div for each page and call AJAX for each one.
When the page is loaded for the first time, you can just pull the data for whatever default action you defined. Then, when you want to change the content, just call AJAX.