I am having an issue when submitting form data using AJAX on resized screen to mobile. All works fine when you resize the page to desktop.
I am using jQuery DataTables and I have a button on each row to edit the form. All works fine when the page is not resized and the DataTable is in full screen, As soon as I resize the page to mobile and tablets, the DataTable creates an green "plus" icon on the left to expand the table but when I click on the edit button, I am getting an error Invalid Ajax Request and in the console Uncaught SyntaxError: Unexpected token <
Again this works on large screen sizes but not on mobile and tablets.
I am using PHP MVC, here is the code:
My jQuery function:
$(function () {
$("form#editEmailTemplate").on('submit', function (e) {
var postData = $(this).serialize();
var formURL = $(this).attr("action");
var formMethod = $(this).attr("method");
$.ajax({
url: formURL,
type: formMethod,
data: postData,
mimeType: "multipart/form-data",
scriptCharset: "UTF-8",
ContentType: 'html',
dataType: 'html',
success: function (data, textStatus, jqXHR) {
var returnedData = JSON.parse(data);
for (var i = 0; i < returnedData.length; i++) {
$('#response').empty();
$("#DataTableEmails_wrapper").hide();
$("#updateEmailTemplate").show();
$('#emailid').val(returnedData[0][i].emailid);
$('.emailtitle').text(returnedData[0][i].title);
$('#emailsubject').val(returnedData[0][i].subject);
$('#emailtext').val(returnedData[0][i].textmessage);
$('#emailhtml').val(returnedData[0][i].htmlmessage);
}
},
error: function (jqXHR, textStatus, errorThrown) {
$('#response').html('<div class="alert alert-danger">Something went wrong !!! . Email tremplate has NOT been selected</div>');
setTimeout(fade_out, 10000);
function fade_out() {
$("#response").fadeOut().empty();
}
}
});
e.preventDefault(); //STOP default action
});
});
And the HTML form is:
<form class="ui segment error" role="form" method="post" accept-charset="UTF-8"
action="mail/editEmailTemplate/" id="editEmailTemplate">
<input type="hidden" name="emailid" value="' . $value['emailid'] . '">
<input type="image" name="submit" value="" src = "' . ICO . 'system/configure.png"
width="20" height="auto" title = "' . lang('BTN_EDIT_EMAIL_TEMPLATE_TOOLTIP') . '"/>
</form>
The form has same structure and data on all screen sizes so hasn't change on resize.
It's possible that your formURL is returning with an HTML formatted 404 not found. When it does this it will contain
<html></html>
which isn't valid javascript or if that file is PHP and there's an error in it it's also responding with an HTML format leading with '<' in the response. Since this isn't a valid response it will break when encountered.