Help with getting gif to launch upon 'submit'


#1

I’d like to add a ‘gif’ to launch upon submit, so the submitter knows something is happening until the page redirects. Can you help me do that? I believe the 'submit button is on line 90. Much thanks.

<div class="wo_about_wrapper_parent">
	<div class="wo_about_wrapper"> 
		<div class="hero hero-overlay" style="background-color: #d84c47;"> 
			<div class="container">
				<h1 class="text-center">{{LANG upload_new_video}}</h1>
			</div> 
		</div>
		<svg id="wave" viewBox="0 0 100 15"><path fill="#d84c47" opacity="0.5" d="M0 30 V15 Q30 3 60 15 V30z"></path><path fill="#d84c47" d="M0 30 V12 Q30 17 55 12 T100 11 V30z"></path></svg>
	</div>
</div>
<div class="col-md-2"></div>
<div class="col-md-8 pt_page_margin">
	<div class="content pt_shadow">
		<div class="col-md-12 pt_upload_vdo">
			<?php if ($pt->user->admin == 1) { ?>
				<div class="alert alert-warning">
					<h4>Just admins can see this message</h4>
					<p>Note: Your server max upload size is: <?php echo ini_get('upload_max_filesize')?>, means you can't upload files that are larger than: <?php echo ini_get('upload_max_filesize')?><br><br> If you want to increase the limit or If you can't upload large files, go to Admin Settings > Settings > Site Settings > Max upload size and increase the value, if you still can't upload large files, please contact your host provider and let them increase the upload limit and max_execution_time.</p>
				</div>
			<?php } ?>
			<div class="upload" onclick="PT_OpenUploadForm();" data-block="video-drop-zone">
				<div>
					<svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" class="feather feather-upload"><path d="M14,13V17H10V13H7L12,8L17,13M19.35,10.03C18.67,6.59 15.64,4 12,4C9.11,4 6.6,5.64 5.35,8.03C2.34,8.36 0,10.9 0,14A6,6 0 0,0 6,20H19A5,5 0 0,0 24,15C24,12.36 21.95,10.22 19.35,10.03Z" /></svg>
					<h4>{{LANG darg_drop_video}}</h4>
					<p>{{LANG or}} {{LANG click_2choose_file}}</p>
					<button class="btn btn-main">{{LANG upload}}</button>
				</div>
			</div>
			<div class="progress hidden">
				<span class="percent">0%</span>
				<div class="progress_bar_parent">
					<div class="bar upload-progress-bar progress-bar active"></div> 
				</div>
				<div class="clear"></div>
				<div class="text-center pt_prcs_vdo"></div>
			</div>
		
			<form action="" method="POST" id="upload-video" class="hidden">
				<input type="file" name="video" accept="video/*" class="upload-video-file">
			</form>
     
			<div class="col-md-12 hidden" id="upload-form">
				<form action="" class="form-horizontal setting-panel pt_forms" method="POST">
					<div class="form-group">
						<label class="col-md-12" for="title">{{LANG video_title}}</label>  
						<div class="col-md-12">
							<input id="title" name="title" type="text" placeholder="" class="form-control input-md">
							<span class="help-block">{{LANG video_title_help}}</span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-12" for="description">{{LANG video_descritpion}}</label>  
						<div class="col-md-12">
							<textarea name="description" id="description" cols="30" rows="5" class="form-control"></textarea>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-12" for="category_id">{{LANG category}}</label>  
						<div class="col-md-12">
							<select name="category_id" id="category_id" class="form-control">
								<?php foreach($pt->categories as $key => $category) {?>
								<option value="<?php echo $key?>"><?php echo $category?></option>
								<?php } ?>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-12" for="tags">{{LANG tags}}</label>  
						<div class="col-md-12">
							<input id="mySingleFieldTags" name="tags" type="text" placeholder="" class="form-control input-md">
							<span class="help-block">{{LANG tags_help}}</span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-12" for="thumbnail">{{LANG thumbnail}}</label>  
						<div class="col-md-12">
							<div class="upload-product-image pull-left" onclick="document.getElementById('thumbnail').click(); return false">
								<div class="upload-image-content">
									<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-camera"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
								</div>
							</div>
							<div style="overflow-x: auto;width: calc(100% - 112px);">
								<div id="productimage-holder"></div>
							</div>
							<input id="thumbnail" name="thumbnail" type="file" class="hidden" accept="image/*">
							<span class="help-block">jpg, png, gif</span>
						</div>
					</div>
					<div class="last-sett-btn modal-footer" style="margin: 0px -40px -10px -40px;">
						<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>
					</div>
					<input type="hidden" name="video-location" id="video-location" value="">
				</form>
			</div>
			<div class="clear"></div>
		</div>
		<div class="clear"></div>
	</div>
