How to stop an ajax call from a function?

Question

I have the following code:

$('#btnCreate').click(function (e) {
    var object;
    if ($(this).hasClass('Create')) {
        Action = 'Create';            
    }
    if ($(this).hasClass('Update')) {
        Action = 'Update'
    }

    switch(Action) {
        case x:
            object=GetFirstFunction();
            break;
        case y:
            GetSecondFunction(); 
            break;
   }    

   $.ajax({
        //passing here all the required things to make a call
        data:object,
        //something
   });
});

function GetFirstFunction(){
    var obj = new Object();
    $('.dlist').each(function (e) {
        if ($(this).val() == '') {
            alert('Please select all the dropdowns');
            return false;
        }
          obj.Id=$('#Id').val();
          obj.Dept=$('#Dept').val();
          obj.Position=$('#Position').val();
          return obj;
    });
}

How to stop making an AJAX call if any one of the dropdown's values are not selected. I tried e.stopPropagation(); But it is not working any help is appreciated.

possible duplicate of [Abort Ajax requests using jQuery](http://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery) — OddDev, Jun 08 '15 at 13:44

Khanh TO · Answer 1 · 2015-06-08T15:00:03.967

I don't know what is the logic of assigning your obj inside the each. But looks like you need this:

    $('#btnCreate').click(function (e) {
        if ($(this).hasClass('Create')) {
            Action = 'Create';            
        }

        if ($(this).hasClass('Create')) {
            Action = 'Update'
        }

        var obj = null;
        switch(Action) {
            case x:
                obj = GetFirstFunction();
                break;
            case y:
                obj = GetSecondFunction(); 
                break;
       }    

       if (obj != null) {
          $.ajax({
           // Something here
          });
       }

    });

    function GetFirstFunction(){
        var obj = new Object();
        $('.dlist').each(function (e) {
            if ($(this).val() == '') {
              alert('Please select all the dropdowns');
              obj = null;
              return false;
            }
            obj.Id=$('#Id').val();
            obj.Dept=$('#Dept').val();
            obj.Position=$('#Position').val();
        });
        return obj;
   }

score 0 · Answer 2 · answered Jun 08 '15 at 14:00

This is basic control flow. The idea here is : if it matches this or that condition, proceed. Otherwise, stop.

Least invasive intervention would be:

// ...
var valid = true;
switch(Action) {
    case x:
        valid = GetFirstFunction();
        break;
    case y:
        valid = GetSecondFunction(); 
        break;
    default:
        return;
}    

if (valid) {
    $.ajax({
    // Something here
    });
}
// ...

This lacks readability however and could turn ugly from maintenance in a few years. The following seems cleaner and keeping all logic in one place:

var object;

var Action = null; // start with nothing
if ($(this).hasClass('Create')) {
    Action = 'Create';            
    object = GetFirstFunction();
} else if ($(this).hasClass('Update')) {
    Action = 'Update'
    GetSecondFunction(); 
}

if (Action) {
    $.ajax({
        //passing here all the required things to make a call
        data:object,
        //something
    });
}

How to stop an ajax call from a function?

2 Answers2