How to check if angular spinner is active - javascript

I am working on angularJS web application. I have a modal popup on which I show spinner while loading screen. Now there is need to identify if spinner is active (by using it's name) in html template. Can anybody please let me know how can achieve this in angular. I google for answer but no success yet.
Please help..!!

How you are showing the spinner, must be a image inside a div and setting it's display to block i suppose.
so you can use ng-show="isLoading"
and set $scope.isLoading = true when you open the pop-up and so this will make the spinner display and inside your service ( http) call on success handler you can reset it to - $scope.isLoading = false so that it hides the spinner.
is that what you looking for?

Here is the basic logic:
In your controller initialize a $scope variable as so:
$scope.showSpinner = false;
Then inside the relevant js function, that executes on modal open, run this:
$scope.showSpinner = true;
You should also have a spinner in your view html which displays the spinner when rendered, for example:
<div id="spinner" ng-if="showSpinner"> </div>
If you need more info please post your code..

Related

How to hide div in html page in app.js

After login I am showing some user modules on html page. I want to hide it when user not have an access for that module by admin. I am use sencha/ ExtJs for front-end.
I want to hide this component after user login if he don't have permission for it.
here is my code(please see below Image)
I want to hide this Live Tracking On user login if user don't have access for this.
Design for this is bellow
I want to Create a function in App.js (In controller).
Can you help me for this...
Whenever you are validating the user or when it logs in, whenever that happens add style display:none
using javascript
document.getElementsByClassName('live-tracking').style.displ‌​ay= "none"
Your controller {
validateAndLogin : function () {
var isValidated = // check validation according your requirement.
if(isValidated) {
//display your html view and do following after adding id attribute to that
//div which you want to hide.
document.getElementById('livetracking').style.display='none';
}
}

manually create spinning activity indicators

I apologize if this question is answered somewhere, but I couldn't find it.
I am working on editable javascript grid for MS Dynamics CRM and I am trying to display loading screen when user clicks "Save" button on the grid (the loading spinner should only be covering my grid - which is actually a HTML web resource displayed inside the CRM window). It takes about 2-5 seconds until CRM system saves the data and reloads my grid. So I want to display the loading screen during that time.
I found spin.js http://spin.js.org/ and it seems that it can be easily implemented but I am failing to realize on what event should I display the loading screen?
Basically, I have a table and when user clicks "Save" or "Delete" button, I wish to show that there is something going on under the hood.
Thank you very much for you time and help!
It sounds like you know what you want to call from spin.js, you're just trying to figure out where to call it from. You can try adding this to your javascript, where "#saveButton" and "#deleteButton" are the css identifiers for the buttons you want to fire the script off of.
$("#saveButton").click(function(){
displayLoadingPage();
});
$("#deleteButton").click(function(){
displayLoadingPage();
});
function displayLoadingPage() {
//call your spin.js code here.
}
Let me know if this answers what you were getting at.
I know you have got your answer but I think you can do it using vanilla JS code rather than using a library like spin.js
All you need is :
1) A div which is hidden on page load covering your table with spinner aligned center in it
2) On Save/Delete button click you can just make the div visible.
3) Hide the div again once you receive response from the rest api that saves or delete the data.
Below is the HTML:
<div class="container">
<div id="loading" class="loading" onClick="hideSpinner()">
Loading…
</div>
<input type="button" value="save" / id="saveBtn" onClick="showSpinner()">
</div>
JS Code:
var loadingDiv = document.getElementById('loading');
function showSpinner() {
loadingDiv.style.visibility = 'visible';
}
function hideSpinner() {
loadingDiv.style.visibility = 'hidden';
}
Here is a demo : http://codepen.io/AshutoshD/pen/dMEGqM
Click anywhere on the overlay to close it.
I have used the overlay that #MattIn4D has created here

load a view in a div with jquery

I'm trying this (Using Jquery in Codeignitor app to update div every 10 seconds), it is working but it shows my whole view in my div
I work with hooks and I have a masterview where I load other views in it...
When I load my controller in to my div, it shows my masterview in my div with the view I request in my controller.
How can I just show the requested view without my masterview? Can you help me?
thnx Cheers
A quick solution that I've used in CI is to implement a check in the controller to see whether this is an AJAX request. If so, I load the view with data into a variable and return it to the browser as a chunk of html.
if($this->input->is_ajax_request())
{
$view_result = $this->load->view('child_view_for_div', $data,true);
echo($view_result);
}
else
{
//Return view with master template
}

