I'm designing an AJAX interface which allows a user to remotely connect a device to a wireless network.
The user is on a page with a list of wireless networks, and clicks the "Connect" or "Disconnect" link beside a network, which brings up dialog boxes (using jQuery colorbox) and makes an AJAX request to perform the action. Each Connect/Disconnect link has three data attributes:
- action: whether we should try connecting or disconnecting from the network
- name: the name of the network
- secured: boolean, true if network has a password, false otherwise
Since the "Disconnect" action is straightforward, I'm only showing the "Connect" process here.
Questions
The server returns a JSON object with success=true
or success=false
. Because the server does not return an error message, I act under the assumption that if the network is secured, the user should be told that failure to connect to the network is an authentication issue. Is this reasonable?
I made the flowchart first, and then implemented the code. I tried to break it up into functions that corresponded with the flowchart steps.
Does my flowchart look ok? As this is event-based programming, I'm not sure of the limitations of flowcharts here.
Any feedback on the code?
(Note: Due to other issues with the system I haven't had the chance to run this code yet, so please excuse minor syntax errors)
Thanks for taking the time to read.
(function($) {
$(function() {
//Connect/disconnect dispatcher
$(".connectionlink").click(function(e) {
//Stop link from submitting
e.preventDefault();
//Get data variables
var action = $(this).data('action');
var name = $(this).data('name');
var secured = $(this).data('secured');
if (action==='connect') {
connect(name,secured);
} else {
//Not shown here
disconnect(name);
}
});
function connect(name, secured) {
if (secured) {
askForPassword();
} else {
showConnectingDialog(name, null, false);
}
}
function reloadPage() {
window.location.reload(true);
}
function askForPassword(name, error) {
if (typeof error === "undefined") {
$('#boxPasswordError').val('');
} else {
$('#boxPasswordError').val(error);
]
$('#wifipassword').val('');
$.colorbox({
href: "#boxPassword",
inline:true,
width: 550,
});
$('#connectButton').click(function() {
var password = $('#wifipassword').val();
showConnectingDialog(name, password, true);
});
}
function showConnectingDialog(name, password, secured) {
$('#connectingText').html("Connecting to “" + name + "”...");
$.colorbox({
href: "#boxLoading",
inline:true,
width: 350,
});
connectToNetwork(name, password, secured);
}
function connectToNetwork(name, password, secured) {
return $.ajax({
type: "POST",
data: {'name': name, 'password': password, 'action': 'connect'},
success: function(data) {
if ($(data).success === true) {
//JSON data says request succeeded
reloadPage();
} else {
//Request failed (but server response was ok)
if (secured) {
askForPassword(name, "Could not authenticate with this password. Please try again.");
} else {
connectErrorOccurred();
}
console.log(data);
}
},
error: function(data) {
//Request failed
connectErrorOccurred();
}
});
}
function connectErrorOccurred() {
$.colorbox({
href: "#boxFailedConnect",
inline:true,
width: 350,
onCleanup: function() [
reloadPage();
}
});
}
})(jQuery);