Help with "Please Wait" message

JavaScript
1

I am using a web video script where this code is used for the video upload page.
After submitting, a “Please Wait” should appear (line 351)(out of 400 lines).
Can you please look around there and suggest why it doesn’t appear after submission?

<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 upload-video" 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>

<style>
.form-group1.hidden {
  visibility:hidden;
}
.form-group1.hidden {  /*this is being used, it overrides the previous rule*/
  position:absolute;
  left:-999em;
}
p {margin:0}
</style>

			<form action="" method="POST" id="upload-video" style="visibility: hidden;">
				<input type="file" name="video" accept="video/*" class="upload-video-file">
			</form>
			<div class="fluid upload-ffmpeg-mode hidden" id="upload-form">
				<div class="col-md-12">
					<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_description}}</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-group1">--><div class="form-group1 hidden">
                     <!--<label class="col-md-12" for="privacy">{{LANG privacy}}</label>-->
                     <!--<div class="col-md-12">-->
                        <select name="privacy" id="privacy" class="form-control">
                              <option hidden value="0">public</option>
						      <option hidden value="1">private</option>
    						  <option selected value="2"></option>
                               <!--<option value="2">{{LANG unlisted}}</option>-->
                        </select>
                     <!--</div>-->
                  </div>
                  <div class="form-group1 hidden">
                        <!--<label class="col-md-12" for="age_restriction">{{LANG age_restriction}}</label>-->
                        <!--<div class="col-md-12">-->
                           <select name="age_restriction" id="age_restriction" class="form-control">
                              <option selected value="1">{{LANG all_ages}}</option>
                              <option hidden value="2"></option>
                           </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 hidden" id="video-thumnails">
							<label class="col-md-12" for="thumbnail">{{LANG thumbnail}}</label>
							<div class="col-md-12">
								<div class="fluid">
									<div class="carousel slide" id="choose-thumnail-cr" data-interval="false" style="cursor: pointer">
										<div class="carousel-inner">
											<div class="item active"></div>
										</div>
										<div class="fluid choose-thumnail-control">
											<span class="pull-left">{{LANG video_thumbs}}</span>
											<span class="pull-right">
												<a class="btn btn-default" href="#choose-thumnail-cr" data-slide="prev">
													<i class="fa fa-caret-left"></i>
												</a>
												<a class="btn btn-default" href="#choose-thumnail-cr"  data-slide="next">
													<i class="fa fa-caret-right"></i>
												</a>
											</span>
										</div>
									</div>
								</div>
							</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="">
						<input type="hidden" name="video-thumnail" id="video-thumbnail" value="">

					</form>
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<div class="clear"></div>
	</div>
</div>
<form action="" id="thumbnail-form" method="POST">
   <input id="thumbnail" name="thumbnail" type="file" style="visibility: hidden;" accept="image/*">
</form>
<div class="col-md-2"></div>


<script>
var video_thumb = Array();
$(document).on('click', '.carousel-inner', function(event) {

   $('#thumbnail').trigger('click');
});
$('#thumbnail').change(function(event) {
   $.ajax({
        type: 'POST',
        url: "{{LINK aj/upload-thumbnail}}?hash=" + $('.main_session').val() ,
        data: new FormData($("#thumbnail-form")[0]),
        processData: false,
        contentType: false,
        success: function(data) {
            $('.carousel-inner').append('<div class="item"><img src="' + data.thumbnail + '"></div>');
            video_thumb.push(data.thumbnail);
            $('#video-thumnail').val(data.thumbnail);
            $(".carousel-inner").find('.item').removeClass('active');
            $(".carousel-inner").find('.item:last').addClass('active');
        }
    });
});
$(function () {

   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);
      };
   }

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


	$('#upload-video').submit(function(event) {
      var 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');
      }
   });

   $('#choose-thumnail-cr').bind('slid.bs.carousel', function (e) {
      console.log(video_thumb);
      var vsthumb = video_thumb[$(this).find('.active').index()];
      console.log(vsthumb);
      $("#video-thumnail").val(vsthumb);
   });

   $('#upload-video').ajaxForm({
      url: '{{LINK aj/upload-video-ffmpeg}}?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 processing_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_uploaded}}'});
         	$('#submit-btn').attr('disabled', false);
         	$('.upload-video-file').val('');
			   $('#title').val(data.file_name);
            $("#video-thumnails").removeClass('hidden');

            var i       = 0;
            var url     = '{img}';
            video_thumb = data.images;

            $('.carousel-inner').html('');
            $.each(video_thumb, function( index, value ) {
                $('.carousel-inner').append('<div class="item"><img src="' + value + '"></div>');
                i++;
            });
            $(".carousel-inner").find('.item:first-child').addClass('active');
            $("#video-thumnail").val(video_thumb[0]);
            $('.carousel').carousel({
              interval: false
            });


            // $("#video-thumnails").find('.item').each(function(index, el) {
            //    if (i == 0) {
            //       $("#video-thumnail").val(data.images[i]);
            //    }

            //    $(el).html($("<img>",{
            //       src:url.replace('{img}',data.images[i])
            //    }));

            // });
         }
         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(){
               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/ffmpeg-submit}}?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');
}

