I am trying to show the modal dialog while my page is being loaded. Right now I show the modal before the page push (e.g. app.navi.pushPage( 'detail.html' ) ). In the page init i have to go out and get some data from a third party API, and display it in a list. Once the request is complete and the list is populated I hide the modal.
The issue is that the modal is actually being hidden before the transition starts. Any ideas on how I can hide the modal once the transition is complete and the DOM is loaded?
Thanks!
Here there is an example that hides the modal after 2 seconds: http://onsen.io/guide/overview.html#UsingModal
In your case I guess you are using an HTTP request or something similar to access the third party API, so it's necessary to hide the modal after preparing all the data in the callback of the request:
$http.get('/third/party/API').
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
myItemList = data[...];
... // refresh view, pushPage or whatever you need to prepare
modal.hide();
}).
error(function(data, status, headers, config) {
// Handle errors in request
});
Hope it helps!
Related
I am trying to implement a simple login feature. I want to have the DOM load a different element based on whether the $window.sessionStorage.currentUserId5 session exists or not. But the conditional statement I have added to .run() just keeps using the else{} statement
<script>
var app = ons.bootstrap('app', ['onsen','angular-svg-round-progress','nvd3','ngStorage']).run(function($rootScope,$window){
if($window.sessionStorage.currentUserId5)
{
$("#menudiv").html('<ons-sliding-menu var="menu" id="menusliding" main-page="main.html" menu-page="menux.html" max-slide-distance="85%" type="reveal" side="left" ></ons-sliding-menu>');
}
else{
$("#menudiv").html('<ons-sliding-menu var="menu" id="menusliding" main-page="login.html" menu-page="menux.html" max-slide-distance="85%" type="reveal" side="left" ></ons-sliding-menu>');
}
});
</script>
<div id="menudiv"></div>
Controller
User clicks button and this is called, $window.sessionStorage should be created here
$http.post('http://xxx-xxx.us-east-1.elasticbeanstalk.com/apipost/checkuserlogin', parameter, config).success(function (data, status, headers, config) {
// if login, user session created, redirected to index.html
if(data['result'] == 'success'){
$window.sessionStorage.currentUserId5 = '5'
$window.location.reload();
}
else {
// else error pop up
ons.notification.alert({
message: 'Please try again'
});
}
})
.error(function (data, status, header, config) {
});
I don't want to be rude, but I think the question is not really related to Onsen UI. Even though you're using it, I doubt that the usage of Onsen UI changes your actual question. (Unless Onsen UI breaks the code in some way.)
What you seem to be using is the ngStorage module. From what I've seen it seems like the normal way to access local and sessionStorage is just by having them directly, rather than through $window.
So you can try to just require $sessionStorage and use it directly. If you think that the issue may be connected to some browser reloading somehow breaking the session etc you could try $localStorage and see if it works. The final thing you could try is just see if the normal localStorage and sessionStorage work for you.
And if you want to debug what happens then you can do something like
$http.post('...', parameter, config).success(function (data, status, headers, config) {
alert(data.result);
if(data['result'] == 'success'){
$window.sessionStorage.currentUserId5 = '5'
alert($window.sessionStorage.currentUserId5);
$window.location.reload();
}
else {
...
}
}
Usually it's better to use console.log instead of alert, but in this case alert can be better since it will stop the execution until you click ok.
The other option is to click the preserve log option in the browser inspector's console. To open the chrome console you can do Ctrl + Shift + J or Cmd + Opt + J. The other browsers also have similar consoles where you can see the logs from console.log. Usually these types of issues can be debugged without the need of external help.
I am using angularjs for my app. It contains a newsfeed. If user needs to view the particular news, he has to click on that particular news and it will redirect to that news. And after viewing the particular news, if user wants to go back to news feed(previous page), he has to click on the browser back button. So, in this case, if user clicks on the browser back button, the newsfeed page is reloading again. But, I dont want like this. I want to disable the reload and take the user to the place where he was before. I browsed a lot on this issue, but there was no absolute solution given. Please, help me out.
When you go back, previous route will be triggered and data will be reloaded. If you want to prevent reloading, place a service in between and cache the data.
$routeProvider.
when('/loadFeeds',{
controller:'LoadFeedCtrl',
templateUrl:'pages/feeds.html',
resolve:{
initData : function(FeedService){
return $q.all(
{
data: FeedService.load()
}
);
}
}
})
And in your FeedService, instead of making http call try to see the data is already available
.service('FeedService',function($q,$timeoute){
this.feeds=[];
this.load = function(){
var deferred = $q.defer();
$timeout(function(){
if(feeds.length===0){
this.feeds.push({title:'First','id':1})
this.feeds.push({title:'Second','id':2})
this.feeds.push({title:'Third','id':3})
this.feeds.push({title:'Fourth','id':4})
}
deferred.resolve(this.feeds);
},2000);
return deferred.promise;
};
})
The timeout service could be replaced with $http or $resource. I used the timeout to simulate the delay
you can take an anchor link and on click event of anchor call this
javascript function
window.window.history.back();
here is the html code for it
<input type="button" id="alnkBack" onclick="window.window.history.back();" value="Back" class="button" />
I have a contact form inside my modal window. After successful post request i want to close the modal automatically. I am using MEAN.JS
here is my controller
angular.module('core').controller('FormCtrl',['$scope','$http', function($scope,$http) {
$scope.postMail = function (data) {
$http.post('/mail', data).
success(function(data, status, headers, config) {
alert('success');
//close function....??
}).
error(function(data, status, headers, config) {
});
};
}]);//formController ends
How can i close my modal after $http.post success?
I got something for you
Use:- $modalStack
And then call $modalStack.dismissAll();
Simple plunker
I used $timeout in plunkler you can use it anywhere like $http :-)
Doc
As crude as it is...
Set the modal as a variable on the scope then just pass it through a function on the template and call modalVarName.dismiss();
For me using $modalStack gave me injection error even though I injected $modal and $modalStack as dependency. Following worked:
angular.element(document.querySelector('#modal')).modal('hide');
I try to do some functionality that accepts a state navigation (using $state.go(otherState)), refreshing the associated url in the adress/url bar but it blocks (or redirects to not allowed page) if user directly puts this url in the adress/url bar.
Could it be done by ui-router rules or something inside ui-router module?
I put the example code:
$stateProvider.state("main", {
url: "/index.html",
templateUrl: "main.html"
}).state("notAccessibleScreenByBar", {
url: "/private/example.html",
templateUrl: "example.html"
});
From main view (index.html), the next angular code will be executed:
$state.go("notAccessibleScreenByBar");
This action changes the view, loading example.html and refreshing the url bar to /private/example.html.
If user puts /private/example.html in the adress/url bar, ui-router must block this request (or redirect to not-allowed page).
What you are trying to do seems very similar to any web authentication standard, but, if you don't want that, you could use $locationChangeSuccess (docs here)
A basic example inspired by this sample:
$rootScope.$on('$locationChangeSuccess', function(e, newUrl, oldUrl) {
// Prevent $urlRouter's default handler from firing
e.preventDefault();
if(isThisTransitionValid(newUrl, oldUrl)) {
// Ok, let's go
$urlRouter.sync();
});
});
I'm currently working on a project in angular. I'm trying to show a loading spinner every time the page changes. To accomplish this we are using ngRoute module and listening for routeChangeStart,routeChangeSuccess,routeChangeError events.
Here's the code:
$scope.$on('$routeChangeStart', function (event, param) {
var html = "<div class='panel-body'>"
+ "<div class='col-md-4 col-md-offset-4' style='top: 50%;'>"
+ "<i class='fa fa-spinner fa-spin'></i> Caricamento in corso..."
+ "</div>"
+ "</div>";
that.myModal = $modal.open({
template: html,
backdrop: 'static'
});
});
$scope.$on('$routeChangeSuccess', function (event, param) {
that.myModal.dismiss('nessuna');
});
$scope.$on('$routeChangeError', function (event, param) {
that.myModal.dismiss('nessuna');
});
This works, but only the first time a certain page is changed. I try to explain better: When we are in page X and navigate to page Y the modal is shown and then hidden after page changes. If then i go back to page X and navigate to page Y again the modal spinner is now shown.
When debugging I can see the modal.open() executing, but it's never shown. It looks like angular is somehow delaying the command.
Does anyone know why is this happening? Has anyone encountered this problem before?
About displaying the spinner solution capturing $http requests, here you have some info to get started:
http://lemoncode.net/2013/07/31/angularjs-found-great-solution-to-display-ajax-spinner-loading-widget/
Showing Spinner GIF during $http request in angular
The idea is to intercept a $http request and display the spinner, then on the end request or promise response (error and success) check if there are pending requests, if not hide the spinner.
If you need more info, give me a buzz, I have further developed this and taken some solutions for issues like I don't want to show the spinner for some particular requests.
Whatever solution you keep to catch route change events, I don't understood why your modal doesn't trigger.
Here is a demo in plunker (I used ui-bootstrap to handle modal).
You can use this nice script too called Pace to automatically start a loader based on http request.
Taken from their documentation:
Pace will automatically monitor your ajax requests, event loop lag, document ready state, and elements on your page to decide the progress. On ajax navigation it will begin again!