Why Are Bootstrap's Form Elements Rendered Terribly with Struts2-Boostrap-Plugin

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



Leave a reply



Submit