</div>
<div class="col-md-2"></div>
<script>
$(document).ready(function() {
	$("#thumbnail").on('change', function() {
	//Get count of selected files
	var product_countFiles = $(this)[0].files.length;
	var product_imgPath = $(this)[0].value;
	var extn = product_imgPath.substring(product_imgPath.lastIndexOf('.') + 1).toLowerCase();
	var product_image_holder = $("#productimage-holder");
	product_image_holder.empty();
	if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
		if (typeof(FileReader) != "undefined") {
		//loop for each file selected for uploaded.
		for (var i = 0; i < product_countFiles; i++) 
		{
			var product_reader = new FileReader();
			product_reader.onload = function(e) {
				$("<img />", {
                    "src": e.target.result,
                    "class": "thumb-image"
                  }).appendTo(product_image_holder);
                }
                product_image_holder.show();
                product_reader.readAsDataURL($(this)[0].files[i]);
              }
            } else {
              product_image_holder.html("<p>This browser does not support FileReader.</p>");
            }
         }
	});
});

$(function () {
	$("#mySingleFieldTags").tagit({
		allowSpaces: true
	});
	var bar         = $('.bar');
   var percent     = $('.percent');
   var prcsvdo		= $('.pt_prcs_vdo');
   var is_uploaded = false;

   var video_drop_block = $("[data-block='video-drop-zone']");

   if (typeof(window.FileReader)){
      video_drop_block[0].ondragover = function() {
         video_drop_block.addClass('hover');
         return false;
      };
          
      video_drop_block[0].ondragleave = function() {
         video_drop_block.removeClass('hover');
         return false;
      };

      video_drop_block[0].ondrop = function(event) {
         event.preventDefault();
         video_drop_block.removeClass('hover');
         var file = event.dataTransfer.files;
         $('#upload-video').find('input').prop('files', file);
      };
   }

	$('#upload-video').submit(function(event) {
      let file_size = $(".upload-video-file").prop('files')[0].size;
      if (file_size > "{{CONFIG max_upload}}") {
         swal({
            title: '{{LANG error}}',
            text:  "{{LANG file_is_too_big}} <?php echo pt_size_format($pt->config->max_upload); ?>",
            type: 'error',
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'OK',
            buttonsStyling: true,
            confirmButtonClass: 'btn btn-success',
         }).then(function(){
            swal.close();
            $('.upload-video-file').val('');
         },
         function() {
            swal.close();
            $('.upload-video-file').val('');
         });
         return false;
      }
      else{
         var filename = $('.upload').val().split('\\').pop();
         $('#title').val(filename);
         $('#upload-form').removeClass('hidden');
         $('.upload').addClass('hidden');
      }
   });

   $('#upload-video').ajaxForm({
	    url: '{{LINK aj/upload-video}}?hash=' + $('.main_session').val(),
       dataType:'json',
	    beforeSend: function() {
	    	   $('.progress').removeClass('hidden');
            var percentVal = '0%';
            bar.width(percentVal);
            percent.html(percentVal);
	    },
	    uploadProgress: function(event, position, total, percentComplete) {
	         if(percentComplete > 50) {
	            percent.addClass('white');
	         }
            var percentVal = percentComplete + '%';
            bar.width(percentVal);
            percent.html(percentVal);

            if (percentComplete == 100) {
               prcsvdo.html('<svg width="30" height="10" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#000"><circle cx="15" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite" /><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite" /></circle><circle cx="60" cy="15" r="9" fill-opacity="0.3"><animate attributeName="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcMode="linear" repeatCount="indefinite" /><animate attributeName="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear" repeatCount="indefinite" /></circle><circle cx="105" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite" /><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite" /></circle></svg> {{LANG porcessing_video}}');
               $('.progress').find('.bar').removeClass('upload-progress-bar');
            }
        },
	    success: function(data) {
   	    	percentVal = '0%';
   	    	bar.width(percentVal);
            $('.progress').addClass('hidden');
            if (data.status == 200) {
            	$('#video-location').val(data.file_path);
				Snackbar.show({text: '<i class="fa fa-check"></i> ' + data.file_name + ' {{LANG successfully_uplaoded}}'});
            	$('#submit-btn').attr('disabled', false);
            	$('.upload-video-file').val('');
                $('#title').val(data.file_name);
            }
            else if(data.status == 401){
               swal({
                  title: '{{LANG oops}}!',
                  text: "{{LANG upload_limit_reached}}!",
                  type: 'info',
                  showCancelButton: true,
                  confirmButtonColor: '#3085d6',
                  cancelButtonColor: '#d33',
                  confirmButtonText: '{{LANG upgrade_now}}',
                  cancelButtonText: '{{LANG cancel}}',
                  confirmButtonClass: 'btn btn-success margin-right',
                  cancelButtonClass: 'btn',
                  buttonsStyling: false
               }).then(function(){
                  //Go pro
                  window.location.href = '{{LINK go_pro}}';
               },
               function() {
                  window.location.href = '{{LINK }}';
               });
            }
            else if(data.status == 402){
               swal({
                  title: '{{LANG error}}',
                  text: data.message,
                  type: 'error',
                  confirmButtonColor: '#3085d6',
                  cancelButtonColor: '#d33',
                  confirmButtonText: 'OK',
                  buttonsStyling: true,
                  confirmButtonClass: 'btn btn-success',
               }).then(function(){
                  swal.close();
                  $('.upload-video-file').val('');
               },
               function() {
                  swal.close();
                  $('.upload-video-file').val('');
               });
            }
            else {
				Snackbar.show({showAction: false,backgroundColor: '#e22e40',text: '<div>'+ data.error +'</div>'});
            }
	    }
	});

	$('#upload-form form').ajaxForm({
	    url: '{{LINK aj/submit-video}}?hash=' + $('.main_session').val(),
	    beforeSend: function() {
	    	$('#submit-btn').attr('disabled', true);
	    	$('#submit-btn').val("{{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: '#3085d6',
               cancelButtonColor: '#d33',
               confirmButtonText: 'OK',
               buttonsStyling: true,
               confirmButtonClass: 'btn btn-success',
            }).then(function(){
               window.location.href = '{{LINK upload-video}}';
            },
            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();
	});
});

function PT_OpenUploadForm() {
	$('#upload-video').find('input').trigger('click');
}
</script>
<style>.upload-s3-progressing{background: #4c9dd3;}</style>

#2

Do a search for “loading gif” install it; add it to the page in an element with display none css.
Listen for the on click, change the id of the element holding the gif to display how you want.
When the page returns you display none again.


#3

Thanks for your reply.
Can you please provide an example of “add it to the page in an element with display none css.
Listen for the on click”?
Much thanks


#4

https://jqueryhouse.com/jquery-ajax-loading-effect-a-simple-way-to-display-content-using-ajax-request/


#5

thank you …