Forum:

Struts

Invoking Struts Action from javascript bypassing ActionForm

Souvvik Basu

Ranch Hand

Posts: 96

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hello,

I am trying to achieve the following:
There is a jsp page with 3 fields. 2 of them are drop-down select fields (Target Audience & User). User field is initially disabled. Only if the Target Audience field has a pre-defined value selected will the User field become enabled. But the moment it is enabled, it should dynamically fetch a list of all users defined in the system from the database and display it in the dropdown. Finally, this entire jsp has to be submitted as a Struts form and invoke a Struts action.

I'm stuck with how to retrieve the list of users from the db and display it. Should that be done via an action invocation? If yes, then how do I invoke the action, because there is no requirement to click a button or something. The ideal way seems to be to somehow invoke the action from within the javascript that I am using to enable the User field.
Or is there a better method?

My application is using Struts 1.

Your ideas and suggestions will be of great help. Thanks!!!

Souvik
OCJP 6.0

Saif Asif

Ranch Hand

Posts: 439

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Greetings ,

Basu wrote: it should dynamically fetch a list of all users defined in the system from the database and display it in the dropdown.

I suppose Ajax will be the solution to your problem . You can fire up an ajax request on the javascript event . Like e.g you can check via JavaScript to see if the Audience filed is populated or not and based on that you fire up an ajax request to a struts action that would fetch the list of users from DB. You can then use the data returned from the Ajax request to populate your drop down box. Use JQuery alongside ajax.
Take a look at JQuery Ajax .
Do post back for any further queries.

Muhammad Saif Asif Mirza
OCJA(5/6) OCJP(6) OCJWCD(6)

Lalit Mehra

Ranch Hand

Posts: 384

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

You definitely need AJAX in this case if you wish to populate the select box based on some other select box.

AND you can use this ... <s:doubleselect>

cheers ... :-)

http://plainoldjavaobject.blogspot.in

Souvvik Basu

Ranch Hand

Posts: 96

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi All,

Thanks for the inputs. So is there no way I can achieve this without AJAX/jQuery? Is it not possible to achieve this through just javascript and struts?

I was trying to submit the outer form through a javascript. My jsp looks like this :

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>

<html:html>
    <head>
        <title>Notices - Create</title>
        <script type="text/javascript">
            function disableField() {
                document.getElementById("userId").disabled = true;
            }
            
            function closePage() {
                document.getElementById("userId").value = "";
                document.getElementById("targetAudience").value = "";
                document.getElementById("notice").value = "";
                window.close();
            }
            
            function decideEnabling() {
                if(document.getElementById("targetAudience").value == "individual") {
                    document.getElementById("userId").setAttribute('disabled', false);
                    
                    document.forms[0].action = "/alluserRetrieve";
                    alert('hi...after action');
                    document.forms[0].submit();
                    alert('reached the end of the function');
                    
                } else {
                    document.getElementById("userId").value = "notSelected";
                    document.getElementById("userId").setAttribute('disabled', true);
                }
                    
            }
        </script>
        
    </head>
    
    <body onload ="disableField();">
        <html:form action="/newNoticeCreate" method="POST">
            
            <table align="center" width="90%">
                <tr>
                <td align="center">
                    
                    Target Audience   <html:select property="targetAudience" onchange="decideEnabling();">
                                            <html:option value="notSelected">--Select--</html:option>
                                            <html:option value="individual">Individual User</html:option>
                                            <html:option value="students">All Students</html:option>
                                            <html:option value="faculty">All Faculty</html:option>
                                            <html:option value="all">Everyone</html:option>
                                           </html:select>
                    
                </td>
                <td align="center">
                    
                    Select the Person   <html:select property="userId">
                        
                        <%--
                                              <html:option value="notSelected">--Select--</html:option>
                                              <html:option value="A">--A--</html:option>
                                              <html:option value="B">--B--</html:option>
                        --%>
                                             </html:select>
                                                    
                </td>
                <tr></tr>
                <tr></tr>
                </tr>
                
                <tr>
                <td colspan="2" align="center">
                    Notice   <html:textarea cols="55" rows="10" property="notice" />
                </td>
                </tr>
            </table>
                
                <div>
                    <table width="30%" align="center">
                        <tr>
                        <td align="center">
                            <html:button property="submit"value="Submit" onclick="validateAnDSubmit();">Submit</html:button>
                        </td>
                        <td>
                            <html:button property="cancel" value="Cancel" onclick="closePage();">Cancel</html:button>
                        </td>
                        </tr>
                        
                    </table>
                    
                </div>    
            
        </html:form>
        
        
    </body>
    
    
</html:html>

When I change the drop-down, and select Individual User, the decideEnabling() function is getting called. Inside that function, the alert "hi...after action" is also getting executed. But the document.forms[0].submit() doesn't seem to be working. An SOP statement in the execute() method of the action class is not getting printed, which means the action isn't getting called. Even the second alert is not executing. But I am not getting any errors either.
I find this strange because a document.forms[0].submit() works in another place in my application perfectly fine.

Souvik
OCJP 6.0

Lalit Mehra

Ranch Hand

Posts: 384

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Souvvik,

Let me Introduce you a little to AJAX. What AJAX does is to make a request to your servlet or your struts action without submitting the current form.

Now lets suppose you use javascript and just javascript to submit your form. In this case the complete form will be submitted and the response will be rendered once again which might clear all the data that you entered previously. Now with AJAX only the required select field will be repopulated making your page look the same as it was before.

Moreover, AJAX uses less overhead as much lesser data is received and sent.

I previously introduced you to <s:doubleselect> as in that way you won't have to be bothered about AJAX as it makes this easier.

Cheers :-)

http://plainoldjavaobject.blogspot.in

Souvvik Basu

Ranch Hand

Posts: 96

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi Lalit....thanks a lot for your post. The tag you named, is it a struts 2 tag? I followed your link and the documentation looks like its for struts 2 (also..the s prefix)
I'm using Struts 1.x for this. Any equivalent in 1.x version for this?

Souvik
OCJP 6.0

Lalit Mehra

Ranch Hand

Posts: 384

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi Basu,

Yes it's a struts2 tag. I didn't knew you were working on struts1.

I'm not sure about such an equivalent tag for struts1.

Enjoy googling :-) for that.

why don't you just use ajax to write your code. It would be a lot better and you'll also get to learn a lot.

:-)

http://plainoldjavaobject.blogspot.in

Richard Golebiowski

Ranch Hand

Posts: 213

I like...

posted 12 years ago

1
Number of slices to send:

Optional 'thank-you' note:

Send

I have some sample code here on populating a select box list using jQuery, AJAX, and JSON. My project is using Struts 2, but this code can be easily modified to work in Struts 1.

Consider Paul's rocket mass heater.