Programming Social Applications

The Body: JavaScript Layer

Our final layer is the JavaScript content. This script block includes only the getFile() function that will load and parse our content:

<script type="text/javascript">
function getFile(){
   var errorMsgNode = $('#errorMsg');
   errorMsgNode.css("display", "none");

   var filePath = $('#file').val();

   if (filePath.length > 1){
      $.ajax({
         url: filePath,
         success: function(data){
            //load unmodified code
            $('#original_raw').text(data);
            $('#original_rendered').html(data);

            //load cajoled content
            var cajoled_data = html_sanitize(data);
            $('#cajoled_raw').text(cajoled_data);
            $('#cajoled_rendered').html(cajoled_data);
         },
         error: function(request){
            var errorMsg = "Failed to load file"
                         + "<br />Status: " + request.status
                         + "<br />Error: " + request.statusText;

            errorMsgNode.css("display", "block");
            errorMsgNode.html(errorMsg);
         }
      });
   }
}
</script>
</body>
</html>

When the user enters a file location for the mixed HTML/JavaScript content that he would like to load and then clicks Submit, the getFile() function jumps into action.

Since we want to provide the user with some form of error messaging if something goes wrong, we first capture our error message node and ensure that it is hidden in case the previous attempt to load a file produced an error message that is still being displayed.

We then capture the file path that the user entered and, if it isn’t blank, we make an AJAX request to get the content of that file. There are a few configuration options set up to handle different eventualities ...