How to disable drag and drop and browse events while an ajax request is in process?

Question

I want to prevent the user to stop selecting or drag and drop while the previous ajax request is in process.

How can i do this...

Here is the code js code :

#drag is the div id of drag and drop area

$( '#drag ' ).bind( 'dragover',function(event) {
  event.stopPropagation();  
  event.preventDefault();   
 });

$( '#drag ' ).bind( 'drop',function(event) {
     event.stopPropagation();   
     event.preventDefault();
     if( upfiles == 0 )
     {
         upfiles = event.originalEvent.dataTransfer.files;
         console.dir(upfiles);
         upfiles = Array.prototype.slice.call(upfiles, 0);
      }
      else {
      if(confirm( "Drop: Do you want to clear files selected already?" ) == true) {
          upfiles = event.originalEvent.dataTransfer.files;
          upfiles = Array.prototype.slice.call(upfiles, 0);
          $('#fileToUpload').val('');
      }
      else
          return;
      }
      $( "#fileToUpload" ).trigger( 'change' );
        });

after clicking on upload button:

$("#upload_btn").click( function() {
 if ( upfiles ) {
 $( '#fileToUpload' ).trigger('upload'); // trigger the first 'upload' - custom event.
  $(this).prop("disabled", true);
  }
});

Here is the ajax request :

$( '#container' ).on( 'upload', '#fileToUpload' , function( ) {
   if ( typeof upfiles[count] === 'undefined') return false;
    var data = new FormData();
    var fileIn = $( "#fileToUpload" )[0];
    if( !upfiles ) 
        upfiles = fileIn.files; 
      $(upfiles).each(function(index, file) 
      {
           data.append( 'file'+index, file );
      });
   var request = $.ajax({
        url: 'files.php',
        type: 'POST',
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        beforeSend: function( ) {
                    $(".progressbar").show();
            },
        xhr: function() {  
                var xhr = $.ajaxSettings.xhr();
                if(xhr.upload){ 
                        xhr.upload.addEventListener( 'progress', showProgress, false);
                }
                return xhr;
        },
        success: function(data){
            if( percentComplete <= 100 ) {
                    $('#pb div').animate({ width: '100%' }, { step: function(now) {
                            $(this).text( Math.round(now) + '%' );
                    },  duration: 10});
                    }
           $('#uplcomp').append( data );
        }
    });

How can i prevent the user while the previous files upload is in progress.

Updated

ok got it upto some extent (but this is also not a good idea, user can add div back from the firebug and send files again)

i have used

 $( document ).ajaxStart(function() {
   $( "#total" ).remove();
 });

and in ajax start :

 $(document).ajaxStop( function( ) {

//how can i add div back say : add <div id='total'></div> after <div id='someid'></div>

});

Is there any possibility that i can stop second ajax request while the first ajax is in process?

you could disable draggable when ajax is called, and reanable it when you get response: "OK". — Edgar Godyuk, Jun 19 '14 at 06:53
if you are using jQuery [Draggable](http://jqueryui.com/draggable/#default) . I believe you can disable it something like this - $(element).draggable( 'disable' ) right before ajax call. and after ajax call returns success - $(element).draggable( 'enable' ) — Edgar Godyuk, Jun 19 '14 at 07:02
i have clearly mentioned the code which i have been using , but i dont know why you guys are providng **$(element).draggable( 'enable' )** , what can i do with this, if this is the right way how can i integrate in the above code which i have posted — fedrick, Jun 19 '14 at 07:05
well im not actualy sure how you created those draggables, But.. if you are using jquery draggable - calling .draggable( 'disable' ) in your ajax call, before send should work. like that: beforeSend: function( ) { $(".progressbar").show(); $("your_draggable_element").draggable( 'disable' ) }, ... .... and in success: function(data){} you re anable it — Edgar Godyuk, Jun 19 '14 at 07:17
you can see im using bind('dragover') and bind('drop') events to manage drag and drop... — fedrick, Jun 19 '14 at 07:21

K K · Answer 1 · 2014-06-19T07:26:48.097

1

Apart from enabling/disabling drag and drop while ajax is in progress, I believe a better solution will be to show an transparent or translucent overlay which covers that area and prevent the user from selecting any draggable.

For disabling/enabling using jquery:

Use $( "#total" ).draggable( "disable" ); inside beforeSend() function of ajax.

Use $( "#total" ).draggable( "enable" ); inside success() of function ajax

Using CSS:

demo: http://jsfiddle.net/lotusgodkk/GCu2D/184/

CSS:

.checked {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#BFBFBF;
    opacity:0.5;
    text-align:center;
}
.checked div {
    margin:0 auto;
    top:50%;
    left:50%;
    position:absolute;
}

HTML:

<div class="checked">
    <div>Please wait...</div>
</div>

Just toggle the hide/show during ajax

Use $('.checked').show(); in beforeShow() and $('.checked').hide(); in success()

edited Jun 19 '14 at 07:26

answered Jun 19 '14 at 06:59

K K

17,794
4
30
39

i have clearly mentioned the code which i have been using , but i dont know why you guys are providng $(element).draggable( 'enable' ) , what can i do with this, if this is the right way how can i integrate in the above code which i have posted – fedrick Jun 19 '14 at 07:10
nope that is not a good way... user can change it from firebug that solution is not acceptable – fedrick Jun 19 '14 at 07:32
I dont think you should use remove. If you really want to remove that div from DOM and reinsert again, then try jQuery detach: http://api.jquery.com/detach/ – K K Jun 19 '14 at 07:41
1

Yes, that can be done. First detect whether ajax is in progress and based on result, fire the next ajax. Refer this solution for checking the pending requests: http://stackoverflow.com/questions/3148225/jquery-active-function Or http://stackoverflow.com/questions/1822913/how-do-i-know-if-jquery-has-an-ajax-request-pending – K K Jun 19 '14 at 07:47
but there is one minor problem in that answer.. when the first ajax request is processing (i.e file is uploading) , if the user cancel the file im doing this **request.abort();** .. again if the user selects some other files and try to upload : here in this case $.active != 0 how to set $.active =0 – fedrick Jun 19 '14 at 10:36
1

You can try setting it to zero manually when you abort the request. like $.active=0 or 1, whatever you want – K K Jun 19 '14 at 10:42
This is not a great solution because, 1) preventing draggable on the page is not helpful, the drag items are files from a desktop file manager, 2) requires a jquery-ui dependency that the user is not yet using. – Gringo Suave Jul 17 '17 at 20:24

score 1 · Answer 2 · answered Jun 19 '14 at 10:24

1

Finally i have used

if($.active === 0)
{
   call ajax
}
else
{
   alert("please wait previous request is in process");
}

answered Jun 19 '14 at 10:24

fedrick

341
2
5
21

How to disable drag and drop and browse events while an ajax request is in process?

Is there any possibility that i can stop second ajax request while the first ajax is in process?

2 Answers2