Open Closed

BlockUI - Spinner not displaying #6028


0
exlnt created

I have read this ABP Document and this Forum post. I have checked my page and both scripts (blockUI  and spin.js) are loaded on the page. When I use this line of code:  abp.ui.setBusy('.login-form'); It does not show the blockUI overlay at all. When I use this line of code: abp.ui.block(); it does block the whole page. However it does NOT show any kind of "Spinner". How do I use blockUI and get it to display a spinner. Also, how do I choose the type of spinner displayed. I would very much like to use the spinner you are using on your demo portal on the AspNetZero site.


25 Answer(s)
  • 0
    ismcagdas created

    Hi @exlnt

    Are you using JQuery or Angular version ?

  • 0
    exlnt created

    @ismcagdas - Jquery MVC. Net core.

  • 0
    ryancyq created

    abp.ui.setBusy('.login-form');

    Hi @exlnt, are you uing the code above in a login page? Can you try also if abp.ui.setBusy($('.login-form')); works for you?

  • 0
    exlnt created

    @ryancyq - Please read my original post again. I said that code does not work either.

  • 0
    ryancyq created

    @exlnt can you try this $(.login-form) in your browser console for the page that setBusy() will run on? Does it return any result?

  • 0
    exlnt created

    Not sure I follow what you are asking me to do. But this code: abp.ui.block(); //Block the whole page works from code and console. However it does not display any overlay text or a spinner. I want some overlay text and a spinner to display. I want the same feature as used in the AspNetZero demo portal.

    Also as I stated earlier the code abp.ui.setBusy does not show anything, not even an overlay.

  • 0
    ryancyq created

    you can try to narrow the issue by:

    1. test abp.ui.block() , if this works, the lib is working
    2. test abp.ui.block('.my-class') if doesn't work, the css selector might be incorrect
    3. test abp.ui.setBusy() if this works
    4. test abp.ui.setBusy('.my-class') if this works

    as for the spinner, what is the version of your ANZ project?

  • 0
    exlnt created

    My AspNetZero version is 6.3.1, MVC JQuery.

  • 0
    exlnt created

    In my chrome console I am seeing these messages logged.

    WARN: app-layout-libs.js?v=sm6yeTqKaPg7WdH6tGylsDxoL7C6xzVP9-q2szCogzk:77095 abp.ui.clearBusy is not implemented! app-layout-libs.js?v=sm6yeTqKaPg7WdH6tGylsDxoL7C6xzVP9-q2szCogzk:77095 WARN: app-layout-libs.js?v=sm6yeTqKaPg7WdH6tGylsDxoL7C6xzVP9-q2szCogzk:77095 abp.ui.setBusy is not implemented! app-layout-libs.js?v=sm6yeTqKaPg7WdH6tGylsDxoL7C6xzVP9-q2szCogzk:77095 WARN: app-layout-libs.js?v=sm6yeTqKaPg7WdH6tGylsDxoL7C6xzVP9-q2szCogzk:77095 abp.ui.clearBusy is not implemented!

    Is this the reason its not working, if yes, what do I need to do to enable full blockUI functionality?

  • 0
    ryancyq created

    Hi, abp.blockUi is implemented by default and included in

    https://github.com/aspnetzero/aspnet-zero-core/blob/dev/aspnet-core/src/MyCompanyName.AbpZeroTemplate.Web.Mvc/bundleconfig.json#L181

    Can you check if your app-layout-libs.js is bundled correctly?

    if you are using visual studio, there is a bundler & minifier extension available in the market place that will work for it.

  • 0
    exlnt created

    I checked my app-layout-libs.js bundle settings with your GIT repo version and its the same. I dont see anything missing? Can you share the code from the demo portal on how the blockUI is created with spinner?

  • 0
    exlnt created

    @ryancyq - Can you please provide a solution on this issue. I cannot seem to get BlockUI working on any page. I found this code in the app-layout-libs.js, this seems to be the source of the error getting logged in the console. What is this is doing or supposed to do?

    ` /* UI BUSY */ //Defines UI Busy API, not implements it

    abp.ui.setBusy = function (elm, optionsOrPromise) {
        abp.log.warn('abp.ui.setBusy is not implemented!');
    };`
    

    On on my index page, I called blockUI using this code.

    abp.ui.setBusy('.m-subheader .m-content');
    

    But still I don't get any blocking and the error is getting logged in the console?

  • 0
    ryancyq created

    Hi, it could be your js bundle has missing files, can you check if the file exists sfter you restore the js dependencies?

    • wwwroot/lib/abp-web-resources/Abp/Framework/scripts/abp.js
    • wwwroot/lib/abp-web-resources/Abp/Framework/scripts/libs/abp.blockUI.js
  • 0
    exlnt created

    Files are present. I have run the npm create bundles command a few times. VS-Abp-WebResources.JPG

  • 0
    ryancyq created

    Hi, there seems to be minus sign before the files. Can you check the files physically on your computer instead of visual studio.

    After that, please try to bundle & minify on app-layout-lib.js and make sure all js files are bundled into it

  • 0
    exlnt created

    The minus sign just indicates that files are not in Git Repo. Both files are physically present on my PC. Abp-WebResources.JPG

    Do you want me to run the minify?

  • 0
    exlnt created

    I did the rebudle option on the app-lib-layout file as you suggested. Still the same issue persists and the same error is getting logged in the console.

  • 0
    ismcagdas created

    Hi @exlnt

    Yes, I faced the same problem on the dev branch. You need to change spin.js mapping in package-mapping-config.js like below;

    "node_modules/spin.js/spin.js": "spin.js",
    "node_modules/spin.js/jquery.spin.js": "spin.js",
    

    Then, replace usages of spin.js in bundleconfig.json like below;

    "wwwroot/lib/spin.js/spin.js",
    "wwwroot/lib/spin.js/jquery.spin.js",
    
  • 1
    exlnt created

    @ismcagdas - Thank you!! That worked!!

    One note for others that use the solution above, you do need to run the command "npm run create-bundles" after making the changes mentioned in the prior post.

    Can you please tell me how I can change the look of the spinner used? I would like to use a different spinner with some text as well. I really like the one you have used on your demo portal of AspNetZero web site.

    Update: I was just testing some more and when using the below code. The clearBusy is NOT working. The spinner just stays there.

       if (!_$Form.valid()) {
            return;
        }
        abp.ui.setBusy('#tabDetails');
        var legalEntity = _$Form.serializeFormToObject();
        _legalEntitysService.updateLegalEntity(
            legalEntity
        ).done(function () {
            abp.ui.clearBusy();
            abp.notify.info(app.localize('SavedSuccessfully'));
            abp.event.trigger('app.editLegalEntityModalSaved');
        });
    
    
  • 0
    ismcagdas created

    @exlnt

    Could it be a cache issue ?

  • 0
    exlnt created

    @ismcagdas - No it was not cache issue. I fixed it by using abp.ui.clearBusy('#tabDetails');

    Can you answer my other question about how to style or change the look of the spinner?

  • 1
    ryancyq created

    you can override with the following.

    abp.libs.spinjs = {
            spinner_config: {
                lines: 11,
                // more config
            },
    
            //Config for busy indicator in element's inner element that has '.abp-busy-indicator' class.     
            spinner_config_inner_busy_indicator: {
                lines: 11,
                // more config
            }
        };
    

    for configuration details, see https://spin.js.org/#usage

  • 0
    exlnt created

    @ryancyq - Where would be the best place to use this override script so that I dont repeat it on each of my view scripts?

  • 0
    ryancyq created

    If you want to override the styling across the app, you can create a abp.spin-overrides.js with the overriden configuration and add this file after abp.spin.js (also add it into bundle config).

    For bundleconfig.json, you can look fort /app-layout-libs.js and /account-layout-libs.js

  • 0
    exlnt created

    @ryancyq, @ismcagdas - Thank you both for your help!