Tell me more ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

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:

  1. action: whether we should try connecting or disconnecting from the network
  2. name: the name of the network
  3. 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.

enter image description here

(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);
share|improve this question

Know someone who can answer? Share a link to this question via email, Google+, Twitter, or Facebook.

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.