Skip to:
Content
Pages
Categories
Search
Top
Bottom

AJAX Request Spinner


  • rsmithgs
    Participant

    @rsmithgs

    Hello,

    I’m trying to add a spinner gif to the webpage whenever someone clicks a button that uses AJAX to show them that their request is being worked on. I wish to use the Nouveau theme.

    I’m running WordPress 5.1 and BuddyPress 4.2.0

    There hasn’t been much on this topic except for here (which is now 4.75yrs old): Feature Request AJAX Loading Spinner

    To start, I’m trying to get things to work with the messaging section.

    I added <img class='ajax-gif' src='http://localhost:8080/WEBSITE/wp-content/themes/THEME/classicloader30px.gif'/>

    to a file I made in my theme file for the messages template:
    wp-content/themes/THEME/buddypress/common/js-templates/messages/index.php

    It was added underneath each input type=button and input type=submit.

    Next I added this css:

    .ajax-gif{
    	display:none;
    }
    
    .loading + .ajax-gif, .loading > .ajax-gif{
    	display:block;
    }

    My only problem now is that these buttons do not apply the “loading” class to the buttons anymore (like they do in Legacy).
    I found that you can add and remove the classes during the function that is triggered on the click by going to /wp-content/plugins/buddypress/bp-templates/bp-nouveau/js/buddypress-messages.js.
    Unfortunately, I don’t believe this is a file meant to be able to be changed in custom files.

    I added:
    $('#bp-messages-send').addClass('loading'); to sendMessage: function(),
    $( '#send_reply_button' ).addClass( 'loading' ); to sendReply: function(),
    and $( '#send_reply_button' ).removeClass( 'loading' ); to replySent and replyError.

    Any help in figuring out how to make this not be lost on a new BuddyPress update would be extremely helpful.

    I’m also trying to figure out how to target any other BuddyPress AJAX events. I’m sure I can do the same thing with the Members Directory, but will probably need to do the same thing with figuring out what function is called when someone requests a friendship/cancel a friendship etc.

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.
Skip to toolbar