php + js + jquery + $.post combination question(s)???

[BobMCT]

Good afternoon all,
While I've been doing this for a long, long time I still get stymied by the idiosyncrasies of js functions and especially JQuery.
And I believe it shows its ugly head mostly when maintaining someone elses program (grrrr).

I have a simple question for those with experience in this area:

What are the most common areas to look when debugging why a function (js or JQuery) is called, as indicated by alert() comments, but yet the $.ajax and/or $.post operations DO NOT execute.
And quite often these are existing functions that for some unknown reason stop working.

I'm thinking that the executing php program is exceeded its memory space but I don't really know. I do know that hours/days seem to be lost trying to figure this out, if at all possible.

Any advice, suggestions or even if anyone is available for contract debugging, please let me know?

I'm eager to read your suggestions.

Signed "frustrated beyond"


BTW - here's a sample of a non-working function:
<script>
// *****************************************************************
// File upload function to submit current form to server and reload Files page
$('#file_upload').submit(function(e) {
e.preventDefault();
// var url = document.getElementById("url").value + "#tab-3";
var url = document.getElementById("url").value;
var formData = new FormData($('#file_upload')[0]);
alert("#file_upload function url:"+url);
$.ajax({
url: 'cd-file-uploaderX.php',
type: 'POST',
success: function(data) {
window.location.replace(url);
window.location.reload();
},
// Form data
data: formData,
//Options to tell jQuery not to process data or worry about content-type.
cache: false,
contentType: false,
processData: false
});
alert("#file_upload exit");
});
// *****************************************************************
</script>

and the form for same:
<form class="form-horizontal" id="file_upload" >
<div class="col-md-7">
<input class="form-control" name="file_desc" type="text" size="30" maxlength="75" required
placeholder="Enter description of file to be uploaded" >
</div>
<div class="col-md-3">
<input class="form-control" type="file" name="file" id="file-upload-button"
accept=".gif,.jpg,.jpeg,.png,.pdf,.doc,.docx,.xls,.xlsx">
</div>
<div class="col-md-2 pull-right">
<input class="btn btn-primary btn-sm" type="submit" name="submit1" value="UPLOAD" />
</div>
<input type="hidden" name="contact_id" value="<?=$contact_id?>" id="contact_id">
<input type="hidden" name="user_id" value="<?=$user_id?>" id="user_id">
<input type="hidden" name="ip_address" value="<?=$ip_address?>" id="ip_address">
<input type="hidden" name="url" value="<?=$url?>" id="url">
</form>

 

[BobMCT]

An update. As I work through this/these programs I've found several different techniques to submitting forms with jquery/ajax. No one can explain the different methods so after researching on various tutorial sites I've rewritten some 'standardized' methods and have been apply them one at a time. Son of a gun, this seems to be working.
I just thought others who might be faced with similar issues might learn from that that there is more than one way to skin a cat, so to speak.
Thanks,