Base solution for your next web application
Open Closed

UI BLOCKING #1222


User avatar
0
Hasan created

Hello Team

I have tried using

abp.ui.block();

from Angular Controller but it is not working.

Do i need to import anything into my Page ? and i have checked the page

http://www.aspnetboilerplate.com/Pages/Documents/Javascript-API/UI-Block-Busy

It says "(See this javascript file for simple implementation and defaults)" but there is no file there. It is better if you can give a example.

Thanks


5 Answer(s)
  • User Avatar
    0
    ismcagdas created
    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.

  • User Avatar
    0
    Hasan created

    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.

  • User Avatar
    0
    ismcagdas created
    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>

  • User Avatar
    0
    Hasan created

    Thanks Sir

    Is it possible to give me a quick example ?

    Much Appreciated..

  • User Avatar
    0
    ismcagdas created
    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.