Help with having graphical element (throbber) appear upon submit

I’d like help with adding a graphical element, throbber.gif, to appear upon upload ‘submit’.

Currently, upon completion of the Upload Form and ‘Publish’ button (submit) is selected, the button text changes from ‘Publish’ to ‘Please Wait’, successfully.

Upon the ‘Please Wait’ appearing I’d like a the throbber.gif to also appear, so that the uploder/user knows something is happening while he waits. Here’s some of the current code:

<button type="submit" id="submit-btn" class="btn btn-main setting-panel-mdbtn" disabled><svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check-circle'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'></path><polyline points='22 4 12 14.01 9 11.01'></polyline></svg> {{LANG publish}}</button>

	$('#upload-form form').ajaxForm({
	    url: '{{LINK aj/submit-video}}?hash=' + $('.main_session').val(),
	    beforeSend: function() {
	    	$('#submit-btn').attr('disabled', true);
	    	$('#submit-btn').text("{{LANG please_wait}}");
	    },
	    success: function(data) {
	    	if (data.status == 200) {
	    		window.location.href = data.link;
	    	}
         else if(data.status == 402){
            swal({
               title: '{{LANG error}}',
               text: data.message,
               type: 'error',
               confirmButtonColor: '#cccccc',
               cancelButtonColor: '#dddddd',
               confirmButtonText: 'OK',
               buttonsStyling: true,
               confirmButtonClass: 'btn btn-success',
            }).then(function(){
               //window.location.href = '{{LINK upload-video}}';
               window.location.href = '{{LINK home}}';
            },
            function() {
               window.location.href = '{{LINK }}';
            });
         }
         else {
	$('#submit-btn').attr('disabled', false);
	     $('#submit-btn').val('{{LANG publish}}');
	Snackbar.show({text: '<div>'+ data.message +'</div>'});
	    }
	    }
	});

	$('.upload-video-file').on('change', function() {
   	$('#upload-video').submit();
	});
});

Any guidance is appreciated.

Here’s a good throbber library.
http://aino.github.io/throbber.js/

Thanks for the link.

So, to test I added:

"onsubmit="throb()"
to
<button type="submit" id="submit-btn" class="btn btn-main setting-panel-mdbtn" disabled>
like so:
<button type=“submit” id=“submit-btn” class=“btn btn-main setting-panel-mdbtn” disabled "onsubmit=“throb()”>

and added this to the same page:

<script>
var throb = Throbber();
throb.appendTo( document.getElementById( 't1' ) );
throb.start();
</script>

but no success. I look forward to any additional guidance.

Did you include the throbber library? The throbber.js file from https://github.com/aino/throbber.js

Thanks for your reply.
Of course I forgot to add that — thanks

So, I now have this:

<script src="https://.....com/throbber.js-master/throbber.js"></script>

yet still no throbber appears.

Any additional suggestions are welcomed.

Yes, stop using the one from the demo site. Many sites get upset at external sites using their content, in the same way that you might not like don’t strangers coming in off the street to use your own kitchen and toilet.

Download the throbber file to where you have your own files, and use it from there instead.

Note: We don’t have access to your own test page, so troubleshooting must occur very slowly, one tiny step at a time.

Thanks again for your reply.

I’m not clear on “stop using the one from the demo site”.
I have downloaded the files from the demo site to where I have my own files.
And this is where I have the downloaded thobber files to:
https://…com/throbber.js-master/throbber.js

Any additional help is appreciated

Good one. I misunderstood that you were accessing the script from their demo page.

If it’s not working, there’s most likely an error reporting what’s causing the issue.
What error is shown in your browser console?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.