How to execute mousedown in ajax when running another javascript - Jquery

Question

I have a problem this javascript method. there is a dateslider for months, it calls ajax when the month is changed (mouseup event), in ajax there is an another javascript code($.blockUI) and when this javacript runs($.blockUI) mouseup event isn't working. It slides like mouseup event is not triggered. I want it stop when javascript code($.blockUI) is running. Here is my code;

$('#input-range-slider').unbind('mouseup.input-range-slider').bind('mouseup.input-range-slider',function(event){
        url = (....... + this.value); 
    BindReport(url);
    });


    function BindReport(givenUrl) {
        $.ajax({
            cache: true,
            url:givenUrl,
            type:"GET",
            contentType: "application/json",
            beforeSend: function () {
                $.blockUI(
                    {
                        message: $('<h2><img src=".....loading.gif" /><br />' + messageText + '</h2>'),
                        css: {
                            border: 'none',
                            padding: '15px',
                            background: 'none',
                            '-webkit-border-radius': '10px',
                            '-moz-border-radius': '10px',
                            opacity: .5,
                            color: '#fff'
                        }
                    }
                    );
            },
            success: doSomething(),
            error: doSomething(),
            complete: function(){
                $.unblockUI();
            }
        });
    }

https://jsfiddle.net/v209h1qp/

Answer 1

Your unbind/bind is a bad practice. You should better write this :

var current_element = $('#input-range-slider');
var parent = current_element.closest('#always-present-parent-element');

parent.on('mouseup', '.input-range slider', function(event){
    url = (....... + current_element.value); 
    BindReport(url);
});

By the way, beforeSend is useless here, and cache/type values are the default ones, so you can just write :

function BindReport(givenUrl) {

  $.blockUI({
    message: $('<h2><img src=".....loading.gif" /><br />' + messageText + '</h2>'),
    css: {
      border: 'none',
      ...
    }
  });

  $.ajax({
    url:givenUrl,
    contentType: "application/json",
    success: doSomething(),
    error: doSomething(),
    complete: function(){
        $.unblockUI();
    }
  });
}