Why are Bootstrap's form elements rendered terribly with Struts2-Boostrap-Plugin?
Struts2 uses Themes to generate HTML from Tags: a different theme chosen, a different HTML in output.
The default theme is XHTML, that generates <td>
, <label>
and other stuff around your elements.
Usually, I recommend to use the simple theme, that generates almost no additional code, and that would make your code work as-is. Put this constant in struts.xml to check it out:
<constant name="struts.ui.theme" value="simple" />
But in your case, since you said you've included the Struts2-bootstrap-plugin in your project, then... simply use it ! You are NOT using it in your code... including the JAR is not enough, you need to set the bootstrap theme as the default one:
<constant name="struts.ui.theme" value="bootstrap" />
and declare the struts-bootstrap taglib to use the <sb:head/>
tag, as described in the official documentation:
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sb" uri="/struts-bootstrap-tags" %>
<!DOCTYPE html>
<html lang="en">
<head>
...
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<sb:head/>
</head>
<body>
...
</body>
</html>
Then remove all the HTML that you've written manually, and start using the plugin.
show struts2 action error messages on to Modal
Struts.xml Adding result type...
<result-types>
<result-type name="json" class="org.apache.struts2.json.JSONResult"/>
</result-types>
Struts Action
<action name="RegisterAction" class="RegisterAction">
<result name="INPUT">/index.jsp</result>
<result name="ERROR" type="json">/index.jsp</result>
<interceptor-ref name="jsonValidationWorkflowStack"></interceptor-ref>
<param name="ignoreHierarchy">false</param>
<param name="includeProperties">actionErrors\[\d+\], fieldErrors\..+$, actionMessages\[\d+\]</param>
<result name="success" type="json">/index.jsp</result>
</action>
In Jsp page
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user" style="font-size: 15px;"></i></span>
<input type="text" class="form-control line-height" name="username" id="username_register" placeholder="User name"/>
<input type="button" id="username_submit" />
</div>
Ajax
$(document).ready(function() {
$("#username_submit").click(function(){
var username=$("#username_register").val();
$.ajax({
type: 'GET',
url:'RegisterAction?username='+encodeURIComponent(username),
dataType: 'json',
success: function(data){
if(data.fieldErrors && !isEmpty(data.fieldErrors)){
$.each(data.fieldErrors,function(index,value){ //indexfieldname,valuefiled?
$("#username_register").before('<span>'+value[0]+'</span>');
});
return;
}
},
error: function()
{
}
});
return false;
});});
function isEmpty(obj){//(Object obj = {}isEmpty=true)
for(var p in obj){
return false;
}
return true;
}
NOTE:Add struts2json plugin Jar..and In alert u will be having struts2 validation errors...hope this will help u :)
Struts2 tags in divs appear empty
Like described in this answer (that you should consider upvoting too), Struts2 generates (or not) a certain kind of HTML when rendering Struts Tags, basing on the Theme you have chosen.
The default one is xhtml
, that will generate a lot of stuff for you. It may be handy, but also annoying, according to how you work. Personally I prefer to generate the HTML by myself, and then I use the theme that won't generate almost any HTML: the simple
Theme.
Note that when working on big projects or with multiple projects with the same, particular needs, you can also write your own custom theme (for example for generating security tokens automatically).
You can use a theme globally (in struts.xml)
<constant name="struts.ui.theme" value="simple" />
or locally to a single tag / form:
<s:checkbox name="chBx" id"chBx" fieldValue="false"
theme="simple"
value="true" label="Check This" />
In this case, you may need to write the <label>
object by yourself.
Related Topics
R: Saving Multiple HTML Widgets Together
Image Center Align Vertically and Horizontally
What Is The Browser-Default Background Color When Selecting Text
How to Avoid Flash of Unstyled Text (Fout) Even with Web Font Loader
Prefilling Gmail Compose Screen with HTML Text
How to Apply Padding to Every Line in Multi-Line Text
How to Remove The Border Around an Image Without a Source
How to Set an HTML Class Attribute in Markdown
Is It Correct to Use Single Quotes for HTML Attributes
How to Send HTML Email Using R
How to Center Cards in Bootstrap 4
Height: 100% for <Div> Inside <Div> with Display: Table-Cell
CSS Margin: 0 Is Not Setting to 0
Twitter Bootstrap: Center Pills
Multiple Submit Buttons on HTML Form - Designate One Button as Default