Why is the success function of my ajaxForm not being called?

Question

I have a form that is being loaded via AJAX inside a fancybox. The form is submitted using ajaxForm and the data is saved to the database fine. The only problem I have is that the 'success' function of ajaxForm is not being invoked.

response from call in Network tab;

<script>
$(document).ready(function() {

// submit form
$('#edit_letting_task').ajaxForm({ 
dataType:  'json',
success:    processJsonEditLettingTask
});

function processJsonEditLettingTask(data) { 
    // 'data' is the json object returned from the server 
    alert(data.message); 
}

});
</script>

    { "message": "Test" }

edit_letting_task.php code (raw code);

<?php

require_once('../inc/app_top_cron.php');

?>

<script>
$(document).ready(function() {

// submit form
$('#edit_letting_task').ajaxForm({ 
dataType:  'json',
success:    processJsonEditLettingTask
});

function processJsonEditLettingTask(data) { 
    // 'data' is the json object returned from the server 
    alert(data.message); 
}

});
</script>

    <?php

// process form

if (!empty($_POST)) {

// define and escape each POST as a variable

foreach ($_POST as $key => $value) {

if (!empty($value)) {

${$key} = mysqli_real_escape_string($con, PrepareInput($value));

}
}

// insert data into database

$sql="UPDATE letting_task SET 
letting_task_status = '$letting_task_status',
letting_task_notes = '$letting_task_notes'
WHERE letting_task_id = '$letting_task_id'
";

if (!mysqli_query($con, $sql)) {
  die('Error Inserting Letting Task Data into Database: ' . mysqli_error($con));
} else {
  echo '{ "message": "Test" }';
}

} else {

// define and escape each GET as a variable

if (!empty($_GET)) {

foreach ($_GET as $key => $value) {

if (!empty($value)) {

${$key} = mysqli_real_escape_string($con, PrepareInput($value));

}
}
}

$letting_task_query = mysqli_query($con, "SELECT * FROM letting_task WHERE letting_task_id='" . $letting_task_id . "'") or die(mysql_error());
$letting_task_details = mysqli_fetch_array( $letting_task_query );

// display form

echo '<form id="edit_letting_task" name="edit_letting_task" action="' . SITE_AJAX . 'edit_letting_task.php" method="post">';

echo '<input type="hidden" id="letting_task_id" name="letting_task_id" value="' . $letting_task_id . '">';

// letting task details

echo '<fieldset>
<legend>' . $letting_task_details['letting_task_name'] . '</legend>

<table class="nobord">';

echo '<tr>
    <td><label for="letting_task_status">Status:</label></td>
    <td>';

echo '<select id="letting_task_status" name="letting_task_status" required>';

$letting_task_status_query = mysqli_query($con, "SELECT * FROM letting_task_status ORDER BY letting_task_status_id ASC"); 
while ($letting_task_status_row = mysqli_fetch_array($letting_task_status_query)) {

if ($letting_task_status_row['letting_task_status_id'] == $letting_task_details['letting_task_status']) { $selected = ' selected'; } else { $selected = ''; }

echo '<option value="' . $letting_task_status_row['letting_task_status_id'] . '"' . $selected . '>' . $letting_task_status_row['letting_task_status_name'] . '</option>';

} 

echo '</select>'; 
echo '</td></tr>';

echo '<tr>
<td><label for="letting_task_notes">Notes:</label></td>
<td><textarea id="letting_task_notes" name="letting_task_notes" rows="6" cols="40">' . $letting_task_details['letting_task_notes'] . '</textarea></td>
</tr>';

echo '</table>

</fieldset>';

// actions

echo '<fieldset><legend>Actions</legend>
<table class="nobord">';

echo '<tr><td><input type="submit" value="Save"></td></tr>';
echo '</table>
  </fieldset>';

echo '</form>';

}

mysqli_close($con);

?>

edit_letting_task.php code (html output);

<script>
$(document).ready(function() {

// submit form
$('#edit_letting_task').ajaxForm({ 
dataType:  'json',
success:    processJsonEditLettingTask
});

function processJsonEditLettingTask(data) { 
    // 'data' is the json object returned from the server 
    alert(data.message); 
}

});
</script>

    <form id="edit_letting_task" name="edit_letting_task" action="https://www.property-system-uk.com/admin-area/ajax/edit_letting_task.php" method="post"><input type="hidden" id="letting_task_id" name="letting_task_id" value="1"><fieldset>
<legend>Application to let received</legend>

<table class="nobord"><tr>
    <td><label for="letting_task_status">Status:</label></td>
    <td><select id="letting_task_status" name="letting_task_status" required><option value="1">Pending</option><option value="2" selected>In Progress</option><option value="3">Completed</option></select></td></tr><tr>
<td><label for="letting_task_notes">Notes:</label></td>
<td><textarea id="letting_task_notes" name="letting_task_notes" rows="6" cols="40"></textarea></td>
</tr></table>

</fieldset><fieldset><legend>Actions</legend>
<table class="nobord"><tr><td><input type="submit" value="Save"></td></tr></table>
  </fieldset></form>

Answer 1

It would be best for you to create a separate php endpoint for your ajax request that adds the form data to your database and the returns the response as JSON (since that's what you're asking for).

The issue is not in your JS per say, as much as your implementation of AJAX. You should get the response then update the dom of your page with the data or show a success alert, etc, depending on what you want to do.

The only thing your AJAX endpoint should respond with is the JSON response, nothing else.

See this question on stack for details on how to response with JSON, as you're not doing it now at all. Returning JSON from a PHP Script