Commit @23145f87cef8e993d1ba66a6ec72df09a56ac3df

[Notice] Announcing the End of Demo Server [Read me]

doortts 2013-01-23

change validation popover message to tooltip in sign-up form to avoid some popover bug and popover message overlapping

 to avoid some popover bug and popover message overlapping

@23145f87cef8e993d1ba66a6ec72df09a56ac3df

9ee425c

23145f8

app/views/user/signup.scala.html

--- app/views/user/signup.scala.html

+++ app/views/user/signup.scala.html


         var passwordPlaceholder = passwordField.attr("placeholder");
         var errorMessage = {
             required: {
-                title: "Required",
-                content: "@Messages("validation.required")"
+                title: "@Messages("validation.required")"
             },
             duplicated: {
-                title: "Duplicated",
-                content: "@Messages("validation.duplicated")"
+                title: "@Messages("validation.duplicated")"
             },
             passwordMismatch: {
-                title: "Password confirmation",
-                content: "@Messages("validation.passwordMismatch")"
+                title: "@Messages("validation.passwordMismatch")"
             },
             tooShortPassword: {
-                title: "Too short password",
-                content: "@Messages("validation.tooShortPassword")"
+                title: "@Messages("validation.tooShortPassword")"
             },
             invalidEmail: {
-                title: "Invalid email",
-                content: "@Messages("validation.invalidEmail")"
+                title: "@Messages("validation.invalidEmail")"
             }
         };
 
-        // Bootstrap popover function has some limitation.
-        // In this case, popover doesn't provide easy way to change title and contents.
+        // Bootstrap tooltip function has some limitation.
+        // In this case, tooltip doesn't provide easy way to change title and contents.
         // So, unfortunately I had to change data value in directly.
         var showErrorMessage = function(field, errorMessage){
-                field.popover({trigger:'manual', placement: 'left'});
-                var popover = field.data('popover');
-                popover.options.title = errorMessage.title;
-                popover.options.content = errorMessage.content;
-                popover.options.placement = 'left';
-                popover.options.trigger = 'manual';
-                field.popover('show');
+                field.tooltip({trigger:'manual', placement: 'left'});
+                var tooltip = field.data('tooltip');
+                tooltip.options.title = errorMessage.title;
+                tooltip.options.content = errorMessage.content;
+                tooltip.options.placement = 'left';
+                tooltip.options.trigger = 'manual';
+                field.tooltip('show');
         }
         var isExist = function(checkId, url){
             var checkPosition = checkId.next(".isValid");

             ).done(function(data){
                 if(data.isExist === true){
                     showErrorMessage(checkId, errorMessage.duplicated);
-                    checkPosition.removeClass("label label-success").addClass("label label-important");
-                    checkPosition.html("x");
-                    checkId.popover("show");
+                    checkId.tooltip("show");
                 } else {
-                    checkPosition.removeClass("label label-important").addClass("label label-success");
-                    checkPosition.html("V");
-                    checkId.popover("hide");
+                    checkId.tooltip("hide");
+                    try{
+                        checkId.tooltip("destory");
+                    } catch(err){} // to avoid boostrap bug
                 }
             });
         };

                     break;
             }
           } else {
-            if(passwordField.popover !== undefined) passwordField.popover('hide');
-            if(emailField.popover !== undefined) emailField.popover('hide');
-            if(loginIdField.popover !== undefined) loginIdField.popover('hide');
+            try{
+                passwordField.tooltip('destory');
+                emailField.tooltip('destory');
+                loginIdField.tooltip('destory');
+            } catch(err){} // to avoid boostrap bug
           }
         });
         $('#retypedPassword').focusout(function(){

Add a comment

Open 0
Closed 0

List

...	...	@@ -41,38 +41,33 @@
41	41	var passwordPlaceholder = passwordField.attr("placeholder");
42	42	var errorMessage = {
43	43	required: {
44		- title: "Required",
45		- content: "@Messages("validation.required")"
	44	+ title: "@Messages("validation.required")"
46	45	},
47	46	duplicated: {
48		- title: "Duplicated",
49		- content: "@Messages("validation.duplicated")"
	47	+ title: "@Messages("validation.duplicated")"
50	48	},
51	49	passwordMismatch: {
52		- title: "Password confirmation",
53		- content: "@Messages("validation.passwordMismatch")"
	50	+ title: "@Messages("validation.passwordMismatch")"
54	51	},
55	52	tooShortPassword: {
56		- title: "Too short password",
57		- content: "@Messages("validation.tooShortPassword")"
	53	+ title: "@Messages("validation.tooShortPassword")"
58	54	},
59	55	invalidEmail: {
60		- title: "Invalid email",
61		- content: "@Messages("validation.invalidEmail")"
	56	+ title: "@Messages("validation.invalidEmail")"
62	57	}
63	58	};
64	59
65		- // Bootstrap popover function has some limitation.
66		- // In this case, popover doesn't provide easy way to change title and contents.
	60	+ // Bootstrap tooltip function has some limitation.
	61	+ // In this case, tooltip doesn't provide easy way to change title and contents.
67	62	// So, unfortunately I had to change data value in directly.
68	63	var showErrorMessage = function(field, errorMessage){
69		- field.popover({trigger:'manual', placement: 'left'});
70		- var popover = field.data('popover');
71		- popover.options.title = errorMessage.title;
72		- popover.options.content = errorMessage.content;
73		- popover.options.placement = 'left';
74		- popover.options.trigger = 'manual';
75		- field.popover('show');
	64	+ field.tooltip({trigger:'manual', placement: 'left'});
	65	+ var tooltip = field.data('tooltip');
	66	+ tooltip.options.title = errorMessage.title;
	67	+ tooltip.options.content = errorMessage.content;
	68	+ tooltip.options.placement = 'left';
	69	+ tooltip.options.trigger = 'manual';
	70	+ field.tooltip('show');
76	71	}
77	72	var isExist = function(checkId, url){
78	73	var checkPosition = checkId.next(".isValid");
...	...	@@ -83,13 +78,12 @@
83	78	).done(function(data){
84	79	if(data.isExist === true){
85	80	showErrorMessage(checkId, errorMessage.duplicated);
86		- checkPosition.removeClass("label label-success").addClass("label label-important");
87		- checkPosition.html("x");
88		- checkId.popover("show");
	81	+ checkId.tooltip("show");
89	82	} else {
90		- checkPosition.removeClass("label label-important").addClass("label label-success");
91		- checkPosition.html("V");
92		- checkId.popover("hide");
	83	+ checkId.tooltip("hide");
	84	+ try{
	85	+ checkId.tooltip("destory");
	86	+ } catch(err){} // to avoid boostrap bug
93	87	}
94	88	});
95	89	};
...	...	@@ -134,9 +128,11 @@
134	128	break;
135	129	}
136	130	} else {
137		- if(passwordField.popover !== undefined) passwordField.popover('hide');
138		- if(emailField.popover !== undefined) emailField.popover('hide');
139		- if(loginIdField.popover !== undefined) loginIdField.popover('hide');
	131	+ try{
	132	+ passwordField.tooltip('destory');
	133	+ emailField.tooltip('destory');
	134	+ loginIdField.tooltip('destory');
	135	+ } catch(err){} // to avoid boostrap bug
140	136	}
141	137	});
142	138	$('#retypedPassword').focusout(function(){

Delete comment