BlockUI - Spinner not displaying #6028

exlnt created 7 years ago

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.

Go to accepted answer

25 Answer(s)

0

ismcagdas created 7 years ago
Support Team

Hi @exlnt

Are you using JQuery or Angular version ?

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

exlnt created 7 years ago

@ismcagdas - Jquery MVC. Net core.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

ryancyq created 7 years ago
Support Team

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?

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

exlnt created 7 years ago

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

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

ryancyq created 7 years ago
Support Team

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

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

exlnt created 7 years ago

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.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0
ryancyq created 7 years ago
Support Team
you can try to narrow the issue by:

test abp.ui.block() , if this works, the lib is working

test abp.ui.block('.my-class') if doesn't work, the css selector might be incorrect

test abp.ui.setBusy() if this works

test abp.ui.setBusy('.my-class') if this works

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

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

exlnt created 7 years ago

My AspNetZero version is 6.3.1, MVC JQuery.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

exlnt created 7 years ago

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?

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

ryancyq created 7 years ago
Support Team

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.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

exlnt created 7 years ago

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?

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0
exlnt created 7 years ago
@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?

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0
ryancyq created 7 years ago
Support Team
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

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

exlnt created 7 years ago

Files are present. I have run the npm create bundles command a few times.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

ryancyq created 7 years ago
Support Team

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

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

exlnt created 7 years ago

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

Do you want me to run the minify?

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

exlnt created 7 years ago

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.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0
ismcagdas created 7 years ago
Support Team
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",

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
1
exlnt created 7 years ago
@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'); });

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

ismcagdas created 7 years ago
Support Team

@exlnt

Could it be a cache issue ?

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

exlnt created 7 years ago

@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?

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)

ryancyq created 7 years ago

Support Team

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 7 years ago

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

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

ryancyq created 7 years ago
Support Team

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

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

exlnt created 7 years ago

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

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)

Have an answer to this question? Log in and write your answer.