jQuery(function($) {
   $(document).ready(function() {
      $( '.upload' ).on('click', function(e) {
         $( '.upload-video-file' ).trigger("click");
      });
   });
});
</script>
<style>.upload-s3-progressing{background: #4c9dd3;}</style>
2

Hi,

This won’t answer your question, so sorry in advance, but it might help you get an answer if people didn’t have to wade through 400 lines of code to understand the problem you are having.

I strongly recommend that you read this, then edit your question accordingly:

If you do, feel free to tag me and I’ll happily take a look.

6 Likes
3

I suspect you need to set the HTML property to your “Please wait” text, not the val.

4

Thanks. can you please explain more what you mean by “set the HTML property to your “Please wait” text, not the val”? or an example, please?

5

I can’t really think of a way to expand on that. Have you found the line that displays the message? When you have a detailed look at that, along with my post above, I would think that would clarify it.

I don’t really know JS or AjaxForm, but I did a quick Google on “set button text in js” and that showed a difference to what you are doing here.

6

It’s difficult. Too many times I was admonished for not providing enough code, on this site. So, even though there is a lot, I added approximately where to look by providing the line number, and line total

7

You’re not getting it. I could probably help you, but I’m not able to invest the time it would take me to understand and reproduce your problem.

Why is it so hard for you to make a small, self-contained example that isolates the problem that I can run?

Anyway, I don’t mean to have a go, rather just point out what you could do better.

Good luck :slight_smile:

1 Like
8

No one will complain if you take the time to create a minimal “working page” that demonstrates the problem. A “working page” starts with <!doctype html>, ends with </html> and contains all of the HTML, CSS, JS, and full links to resources needed to demonstrate the problem, but no more.

It’s not too hard to create a copy of a page and delete the irrelevent HTML, then do the same for the CSS. If you can’t provide links to resources then include them in a zip file.

Snippits of code that do nothing are usually useless if we need to see the problem in action to troubleshoot it. Likewise, we can’t troubleshoot screen shots, however screen shots that compare two states may be helpful.

Apparently you are keeping ther URL to your site a secret, or maybe it only exists on your computer, while it is under development. Remember that we are not in your head and cannot know how your code works without seeing it.

Put yourself in our shoes. Imagine that you volunteer your time here to help thers. It gets easier to imagine that there are several things that one can do to help us help you.

:slight_smile:

3 Likes
9

Not really my area but I see you have this jquery.

$('#submit-btn').val("{{LANG please_wait}}");

I’m assuming that’s going to be the message you want on the button.

However when I look through the html for that button I find this:

 <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>

I’m assuming that’s the button you want to change as it matches the ID.

However this is a button element and does not have a rendered value attribute like an input so your js which adds a value attribute will not show that value as the default text on the button. For a button element you would need to replace the inner html instead.

e.g.
$('#submit-btn').html("Please wait");

I’m sure one of the JS gurus here could confirm:)

Just to clarify this is the difference between a button and an input.

<button type="submit" id="submit-btn">Content of a button comes from here</button>
<input type="submit" id="submit-btn2" value="Content of an input comes from here">

As to what the rest of the code does I don’t have a clue :slight_smile:

2 Likes
10

Thanks for all of your help and messages.
I have successfully got the result I wanted, where the “Please Wait” button/message appears after the submit button is selected. Now, I’d like to ask how to change the background color of the “please_wait” button. Can you suggest a simple way to do that, please?

Here are the last few lines of revised the :

	$('#upload-form form').ajaxForm({
      url: '{{LINK aj/ffmpeg-submit}}'+'?hash=' + $('.main_session').val(),
      beforeSend: function() {
         $('#submit-btn').attr('disabled', true);
         **$('#submit-btn').text("{{LANG please_wait}}");**
      },


      success: function(data) {
       $('#submit-btn').text("{{LANG publish}}");
	    	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>
11

You could add a class to the element at the same time you write the waiting text and then use css to change the color. You would also need to remove the class when you remove the please wait message (if that’s what you were intending).

e.g.

$('#submit-btn').attr('disabled', true).addClass('waiting');

and then in the CSS:

button#submit-btn.waiting{background:red;color:#fff;}

As I said if you are going to remove or change that message when complete then add .removeClass('waiting') in the appropriate place.

Soimething like:

$('#submit-btn').attr('disabled', false).removeClass('waiting');

I notice that you are still using val which we determined would not be correct for a button element unless you have changed to an input instead.

In the else part of that script you have this:

$('#submit-btn').val('{{LANG publish}}');

If its still a button element then val needs to be changed to .html or .text depending on what you are entering.

12

Great - thanks for the help - much appreciated

13

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