1

I am trying to implement the loading icon with every REST API call in my angularjs application. The solution in this thread worked great for me except in one scenario. Implementing loading spinner using httpInterceptor and AngularJS 1.1.5

The scenario is I have to bring up a bootstrap modal from the parent page. I would like to have the loading icon appear on the modal when it is processing the request. Instead the loading icon appears on the parent page in the background of the modal. Please advise how to get the icon to load on the modal (perhaps by disabling the one loading on the parent page) incase a modal is opened from the parent.

EDIT:
I am trying to use 2 spinner divs to achieve this.One at the parent level. The other one at the modal html. 

    #parentDiv, #modalDiv {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1100;
   background-color: white;
   opacity: .6;
}

.ajax-loader {
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -32px; /* -1 * image width / 2 */
   margin-top: -32px; /* -1 * image height / 2 */
   display: block;
}                      

I have an index.html that loads the parent pages. 
 <div id="page-wrapper" style="overflow:hidden">
      <div ui-view style="overflow:hidden"></div>
      <div id="parentDiv" loader>
        <img src="images/spinner.gif" class="ajax-loader"/>
      </div>
    </div>

On the modal html another spinner:

<div class="container-fluid >
            <div id="modalDiv" loader >
                <img src="images/spinner.gif" class="ajax-loader"/>
            </div>

            <div class="col-md-4">
                <div class="form-group">
                </div>
                .
                .
                .
                .
            </div>


        </div>
Community
  • 1
  • 1
Mustang
  • 604
  • 2
  • 13
  • 32
  • a simple solution - do you know the modal will always show the loading icon? You could add a second loading icon to the modal, if that were the case. – nycynik Jul 14 '15 at 14:16
  • increase z-index of loading spinner to higher than that of Modal Popup – user1608841 Jul 14 '15 at 14:21
  • we will need to see your code, the html and css. (since hte spinner already has a z-index of 1100, and boostrap modals are 1050) – nycynik Jul 14 '15 at 14:23
  • @ nycynik - I am infact using a different
    for loader in the modal html. But that ends up in 2 loading icons. One on the modal and the other one in the background on the parent.
    – Mustang Jul 14 '15 at 15:14
  • @Rahul : That sounds like a good tweak. What Z-index should I be using to achieve this behavior ? – Mustang Jul 14 '15 at 15:17
  • @SAM first see what z-index is there for Modal popup. Assuming you are using Angular UI Bootstrap Modal Popup, it has z-index of 1050, so for your spinner please add z-index higher than 1050 i.e. z-index:1100 – user1608841 Jul 14 '15 at 15:23
  • @Rahul : The spinner already has z-index of 1100. When I bring up the modal, I can see 2 spinners....one from the modal and the other one from the parent. – Mustang Jul 14 '15 at 15:36
  • @SAM are you using 2 spinner Div ? Do you really need them ?? Can we see your HTML css somehow ? – user1608841 Jul 14 '15 at 15:41
  • Yes. I am using 2 spinner div. One at the parent level. The other one at the modal html. – Mustang Jul 14 '15 at 15:53
  • Please see my edit. The basic idea is to have the spinner on the modal html whenever the modal is opened. That's the reason I am using another spinner on the modal. Pls correct me if I m wrong. – Mustang Jul 14 '15 at 16:03

0 Answers0