CODEWITHSUNDEEP
jquerycallback
ashik
ashik

Reputation: 157

getting error callback is not a function in one condition

I have two functions like this

$("body").on("click", "#btnEdit", function (e) {
    TransactionId = $(this).closest("div").find('#SearchItemID').text();

    EditorDuplicate(TransactionId);
});

$("body").on("click", "#btnDuplicate", function (e) {
    TransactionId = $(this).closest("div").find('#SearchItemID').text();

    EditorDuplicate(TransactionId);
    GetnextItemCode();
})

As you can see in my first function I am calling only the EditorDuplicate function, but in the secont one i am calling another function after excecuting of first completes.

But to load the GetnextItemCode function after EditorDuplicate function I added callback function. Now it looks like this:

$("body").on("click", "#btnTransactionEdit", function (e) {
    TransactionId = $(this).closest("div").find('#SearchItemID').text();
    EditorDuplicate(TransactionId);
});

$("body").on("click", "#btnDuplicate", function (e) {
    TransactionId = $(this).closest("div").find('#SearchItemID').text();

    EditorDuplicate(TransactionId, function () {
        GetnextItemCode();
    });

    //EditorDuplicate(TransactionId);
    //GetnextItemCode();
})

EditorDuplicate function:

function EditorDuplicate(TransactionId, callback) {

    // other codes

    callback();
}

Now clicking #btnDuplicate works well, but when clicking #btnEdit I get the error

Uncaught TypeError: callback is not a function

Why is that? and how do I correct this?

Note : And function is still not running one after another, GetnextItemCode executed before the other completes. EditorDuplicate function got several lines of codes, where GetnextItemCode function has only few lines.

Please see the error in the snippet

// edit button
$("body").on("click", "#btnEdit", function () {
    var TransactionId = $('#SearchItemID').text();
    EditorDuplicate(TransactionId);
});

// duplicate button    
$("body").on("click", "#btnDuplicate", function () {
    var TransactionId = $('#SearchItemID').text();
     EditorDuplicate(TransactionId, function () {
        GetnextItemCode();
    });
});


function EditorDuplicate(TransactionId, callback) {

    alert("EditorDuplicate");
    // other codes

    callback();
}

function GetnextItemCode(){
    alert("GetnextItemCode")
}
   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" id="btnEdit" value="edit"/>
<input type="button" id="btnDuplicate" value="duplicate"/>

<br/><br/>
<span>Search Id :</span>
<span id="SearchItemID">2</span>

Upvotes: 0

Views: 2710

Answers (2)

swathi
swathi

Reputation: 97

function EditorDuplicate(TransactionId, callback) { // your code

if (callback) {
  callback();
}

}

Upvotes: 0

31piy
31piy

Reputation: 23859

In your function, you first need to check if callback is actually a function:

function EditorDuplicate(TransactionId, callback) {
    // your code

    if (typeof callback === 'function') {
      callback();
    }
}

This is because callback becomes undefined when it is not passed in this call:

EditorDuplicate(TransactionId);

And trying to call undefined will throw an error.

Upvotes: 1

Related Questions