struts2 portlet on liferay multicolumn layout shows corrupted

Question

I have a struts2 liferay portlet and it's work fine till it's in one column layout page. in view.jsp (first page of portlet) I have a struts form which map to goToPrivilege action

<s:form id="privilegeForm" action="goToPrivilege" namespace="/view">

in the struts.xml I use goToPrivilege to redirect to privilegeAction

<action name="goToPrivilege" class="defaultAdmin" method="goToPrivilege">
        <result type="redirectAction">
            <param name="actionName">privilegeAction</param>
            <param name="needAssessmentId">${needAssessmentId}</param>
        </result>
</action>
    <action name="privilegeAction" class="privilegeAction">
        <result>/html/needAssessmentAdmin/privilege.jsp</result>
        <result name="error">/html/needAssessmentAdmin/error.jsp</result>
    </action>

the result is: user redirect to privilege.jsp page. it works fine in onecolumn layout but when I put this portlet in a page with two column layout and user submit form, the content of privilege.jsp shows in the buttom of page, outside the portlet area: how can I fix this problem and my portlet work just like a portlet(use anywhere in portal).

for more information I use liferay 5.2.3 Struts2 and Spring

EDIT: in view.jsp I have nothing special. it's just a form. in privilege.jsp I have some div invisible(act as jquery popUp) then a table with jquery Gird load on it

      ...
<portlet:resourceURL var="privilegeurl" >
    <portlet:param name="struts.portlet.action"
        value="/grid/privilegeGrid" />
</portlet:resourceURL>
<portlet:resourceURL var="privilegeediturl">
    <portlet:param name="struts.portlet.action" 
        value="/grid/privilegeEdit"/>
</portlet:resourceURL>
...

         <!-- Add Dialog -->
    <div id="adddialog" title='<%= res.getString("needAssessment.add")%>'>
        <s:form id="addPrivilegeForm">
            <s:hidden id="needAssessmentId" name="needAssessmentId"/>
            <table>
 ...
            </table>
            <s:submit onclick="closeAddDialog();" key="submit" id="submitaddPrivilege" />
        </s:form>
    </div>
    <script type="text/javascript">
...
j.query('#addPrivilegeForm').submit(function(event){
     // fire off the request to actionEditUrl
    j.query.ajax({
        url: "<%=privilegeediturl%>",
        type: "post",
        data: {
            'needAssessmentId':j.query('#needAssessmentId').val(),
            'roleId': j.query('#addRoleId').val(),
            'startDuration': j.query('#addStartDuration').val(),
            'endDuration': j.query('#addEndDuration').val()
        },
        // callback handler that will be called on success
        success: function(response, textStatus, jqXHR){
            j.query('#privilegeGrid').trigger( 'reloadGrid' );
        },
        // callback handler that will be called on error
        error: function(jqXHR, textStatus, errorThrown){
            // log the error to the console
           alert(
                "The following error occured: "+
                textStatus, errorThrown
            );
        }
    });
     // prevent default posting of form
    event.preventDefault();
});
</script>


    <!-- Back Button -->

     <%if(!isPersian){ %>
    <div style="text-align :right;direction: rtl">
    <%}else { %>
    <div style="text-align: left; direction: ltr">
    <%} %>
    <button onclick="goBack();" id="backButton"><%=res.getString("back")%></button>
    <s:form id="backForm" cssStyle="display:none" action="defaultAdminView" namespace="/view">
    </s:form>

    </div>
    <script type="text/javascript">
    function goBack(){
        document.forms["backForm"].submit();
    }
    j.query('#backButton').button();
    </script>

     <%if(isPersian){ %>
    <div style="text-align :right;direction: rtl ">
    <%}else { %>
    <div style="text-align: left;direction: ltr">
    <%} %>
     <button id="addPrivilegeButton"><%=res.getString("needAssessment.add") %></button>
    </div>

    <script type="text/javascript">
    j.query('#addPrivilegeButton').button().click(function(event){
        addPrivilege();
        return false;
    });

    </script> 
    <br/>

    <!-- Privilege grid -->
    <table id="privilegeGrid" style="width: 100%"></table>
    <div id="pager2"></div>

and I load this grid by ajax

j.query("#privilegeGrid").jqGrid({
        url:'<%=privilegeurl.toString()%>&' + '&needAssessmentId=' + needId ,
        datatype : "json",
        colNames : [ 
                    ...
                   ],
        colModel : [
                    ...
                   ],
        rowNum : 10,
        rowList : [ 10, 20, 30 ],
        pager : '#pager2',
        sortname : 'id',
        viewrecords : true,
        jsonReader : {
            repeatitems : false,
            id : "0"
        },
        height : '100%',
        width : 900,
        caption : '<%=res.getString("privileges")%>',
        ...

    });

 j.query("#privilegeGrid").jqGrid('navGrid', '#pager2', {edit : false,add : false,del : false});

Answer 1

You've got malformed HTML. By default Struts2 uses xhtml theme that means, among other things, that <s:form> tag will generate table for you. And you are putting another <table> tag inside table generated by the <s:form> tag.