The call function inside jQuery ajax success response works once, but not twice

Question

I have a page where I enter map names, and map data is presented through AJAX. I removed a lot of code in this example that is not related to the problem, and I tested this simplified code and it reproduces the same error.

The mysterious thing is that it works great in the first run through the testSelectedCardDetails function. He calls setNameCardIsFromField fine and does what he should do. The second time a console dies through it, showing:

 Uncaught TypeError: setNameCardIsFromField is not a function 

What's up with that? I honestly don’t know enough about how jQuery works to deal with the problem, so I’m moving on to the stackoverflow world asking for salvation from this madness.;)

  function testSelectedCardDetails(cardName) { var cardTestInfoArray = []; $.ajax({ url: 'includes/getCardAndSetDataViaAJAX.php', type: 'POST', cache: false, async: false, // if set to true then the data doesn't get here fast enough to run commands in 'success' dataType: 'json', data: { callThis: "testSelectedCardDetails", thisCardName: cardName}, error: function(data){ console.log("AJAX failed to get card info."); }, success: function(data) { $.map(data, function (value) { cardTestInfoArray = value; }); cardPresentInfo['printings'] = cardTestInfoArray['printings']; //automatically set setNameCardIsFrom field setNameCardIsFromField(cardPresentInfo['printings']); } }); } 

The function is called here:

  function setNameCardIsFromField(setCode) { $.ajax({ url: 'includes/getCardAndSetDataViaAJAX.php', type: 'POST', cache: false, async: false, // if set to true then the data doesn't get here fast enough to run commands in 'success' dataType: 'text', data: { callThis: "setNameCardIsFromField", thisSetCode: setCode}, error: function(data){ console.log("AJAX failed to get card info."); }, success: function(setName) { //console.log(setName); setNameCardIsFromField = document.querySelector('#setNameCardIsFrom'); setNameCardIsFromField.value = setName; } }); } 

Answer 1

You overwrite the function:

  setNameCardIsFromField = document.querySelector('#setNameCardIsFrom'); 

Assuming it's global (which is usually bad).

Not related, but meh when using async: false , it’s better to do it right than to crack it, for example, a callback, a promise, whatever.