How to close all active bootstrap modals on session timeout?

I need to make a call when the user is idle and passes the session time out that will close all Bootstrap modals. The modals being active are dependent on what the user is doing at the time so I would like to do something that's is all encompassing.
I tried:
$('.modal').modal('toggle');
When the time out occurs but my modals are still there.
Use the following code:
$('.modal').modal('hide');
Also if you would like to do something if the modal is hidden then you can do this:
$('.modal').on('hidden', function () {
// write your code
});
The correct answer is missing something vital.
$('.modal').modal('hide') // closes all active pop ups.
$('.modal-backdrop').remove() // removes the grey overlay.
The second line is vital if you want the users to use the page as normal.
Try this way :
$('.modal.in:visible').modal('hide');
This is how i got it working in my project without using any factory or additional code.
//hide any open bootstrap modals
angular.element('.inmodal').hide();
I have a timeout function that emits logout as $rootScope.$emit('logout'); and the listener in my service is as follows:
$rootScope.$on('logout', function () {
//hide any open bootstrap modals
angular.element('.inmodal').hide();
//do something else here
});
If you want to hide any other modals such as angular material dialog ($mdDialog) & sweet alert dialog's use angular.element('.modal-dialog').hide(); & angular.element('.sweet-alert').hide();
I don't know if this is the right approach , but it works for me.
Using vanilla JS you can do the following
// import all your dependencies
import * as bootstrap from "bootstrap"
// close all modals but the one you want to open
const $modals = document.querySelectorAll('.modal')
$modals.forEach(modal => {
let currentModal = bootstrap.Modal.getInstance(modal)
if (currentModal) currentModal.hide()
})
When I dont know, wich Modal is open, I use the following for me...
$('.modal[id^="modal_"]').modal('hide');

Load scripts in bootstrap modal when getting fragment of page

I'm currently getting a fragment of a page and loading in bootstrap modal.
This fragment of page includes the jQuery required to load Google Maps but when the modal loads the content, all scripts are getting stripped so subsequently, the maps don't load.
Even if I directly insert the scripts inside the modal-body class, they still get stripped.
Is there a workaround to this at all?
What we're currently using to trigger the modal is:-
Launch demo modal
I can provide further code in use if needed to answer accurately.
=== Edit: Providing more code in use on request...
So we're including a sitewide link that triggers bootstrap modal. The link that is triggering modal can be seen above and here is the rest of the code in relation the modal.
What we wish to load in the modal is just a fragment of the page at /stores, all the code that is loaded at this URL can be seen here. From this page though, we only really wish to load everything inside .modal-container on line 192 but as necessary scripts reside outside of this div in the same file, we aren't capturing this when we try to load in modal. So previously, our modal trigger looked like:-
Launch demo modal
This then led us to try and just wrap entire file content inside div and call it's contents as the fragment of page in modal so that we can pull the necessary scripts required to load #map_canvas but alas, all scripts are stripped out of modal...
Hope this gives greater explanation into what we're trying to achieve.
=== Edit 2: We've actually fixed this via a workaround but it was a mammoth job so will post answer as soon as I can...
I'm using the following code to load view on boostrap modal :
$('[data-toggle="modal"]').click(function(e) {
e.preventDefault();
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$(url).modal('open');
} else {
$.get(url, function(data) {
$(data).modal();
}).success(function() { $('input:text:visible:first').focus(); });
}
});
With the following trigger :
<i class="icon-plus icon-white"></i>
By using this method you will ensure that all you script will be loaded when your modal will display. This is only this workaroung that I found to correctly showing my modal.
Everything that I have to show on my form (new.html) will be displayed perfectly.
Thus, I suggest that you put all you releavant code to Google Map on the page corresponding to /stores.
Edit
You trigger should be :
Launch demo modal
Instead of :
Launch demo modal`
Edit2
The problem that I see, is that you modal inclusion do not get the JS files because these are not within your inclusion section. I'm not a PHP expert, but here is to option that you might try :
Option1 (not very clean)
You can add <script>Google Map required JS File</script> tag inside the <div class="modal-container"></div> but you will get duplicate tag for the same JS file.
Option2 (Might be possible ?)
Create new file and add your section <div class="modal-container"></div> with your required JS files.
Replace the line 192 by including your new file and call your modal by passing your current store object in order to display your information in the modal.
Let me know if its help.
Has StackOverflow changed your code?
Launch demo modal
You have the classname within the href? This could be part of the problem.

Categories

Resources