UI BLOCKING #1222

5 Answer(s)

• 

  0

  ismcagdas created 8 years ago

  Support Team

  Hi,

  Two files must be included in your page.

  1 - abp.blockUI.js which is under path ""~/Abp/Framework/scripts/libs/abp.blockUI.js"" 2 - block UI jquery plugin which must be under this path "~/libs/jquery-blockui/jquery.blockui.min.js"

  But these two files must be already included in the AppBundleConfig class. It shouldn't be a problem if you are trying to use this code on the admin site.

  Save Cancel
• 

  0

  hasan created 8 years ago

  I have done both but it is not working.

  I have attached my code here..

  vm.importAll = function () {
                  abp.message.confirm(app.localize('ImportWarning'),
                      function (isConfirmed) {
  
                          if (isConfirmed) {
                              abp.ui.block();
                              setupService.seedSampleCompany().success(function() {
                                  abp.notify.success(app.localize('Organization') + ' ' + app.localize('SuccessfullyImported'));
                                  setupService.seedSampleMenu().success(function() {
                                      abp.notify.success(app.localize('Menu') + ' ' + app.localize('SuccessfullyImported'));
  
                                      setupService.seedSampleCustomer().success(function() {
                                          abp.notify.success(app.localize('Customer') + ' ' + app.localize('SuccessfullyImported'));
                                      }).finally(function() {});
  
                                      setupService.seedSampleSupplier().success(function() {
                                          abp.notify.success(app.localize('Supplier') + ' ' + app.localize('SuccessfullyImported'));
                                      }).finally(function() {
                                          setupService.seedSampleMaterial().success(function() {
                                              abp.notify.success(app.localize('Material') + ' ' + app.localize('SuccessfullyImported'));
                                          });
                                      });
                                      setupService.seedSampleTax().success(function() {
                                          abp.notify.success(app.localize('Tax') + ' ' + app.localize('SuccessfullyImported'));
                                      }).finally(function() {});
  
                                  });
  
                              });
                              abp.ui.unblock();
                          }
                      });
              }
  

  My Page has already have got two files that you have mentioned.

  Save Cancel
• 

  0

  ismcagdas created 8 years ago

  Support Team

  Hi,

  Before doing anything, you can run "abp.ui.block();" on your Chrome's developer console to see if this really blocks the screen or not ?

  You should call "abp.ui.unblock();" inside of your ajax success handler, it's outside of all success handlers for now. Because of that your screen is getting blocked and then unblocked immediately.

  If you want to unblock your screen after all ajax calls completed, then you can use angular's $q.all.

  These two links might help you for that,

  <a class="postlink" href="http://stackoverflow.com/questions/23931846/wait-for-all-http-requests-to-complete-in-angular-js">http://stackoverflow.com/questions/2393 ... angular-js</a> <a class="postlink" href="https://code.angularjs.org/1.1.5/docs/api/ng.$q">https://code.angularjs.org/1.1.5/docs/api/ng.$q</a>

  Save Cancel
• 

  0

  hasan created 8 years ago

  Thanks Sir

  Is it possible to give me a quick example ?

  Much Appreciated..

  Save Cancel
• 

  0

  ismcagdas created 8 years ago

  Support Team

  Hi,

  Your code might look like this

  vm.importAll = function() {
      abp.message.confirm(app.localize('ImportWarning'),
          function(isConfirmed) {
  
              if (isConfirmed) {
                  abp.ui.block();
                  setupService.seedSampleCompany().success(function() {
                      abp.notify.success(app.localize('Organization') + ' ' + app.localize('SuccessfullyImported'));
                      setupService.seedSampleMenu().success(function() {
                          abp.notify.success(app.localize('Menu') + ' ' + app.localize('SuccessfullyImported'));
  
                          var seedSampleCustomer = setupService.seedSampleCustomer().success(function() {
                              abp.notify.success(app.localize('Customer') + ' ' + app.localize('SuccessfullyImported'));
                          }).finally(function() {});
  
                          var seedSampleSupplier = setupService.seedSampleSupplier().success(function() {
                              abp.notify.success(app.localize('Supplier') + ' ' + app.localize('SuccessfullyImported'));
                          }).finally(function() {
                              setupService.seedSampleMaterial().success(function() {
                                  abp.notify.success(app.localize('Material') + ' ' + app.localize('SuccessfullyImported'));
                              });
                          });
  
                          var seedSampleTax = setupService.seedSampleTax().success(function() {
                              abp.notify.success(app.localize('Tax') + ' ' + app.localize('SuccessfullyImported'));
                          }).finally(function() {});
  
                          $q.all([seedSampleCustomer, seedSampleSupplier, seedSampleTax]).then(function() {
                              abp.ui.unblock();
                          });
  
                      });
  
                  });
  
              }
          });
  }
  

  I didn't include seedSampleMaterial. If it takes long time, your screen might be unblocked before it's completed. I think you might figure it out after you run this code successfully :).

  I hope this helps you.

  Save Cancel