Struts 2 Ajax url and div tag not working with struts file tag

Question

On a Jsp page i am retriving list based on previous list selection for that used struts 2 url and struts dojo tag div

<s:url id="d_url" action="employDivisionAction"/>
<sx:div showLoadingText="false"  id="details1" href="%{d_url}"  theme="ajax"      listenTopics="show_division" onchange="show_Department()" formId="frm_demo"/>

in the js file this function is called

function show_Department()
{
   dojo.event.topic.publish("show_department");
}

everything works fine i am able to retrieve list but the problem arises when i try to use

<s:file/>

tag in the jsp. the ajax functionalty stops working when i include the above tag. Any idea why it is not working any guidance would be helpful.

The complete jsp code

<s:form name="employee" action="AddEmployee" method="POST" theme="css_xhtml" enctype="multipart/form-data" id="frm_demo" >

       <table align="center" cellspacing="10px">
                      <tr>


                 <td align="left">  <s:text name="global.empno"/> </td>
                 <td align="left">  <s:textfield name="employeeNo" value="%{employee.employeeNo}"  onkeypress="return inputLimiter(event,'NameCharactersAndNumbers')"/> </td>
                 <td align="left"> <s:text name="global.fnm"/> </td>
                <td align="left"> <s:textfield name="firstName" value="%{employee.firstName}" onkeypress="return inputLimiter(event,'NameCharacters')"/> </td>
                     </tr>
                <tr>
                    <td><s:file name="Image"/></td>
                </tr>    


                <tr>
                    <td align="left"> <s:text name="Company"/> </td>

                    <td align="left"><s:select name="currentCompany" id="companyList" headerKey="" headerValue="Select" list="companyList" onchange="show_branch()"/></td>  

                    <td align="left"> <s:text name="Branch"/> </td>
                    <td align="left">
                    <div ><s:fielderror fieldName="branchName" /></div>
                    <s:url id="d_url" action="employBranchAction"/>
                    <sx:div  showLoadingText="false" name="branchDiv" id="details" href="%{d_url}"  theme="ajax" listenTopics="show_branch" onchange="show_division()" formId="frm_demo"/>
                    </td>


                </tr>

                <tr>
                    <td align="left"> <s:text name="Division"/> </td>
                    <td align="left">
                    <div ><s:fielderror fieldName="divisionName" /></div>
                    <s:url id="d_url" action="employDivisionAction"/>
                    <sx:div showLoadingText="false"  id="details1" href="%{d_url}"  theme="ajax" listenTopics="show_division" onchange="show_Department()" formId="frm_demo"/>
                    </td>
                    <td align="left"> <s:text name="Department"/> </td>
                    <td align="left">
                    <div><s:fielderror fieldName="departmentName"  /></div>
                    <s:url id="d_url" action="employDepartmentAction"/>
                    <sx:div showLoadingText="false"  id="details2" href="%{d_url}"  theme="ajax" listenTopics="show_department" onchange="show_Section()" formId="frm_demo"/>
                    </td>
                </tr> 

                <tr>
                    <td align="left"> <s:text name="Section"/> </td>
                    <td align="left">
                    <div><s:fielderror fieldName="sectionName"  /></div>
                    <s:url id="d_url" action="employSectionAction"/>
                    <sx:div showLoadingText="false"  id="details3" href="%{d_url}"  theme="ajax" listenTopics="show_section" onchange="show_Unit()" formId="frm_demo"/> 
                    </td>
                    <td align="left"> <s:text name="Unit"/> </td>
                    <td align="left">
                    <div ><s:fielderror fieldName="unitName" /></div>
                    <s:url id="d_url" action="employUnitAction"/>
                    <sx:div showLoadingText="false"  id="details4" href="%{d_url}"  theme="ajax" listenTopics="show_unit" onchange="show_Position()" formId="frm_demo"/>
                    </td>
                </tr>

                <tr>
                    <td align="left"> <s:label value="Position"/> </td> 
                    <td align="left">
                    <div><s:fielderror fieldName="positionName" /></div>
                    <s:url id="d_url" action="employPositionAction"/>
                    <sx:div showLoadingText="false"   id="details5" href="%{d_url}"  theme="ajax" listenTopics="show_position"  formId="frm_demo"/>     
                    </td>

                </tr>

                </table>



                <s:set name="webFramework" value="%{employee.employeeID}"/>
                    <table align="center" cellspacing="20px">
                    <tr> 
                        <s:if test="#webFramework==0">
                        <td align="left"> <s:submit  value="Add" cssClass="buttonSmall" onclick="return validateEmployee();"/> </td>
                        </s:if>
                        <s:if test="#webFramework>0">
                        <td align="left"> <s:submit name="update" cssClass="buttonSmall" value="Update"/> </td>
                        </s:if>

                    </tr>  
                    </table>

                </s:form>

I think Ajax does not support file uploads, you should use iframe instead. Check if this is helpful http://js1.hotblocks.nl/tests/ajax/file-drag-drop.html — Dan, Dec 31 '12 at 09:29

score 2 · Accepted Answer · edited May 23 '17 at 12:27

Adding <s:file/> (that, once rendered, it's an <input type="file"/>) to the page, requires the form content type to be multipart/form-data instead of the default (that is application/x-www-form-urlencoded).

So you should add enctype="multipart/form-data" to your form's attributes;

but, that said, if you are trying to upload a file with AJAX, this is not possible (according to this SO answer, with XHR2 upload with AJAX is finally possible.);

the best thing to do is to manage file upload in a separate page / tab / form, not in the same making AJAX calls.

EDIT: you have your <sx:div /> inside the same form of the <s:file />, and it refers the form frm_demo with the formId parameter.

According to the documentation, formId attribute specifies

whose fields will be serialized and passed as parameters

then, when you are trying to post your dojo AJAX request, you are trying to serialize ALL the form elements, including the File element. Java Files are not immediately serializable, especially with AJAX libs; it doesn't matter if <s:file /> is empty or if you are not using it: it is in the same form that you are posting, then it will cause the problem; move <s:file /> to another form (even in the same page), and it will work.

Initial solution was correct, now we have explanation :)

Doc

P.S: Dojo uses XHRPOST to post data, and it is unable to send binary data (as written above, you can do it now with jQuery and XHR2).

Please note that Dojo is deprecated on Struts since 2.1... latest releases suggests jQuery as AJAX library (but none is included, so the choice is on you)

Not using ajax to upload normal upload in action class and form content type is already multipart/form-data — Chetan Pulate, Dec 31 '12 at 08:56
Before putting ``, when AJAX was working, form content type was already `multipart/form-data` ? — Andrea Ligios, Dec 31 '12 at 09:02
Yup the content type was multipart/form-data already i had changed it.multipart/form-data is required for uploading right even after adding it still stuck at same problem. what do you think happens after tag that ajax functionality stops — Chetan Pulate, Dec 31 '12 at 09:06
Mmh can you post a bigger fragment of your JSP ? The complete form at least — Andrea Ligios, Dec 31 '12 at 09:08
(check out error console to see if you have javascript errors too) — Andrea Ligios, Dec 31 '12 at 09:10

Struts 2 Ajax url and div tag not working with struts file tag

1 Answers1