getting a simple spinner to work

Viewing 5 replies - 1 through 5 (of 5 total)
  • HudsonValleyWebDesign

    (@jaycbrf)

    9 years, 10 months ago

    Here is a link to the image locations for the spinners.
    http://austin.passy.co/2014/native-wordpress-loading-gifs/

    I believe you would use jQuery show/hide to display the spinner onSubmit

    Thread Starter Robin W

    (@robin-w)

    9 years, 10 months ago

    Thanks for the quick response.

    I believe you would use jQuery show/hide to display the spinner onSubmit

    That’s the bit I need help with! You could have written ‘you’ll need to do a bi-lateral arthroplasty’ for all it means to me !

    MyThemeShop

    (@mythemeshop)

    9 years, 10 months ago

    Hi,
    Here is some simple jQuery code to append an image to the button element when clicked:

    jQuery(document).ready(function($) {
  $('.bsp-submit').click(function() {
    $(this).append('<img src="http://domain.com/path/to/image.gif" />');
  });
});

    Hope that helps.

    Thread Starter Robin W

    (@robin-w)

    9 years, 10 months ago

    EDITED : now is working in everything but Firefox

    That is brilliant – thank you so much for this – I really appreciate your help.

    I now have

    in my form :

    <button type=”submit” id=”bbp_topic_submit” name=”bbp_topic_submit” class=”bsp-submit”><?php esc_html_e( ‘Submit’, ‘bbpress’ ); ?></button>

    in my plugin function file :

    add_action( 'wp_enqueue_scripts', 'bsp_enqueue_submit' );

	function bsp_enqueue_submit() {
    wp_enqueue_script( 'bsp_enqueue', plugins_url('js/bsp_enqueue_submit.js',dirname( __FILE__ )), false, null, 'all' );
	}

    and a bsp_enqueue_submit.js file with

    jQuery(document).ready(function($) {
  $('.bsp-submit').click(function() {
   $(this).append('ting<img src="/wp-admin/images/loading.gif" />');
  });
});

    This changes ‘submit’ to ‘submitting’ by appending ‘ting’ and in IE and Chrome adds the spinner which spins- fantastic !

    But in Firefox it adds the ‘ting’ to get ‘submitting’ creates the space for the spinner but the spinner doesn’t appear.

    If I change my button to

    <button type=”submit” id=”bbp_topic_submit” name=”bbp_topic_submit” class=”bsp-submit”><?php esc_html_e( ‘Submit’, ‘bbpress’ ); ?>ting<img src=”/wp-admin/images/loading.gif” /></button>

    It works, so it is something in the way it is being appended?

    Any ideas?

    Thread Starter Robin W

    (@robin-w)

    9 years, 10 months ago

    OK, so after a lot of playing, this is where I think I am – posting for someone coming across this later on.

    1. bbpress submit is a php operation (server side) , but adding the spinner is a javascript (client side). Rewriting how this works would make bbpress submit incompatible with the many themes that re-work form submission, so I had to avoid that.

    2. Each type of browser (IE, Edge, Chrome, Firefox) handle form submission slightly differently. Several stop rendering the form as soon as the click button is clicked, as they consider this as a page reload, so don’t let the spinner get into action before they freeze. I use a div added to an action within the bbpress form to make sure that the spinner is loaded, as otherwise it doesn’t get even a static display before the screen freezes.

    From what I have been able to test, Chrome always works, Firefox and IE mostly work – in that the spinner spins. Edge doesn’t seem to spin at all. However all as far as I can test put a minimum of a stationary spinner on the button, so you know that the submit is doing something.

    so I now have in my functions file

    add_action( 'wp_enqueue_scripts', 'bsp_enqueue_submit' );

	function bsp_enqueue_submit() {
    wp_enqueue_script( 'bsp_enqueue', plugins_url('js/bsp_enqueue_submit.js',dirname( __FILE__ )), false, null, 'all' );
	wp_enqueue_script( 'bsp_spin', plugins_url('js/spin.js',dirname( __FILE__ )), false, null, 'all' );
	}

    and

    //this function adds a div to ensure pre-load of spinner in topic format
function bsp_load_spinner () {
	echo '<div id="bsp-spinner-load"></div>' ;
	}

add_action ('bbp_theme_before_topic_form_submit_button' , 'bsp_load_spinner' ) ;

    I have in css

    /* to get the spinner.gif loaded before submit executes */
#bsp-spinner-load {
background: url(/wp-admin/images/spinner.gif) no-repeat;
display : none ;
}

.bsp-spinner {

  background: url(/wp-admin/images/spinner.gif) no-repeat;
  -webkit-background-size: 20px 20px;
  background-size: 20px 20px;
  float: right;
  opacity: 0.7;
  filter: alpha(opacity=70);
  width: 20px;
  height: 20px;
  margin: 2px 5px 0;
}

    and a javascript file called bsp_enqueue_submit.js which has

    jQuery(document).ready(function($) {
  $('#bbp_topic_submit').click(function() {
		$(this).append('<span class="bsp-spinner"></span>');
   });
   $('#bbp_reply_submit').click(function() {
		$(this).append('<span class="bsp-spinner"></span>');
   });

 });

    If you are reading this and need further help, respond to this and I’ll try and help

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘getting a simple spinner to work’ is closed to new replies.

Tags