1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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
/*
 * --------------------------------------------------------------------
 * In-place editing system
 * by Siddharth S, www.ssiddharth.com, [email protected]
 * for Net Tuts, www.net.tutsplus.com
 * Version: 2.0, 18.11.2009 	
 * --------------------------------------------------------------------
 */

$(document).ready(function() 
{
  	$(".editable").hover(
		function()
		{
			$(this).addClass("editHover");
		}, 
		function()
		{
			$(this).removeClass("editHover");
		}
	);

  	$(".editable").bind("dblclick", replaceHTML);
	$(".btnSave, .btnDiscard").live("click", handler);
	
	UI("Ready");
	
	function UI(state)
	{
		var status = {};
		status.Ready = "Ready";
		status.Post = "Saving your data. Please wait...";
		status.Success = "Success! Your edits have been saved.";
		status.Failure = "Attempts to save data failed. Please retry.";
		
		var background = {};
		background.Ready = "#E8F3FF";
		background.Post = "#FAD054";
		background.Success = "#B6FF6C";
		background.Failure = "#FF5353";

		$("#status").animate({opacity: 0}, 200, function (){$("#status").html(status[state]).css({background: background[state]}).animate({opacity: 1}, 200)});
	}
	
	function handler()
		{
			var selector="";
			var code="21";
			if ($(this).hasClass("btnSave")) {
					UI("Post");
					var str = $(this).siblings("form").serialize();
					$.ajax({
   							type: "POST",
							async: false,
							timeout: 100,
   							url: "handler.php",
   							data: str,
   							success: function(msg){
								code = msg;
								if(code == 1)
								{
									UI("Success");
									selector = "editBox";
								}
								else
								{
									UI("Failure");
									selector = "buffer";
								}
							},
 					});
			} else {
				selector = "buffer";
			}

			var cont = $(this).siblings("form").children("."+selector).val();
			cont = cont.replace(/</gi, "&lt;");
			cont = cont.replace(/>/gi, "&gt;");
			cont = cont.replace(/\"/gi, "&quot;");
			$(this).parent()
				   .html(cont)
				   .removeClass("noPad editHover")
				   .bind("dblclick", replaceHTML);

			return false;
		}

	function replaceHTML()
		{
			var buffer = $(this).html()
			buffer = buffer.replace(/</gi, "&lt;");
			buffer = buffer.replace(/>/gi, "&gt;");
			buffer = buffer.replace(/\"/gi, "&quot;");
			$(this).addClass("noPad")
					.html("")
					.html("<form class=\"editor\"><input type=\"text\" name=\"value\" class=\"editBox\" 				value=\"" + buffer + "\" /> <input type=\"hidden\" name=\"buffer\" class=\"buffer\" value=\"" + buffer + "\" /><input type=\"hidden\" name=\"field\" class=\"record\" value=\"" + $(this).attr("id") + "\" /></form><a href=\"#\" class=\"btnSave\">Save changes</a> <a href=\"#\" class=\"btnDiscard\">Discard changes</a>")
					.unbind('dblclick', replaceHTML);
		}
}
);