Aug 12 2008

Human Computer Interaction - Episode III

Published by Narcis Radu at 8:43 am under Interface Design, Web Development

I want to share some ideas about using AJAX in web interface development. Working with Dojo, jQuery or any other JavaScript framework any web developer is able to offer a higher level of usability. In my projects I try to implement the following:

Error checking in forms:
Detecting duplicates of username, e-mail, security number etc requires additional hits in the database without reloading the entire page. Build small AJAX calls to retrieve data from the database and to establish if the user input is correct or not.

Submit user comments:
User should never leave the page of a product to post a comment or to rate a product. This is a simple implementation:

7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

 
<div class="displayContainerAuto">
	&raquo; <a href="javascript:return(false)" onclick="javascript:toggle_comment_writer('add_comment_top')"><strong>Write a comment</strong></a>
	<div style="visibility: hidden; display: none;" id="add_comment_top">
		<form action="javascript:write_comment(document.getElementById('myform'));" name="myform" id="myform">
			<table width="100%">
				<tr>
					<td>Comment title:</td>
					<td><input name="add_comment_title" id="add_comment_title" type="text" size="60" style="border: 1px solid #999;"></td>
				</tr>
				<tr>
					<td>Comment text:</td>
					<td><textarea name="add_comment_text" id="add_comment_text" cols="50" rows="6" style="border: 1px solid #999;"></textarea></td>
				</tr>	
				<tr>
					<td colspan="2" align="right"><input type="submit" class="optButton" value="Post Comment" /></td>
				</tr>
			</table>
		</form>
	</div>
</div>

The javascript should look like this:

54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

<script type="text/javascript" language="javascript">
   var http_request = false;
   function makePOSTRequest(url, parameters) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
         	// set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
 
      http_request.onreadystatechange = alertContents;
      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", parameters.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(parameters);
   }
 
   function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('myspan').innerHTML = result;            
         } else {
            alert('There was a problem with the request.');
         }
      }
   }
 
   function get(obj) {
      var my_comment = "title=" + encodeURI( document.getElementById("add_comment_title").value ) +
                    "&comment=" + encodeURI( document.getElementById("add_comment_text").value );
      makePOSTRequest('http://www.example.com/comment-post.php', my_comment);
   }
</script>

Look before click:
This may sound somehow strange to you. Let me explain how it works: when users want’s to click on a link, before he does that there is a small delay (1 - 2 seconds) and before the click, a mouse over event is fired. If this event occurs, you may load some text content from the linked page in some kind of tool tip window. How to do it and the code for this action will come in future article.

Have a lovely day a best interfaces!

Comments RSS

Leave a Reply

Download Day - English