This is part 3 in a series of posts about creating a web-based replacement for the Firefox Home iOS app. Part 2 can be found here.
What I wanted to do next was write enough code to save Sync settings and load bookmarks, log out as the current Sync user and wipe out the locally stored bookmarks and credentials in the process, and refresh bookmark data, all without any problems of any kind. Basically everything the user could do on the settings page. I planned to do as much work on the client as possible, since that is where the bookmark data would be stored. When the user saved new credentials I wanted them to be directed to the bookmark page, and if they were simply refreshing they would stay on the settings page but would see an updated count of their bookmarks.
The biggest issue was doing the form submissions and getting the UI to behave accordingly, including when an error occurred on the server. What was tricky was the fact that to get bookmark data from the Sync servers I made an Ajax call to a server-side function, and JQuery Mobile relies mainly on Ajax calls to do its thing. That coupled with the fact that my Ajax call was non-blocking made the UI flow have a bunch of niggling problems. Mostly it wouldn’t show the right things at the right time.
The best way I found to make it all work correctly was to disable the JQuery Ajax handling of the button clicks. I added data-ajax=”false” to the form element, then canceled the posting to the server and did everything manually. Essentially I took JQuery out of the equation. In keeping with the credo of the framework that you work with pure HTML elements and not server-based ones, I replaced the asp:Button controls with input elements and made the form element a regular client element, like so:
<div id="Settings" data-role="page">
<div data-role="header" data-theme="b">
<h5>Settings</h5>
</div>
<div class="smallText" data-role="content" data-theme="b">
<div class="msgPanel"> </div>
<form id="settingsForm" action="Default.aspx" method="post" data-ajax="false">
<div id="LoggedOut">
<div class="bottomPadding20"><input id="txtUserName" type="text" data-mini="true"></div>
<div class="bottomPadding20"><input id="txtPassword" type="password" data-mini="true"></div>
<div class="bottomPadding20"><input id="txtSyncKey" type="password" data-mini="true"></div>
<div class="alignCenter"><input id="Save" type="button" value="Save" data-icon="check" data-mini="true"></div>
</div>
<div id="LoggedIn" class="alignCenter hideMe">
<table class="statsTable">
<tbody>
<tr>
<td class="labelColumn"> </td>
<td class="fieldColumn"> </td>
</tr>
<tr>
<td class="labelColumn"> </td>
<td class="fieldColumn"> </td>
</tr>
<tr>
<td class="labelColumn"> </td>
<td class="fieldColumn"> </td>
</tr>
</tbody>
</table>
<input id="Logout" type="button" value="Logout" data-icon="delete" data-mini="true"> <br><input id="Refresh" type="button" value="Refresh" data-icon="refresh" data-mini="true">
</div>
</form>
</div>
<div data-role="footer" data-theme="b">
<div data-role="navbar">
<ul>
<li><a href="#Home" data-role="button" data-iconpos="bottom" data-icon="home">Home</a></li>
<li><a href="#Bookmarks" data-role="button" data-iconpos="bottom" data-icon="star">Bookmarks</a></li>
<li><a href="#Settings" data-role="button" data-iconpos="bottom" data-icon="gear">Settings</a></li>
</ul>
</div>
</div>
</div>
The Save onclick handler looked like this:
function Save_OnClick() {
var userName = $("#txtUserName").val();
var password = $("#txtPassword").val();
var syncKey = $("#txtSyncKey").val();
if (!userName) {
displayMessage("User name cannot be blank", "Settings");
return false;
}
if (!password) {
displayMessage("Password cannot be blank", "Settings");
return false;
}
if (!syncKey) {
displayMessage("Sync key cannot be blank", "Settings");
return false;
}
clearMessagePanel("Settings");
$.mobile.showPageLoadingMsg();
loadBookmarks(userName, password, syncKey, "Save");
return false;
}
It called this common function for getting bookmark data:
function loadBookmarks(userName, password, syncKey, action) {
$.ajax({
type: "POST",
url: "Default.aspx/LoadBookmarks",
contentType: "application/json; charset=utf-8",
data: "{'userName':'" + userName + "', 'password':'" + password + "', 'syncKey':'" + syncKey + "'}",
dataType: "json",
headers: {"LoadAction":action},
error: function (error) {
var resp = JSON.parse(error.responseText);
displayMessage(resp.Message, "Settings");
},
success: function (data) {
localStorage.setItem("CurrentBookmarks", JSON.stringify(data.d));
if (action === "Refresh") {
localStorage.setItem("BookmarkCount", data.d.Tag);
}
else if (action === "Save") {
localStorage.setItem("UserName", userName);
localStorage.setItem("Password", password);
localStorage.setItem("SyncKey", syncKey);
}
}
});
}
I added a handler for the jQuery ajaxCompleted event and used that to handle the post-retrieval stuff, like hiding the input controls or updating the bookmark count.
function ajaxCompleted(e, xhr, settings) {
if (settings.url === "Default.aspx/LoadBookmarks") {
if (xhr.status < 400) {
switch (settings.headers["LoadAction"]) {
case "Save":
$.mobile.changePage("#Bookmarks");
break;
case "Refresh":
loadSettingsPage();
break;
}
}
$.mobile.hidePageLoadingMsg();
}
}
At this point I tried everything out in Electric Plum to get an idea of how it might look on an actual iPhone. It was fairly good, only a couple of cosmetic issue came up that might not even be issues on a real phone.
Next, listviews and data binding.
[…] About ← Bookmark Browser Part 3 – Navigation […]