[TIP] adding the "wait" cursor for uploads - all themes

[design]

very simple!!!!

surprised it's not already in use on all themes!

so, you need to know what class you have named your button. for instance; with a theme using bootstrap, it's called ".btn"
in bender it's called ".ui-button" in modern it's called nothing, so you will need to class it.

if you do not know what I'm referring to it is this:
<button class="****"  type="submit"><?php _e('Publish', 'modern'); ?></button>

now open the item-post.php and paste the following just before your body closing tag </body>

<script> $(document).ready(function() {
    $(".btn").click(function() {
        $("*").css("cursor", "wait");
    });
});</script>

finally replace the .btn with the proper button class as explained above, keeping the quotes.

[frosticek]

@design
Nice tip at all, but I do not know what * selector do
I would create it like this:

<script>
$(document).ready(function() {
    $(".btn").click(function() {
        $(this *).css("cursor", "wait");
    });
});
</script>

[design]

it's the asterisk, needs to stay. I would assume it is a character encoding for css3

[frosticek]

@design
Oh, I understand now... edited my previous code

[design]

don't forget the quotes  the world will end without those quotes.

[gnoe]

Nice tip, thanks.
Is this similar with this?
http://forums.osclass.org/tips-and-tricks/tip-add-an-upload-status-indicator-on-the-item-postedit-pages/
 
Should we add it on item-edit.php too ?

[frosticek]

@gnoe
Yes it is very similar in functionality.

@design
I found in thread posted here problem if you submit the ad without selecting a category, loading cursor will also be used.

[design]

this is using the css3 with super light scripting. I like this tip better (a little more modern) :-)

besides if i can't have html5, I'm going to use as much css3 as I can! (stomping foot)


you can use this where ever you want a load button swirly indicator

[volunteer]

AWESOME little script! thanks!

what about adding something like: var selected = $("#catId").val();
so the waiting cursor doesnt show when category wasn't selected

[design]

if you have to wait at all for osscript, which happens a lot, this will keep your users on page. so what does it matter if it shows up if the category is selected or not?

[volunteer]

if u forget to fill the category and reach the bottom of the page to click submit and do get the waiting cursor is confusing?

[design]

you should get an error message. is that part conflicting?

[frosticek]

@design
Maybe it would be nice to add here some controllers for required fields:

Code: [Select]


<script>
$(document).ready(function() {
    $(".btn").click(function() {
      if( $("#req_field_1").val() <> '' and $("#req_field_2").val() <> '' and .... and $("#req_field_XX").val() <> '' ) {
        $(*).css("cursor", "wait");
      }
    });
});
</script>


[design]

by all means do what you need to get your site working--my required field errors are not having an issue. (kudos' to Max)

It is still a super simple script :-)

[soymarketing]

Awesome! Thanks for sharing

I do agree with what others have said though, when you Publish (and the animation starts) IF an error appears and you are asked to change it, the animation keeps showing... This might not be a problem for me because I know it doesn't matter and I can just keep going, but for the end user, they might find this confusing/frustrating