Div or script for a spinner doesn't work on a form when there is an editable list view

Badge +1

I am trying to get a spinner from a div and script using two literal data labels (Spinner works when i closk start button and close when i click close button)



 div I used



<div id="wait" style="display:none;width:69px;height:89px;position:absolute;top:50%;left:50%;padding:2px;"><img src='/Runtime/Styles/Themes/Lithium/RuntimeTheme/*personal details removed*' width="64" height="64" /><br>Loading..</div>


To Show:  <script>$("#wait").css("display", "block");</script>


To hide: <script>$("#wait").css("display", "none");</script>


Everything works well if there are item views or normal list views in the form. But when I put an editable list view to the same form the code doesnt works?? or it doesnt show the spinner.  please refer the attached. Thanks


Any Idea why??




3 replies

Badge +15




I have a different script that loads the spinner. When I want to show the spinner, I just throw the entire script into a literal data label. When I no longer need it, I just remove it.


show spinner:
<script>$('body').append('<div id="customSpinner" class="base0 ajaxLoader modal-element" style="left: 0px; top: 0px; width: 100%; height: 100%; position: fixed;"></div>');</script>


remove spinner:

Thank you @boringNerd1! I have been searching everywhere to figure out how to display that spinner. Question - I noticed that it displays a black spinner instead of a white one like the default spinner shows. Does it do the same for you? Do you know if there's a way to change that?



Userlevel 1
Badge +7
Wow. I wrote this a few years back and I haven't use this since so my memory of how this work may be hazy.

If I recall correctly, I am using the default spinner that comes with K2, which explains why the spinner only has one color. If you need a different type of spinner, you can play around with the javascript.

You will notice the script inserts a div element into the body. The div element has an id and some classes set to it. The classes are the one that attaches the certain styles that K2 is using and display the spinner and background. You can make use of Chrome to inspect the element to see what kind of styles are attached it and see how you can modify the script to it to display a different spinner. That is how I came up with this script in the first place.