I have a page, HTML5-jQuery. It works fine on Mobile Safari, and on Chrome. But when opened in full screen, it behaves really weird. There is a 'Save' link (#updateLink) that sends updated text through a webservice and receives a success/fail response. Once I receive the response though, the app suddenly closes. This happens ONLY on full screen mode.
HTML:
<div id="footerAnnouncementsDiv" class="footerAnnouncementsDiv">
<a href id="updateLink" class="saveLink">Save</a>
<a href id="cancelLink" class="cancelLink">Cancel</a>
<a href id="createLink" class="saveLink" style="float:left">Create New Announcement</a>
</div>
JS:
$("#updateLink").on("click", function (e) {
e.preventDefault();
if (mode == "edit") {
//This one
updateAnnouncementsData();
}
else if (mode == "create") {
//Ignore this one
createNewAnnouncement();
}
mode = "edit";
});
//Function to retrieve entire result set from backend
function getAnnouncementsData() {
$.ajax({
url: webServiceURL + "getAllAnnouncements",
beforeSend: function (request) {
request.setRequestHeader("Authorization", user.slsPlnrId + '~' + user.role + '~' + user.authId + '~' + AC);
},
type: "POST",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ "sls_plnr_id": user.slsPlnrId,"role": user.role }),
async: false,
timeout: 30000,
success: function (result, status, xhr) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
$("#announcementsListDiv").empty();
var x = $(result.announcements).sort("anncmt_dt", "desc");
$.each(x, function (iterator, item) {
var datestr = item.anncmt_dt.split(/[-T.]/);
var dateObj = new Date(datestr.slice(0, 3).join('/') + ' ' + datestr[3]);
var day = dateObj.getDate().toString();
var month = monthNames[dateObj.getMonth()].toString();
var constructor = '<div class="announcementItem" id="' + item.anncmt_id + '">';
constructor += '<div class="dateStampDiv"><span class="dayLabel">' + day + '</span></br><span class="monthLabel">' + month + '</span></div>';
constructor += '<div style="display: none" id="' + item.anncmt_id + 'date">' + item.anncmt_dt + '</div>';
constructor += '<div class="shortAnnouncementDiv">';
constructor += '<div class="shortHeaderDiv" id="' + item.anncmt_id + 'header">' + item.anncmt_sbj + '</div>';
if (item.anncmt_desc.length > 90) {
constructor += '<div class="shortDescDiv">' + item.anncmt_desc.substring(0, 90).trim() + '...' + '</div>';
}
else {
constructor += '<div class="shortDescDiv">' + item.anncmt_desc + '</div>';
}
constructor += '<div style="display: none" id="' + item.anncmt_id + 'description">' + item.anncmt_desc.trim() + '</div>';
constructor += '</div><a href="#" id="a' + item.anncmt_id + '" class="deleteAnnouncement" />';
constructor += '</div>';
$("#announcementsListDiv").append(constructor);
});
$("#announcementsListDiv").append('<div style="clear:both"></div>');
if (x.length == 0) {
mode = "create";
}
//$(".announcementItem").first().trigger("click");
}
},
error: function (xhr, status, error) {
alert("An error occured while processing your request");
}
});
}
//Function to update record at backend
function updateAnnouncementsData() {
var jsonObj = {};
jsonObj.sls_plnr_id = user.slsPlnrId;
jsonObj.role = user.role;
jsonObj.unread_count = "";
jsonObj.announcements = [];
var announcement = {};
var idVal = $(".selectedDivBorder").attr("id");
announcement.anncmt_id = idVal;
if ($("#announcementDisplayHeaderDiv").children().length == 0) {
announcement.anncmt_sbj = $("#announcementDisplayHeaderDiv").text();
}
else {
announcement.anncmt_sbj = $("#announcementDisplayHeaderDiv > form > input").val();
}
if ($("#announcementDisplayDescDiv").children().length == 0) {
announcement.anncmt_desc = $("#announcementDisplayDescDiv").text();
}
else {
announcement.anncmt_desc = $("#announcementDisplayDescDiv > form > textarea").val();
}
if (announcement.anncmt_sbj.trim() == "" || announcement.anncmt_desc.trim() == "") {
alert("Announcement Subject or Description cannot be left blank");
return;
}
var dt = new Date();
announcement.anncmt_dt = dt.getFullYear() + "-" + dt.getMonth() + "-" + dt.getDate();
announcement.anncmt_read_ind = "";
jsonObj.announcements.push(announcement);
$.ajax({
url: webServiceURL + "updateAnnouncements",
beforeSend: function (request) {
request.setRequestHeader("Authorization", user.slsPlnrId + '~' + user.role + '~' + user.authId + '~' + AC);
},
type: "POST",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(jsonObj),
async: false,
success: function (result, status, xhr) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
if (result.status == "success") {
alert(result.message);
getAnnouncementsData();
//$("#" + idVal).trigger("click");
$("#createLink").css("display", "initial");
}else{
alert(result.message);
}
}
},
error: function (xhr, status, error) {
alert("An error occured while processing your request");
$(".announcementItem").first().trigger("click");
}
});
}
I tried diagnosing the issue as probably being caused by a link pointing to an external URL (to be opened in a new tab), but the fixes for that aren't working. That doesn't seem to be the case, because the link is not being opened in mobile Safari after the full screen app closes. THis is like really important and I need to find a solution fast! SOlutions will be greatly appreciated!
I found the answer to this one. I used the Safari console debugger to see what events were getting fired. Looks like ng-touch (Angular Touch) was causing the issue, firing multiple events along with the regular click event that was getting fired. I removed Angular Touch (which wasn't being used anyway) and the functionality started working fine.