How to do partial page refresh using struts2-jquery plugin in struts2?

Question

I want to do partial page refresh with the help of this. Take a scenario, we have a dropdown list according to select option of it, I want to refresh a div section of a page with data populated according to dropdown selection .

How to do this?

Updated :

i have tried this:

JSP Code:
On this Dropdown selection i want to populate (refresh) div.

<s:form id="RoleListForm">
      <s:label value="Roles"/>
      // JSON Action populating roleNameList on page Load
      <s:url id="fetchJsonRoleListUrl" action="fetchJsonRoleList"/> 
      <sj:select
         name="idRoleInfo"
         id="idRoleInfoList"
         href="%{fetchJsonRoleListUrl}"
         list="roleNameList"
         onChangeTopics="reloadRolePrivilegesDiv"
         listKey="idRoleInfo"
         listValue="roleName"
         emptyOption="true"/>
  </s:form>

Here is the div code that i want to populate according to DD selection, But i am not getting textfields value filled:

// JSON Action on page Load

 <s:url id="roleDetailsUrl" action="roleDetailsAction" />
 <sj:div href="%{roleDetailsUrl}" formIds="RoleListForm"  reloadTopics="reloadRolePrivilegesDiv">
    <s:textfield id="idRoleName" name="roleName" />
    <s:textfield id="idRolePrivileges" name="privileges"/>
 </sj:div>

I am getting this in div section On Browser:

{"roleName":"IT User","privileges":"IT User"}

Updated Part:

Action Class:

 public class GraphsAction extends ActionSupport {

private String startDate;
private String endDate;
private String bodyStats;
HomeService homeService = new HomeService();
SimpleDateFormat formatter = new SimpleDateFormat("dd-MM-yyyy");

 public String reloadDatePicker() {
    Date date1 = new Date();
    Date date2 = new Date();
    Map session = ActionContext.getContext().getSession();
    Integer loginId = (Integer) session.get("loginId");
    if (loginId != null) {
        List list = homeService.getAllGraphData(loginId);
        List chestList = homeService.getChestGraphData(loginId);
        List waistList = homeService.getWaistGraphData(loginId);
        List hipsList = homeService.getHipsGraphData(loginId);
        List bicepsList = homeService.getBicepsGraphData(loginId);
        if (bodyStats.equals("")) {
            UserStats usetsts = (UserStats) list.get(0);
            date1 = usetsts.getUpadtedDate();
            this.startDate = formatter.format(date1);
            UserStats usetsts1 = (UserStats) list.get(list.size() - 1);
            date2 = usetsts1.getUpadtedDate();
            this.endDate = formatter.format(date2);
        }
        if (bodyStats.equals("0")) {
            UserStats usetsts = (UserStats) list.get(0);
            date1 = usetsts.getUpadtedDate();
            this.startDate = formatter.format(date1);
            UserStats usetsts1 = (UserStats) list.get(list.size() - 1);
            date2 = usetsts1.getUpadtedDate();
            this.endDate = formatter.format(date2);
        }
        if (bodyStats.equals("1")) {
            UserStats usetsts = (UserStats) list.get(0);
            date1 = usetsts.getUpadtedDate();
            this.startDate = formatter.format(date1);
            UserStats usetsts1 = (UserStats) list.get(list.size() - 1);
            date2 = usetsts1.getUpadtedDate();
            this.endDate = formatter.format(date2);
        }
        if (bodyStats.equals("2")) {
            UserStats usetsts = (UserStats) list.get(0);
            date1 = usetsts.getUpadtedDate();
            this.startDate = formatter.format(date1);
            UserStats usetsts1 = (UserStats) list.get(list.size() - 1);
            date2 = usetsts1.getUpadtedDate();
            this.endDate = formatter.format(date2);
        }
         return SUCCESS;
}

public String getEndDate() {
    return endDate;
}

public void setEndDate(String endDate) {
    this.endDate = endDate;
}

public String getStartDate() {
    return startDate;
}

public void setStartDate(String startDate) {
    this.startDate = startDate;
}
  public String getBodyStats() {
    return bodyStats;
}

public void setBodyStats(String bodyStats) {
    this.bodyStats = bodyStats;
}

}

Struts.xml:

<action name="jsonReloadDatePickerAction"  class="com.ebhasin.fitnessbliss.actions.GraphsAction" method="reloadDatePicker">
     <result  name="success">/jsps/datePicker.jsp</result>
 </action>

You know you need the struts2-json-plugin, do you have an action that returns json yet? Have you called it with java script to get the data? Have you tried to write the data into the div with jquery, possibly using jQuery.getJSON() with an appropriate call back? — Quaternion, Dec 07 '12 at 16:58
@Quaterninon I updated my question please check what i am doing — Vishu, Dec 07 '12 at 17:04
@user1703710, There are two parts to your question, 1) the server side production of json and returning it to the browser. 2) Rendering that json on the browser. The issue with using those sj: tags is they confuse the issue. They are for the client side but require the audience to have an awareness of serverside technology greatly reducing your audience, further those tags are highly optional even for struts2 users. — Quaternion, Dec 07 '12 at 17:06
If #1 is working, then ask a question like this: "Here is a block of json (show block of json). Here is the jQuery I am using to get and render this page (show js/html). Why is this not working? (tag with jquery and json)" I bet you'll get a pretty quick answer, there are a lot of jQuery ninjas on here. — Quaternion, Dec 07 '12 at 17:08
That plugin really gets in a lot of peoples way because it obfuscates the JS though those tags. jQuery isn't typically written with tags so why try? — Quaternion, Dec 07 '12 at 17:11
If you want a system that adds certain headers to every page then consider adding apache tiles into the mix. — Quaternion, Dec 07 '12 at 17:12
@Quaternion Using strut2-jquery Pulugin with struts2 is pretty much easy, i think so. If you have any suggestion or link how to achieve this task please share with me.Becoz Here can be have another scenario like on Dropdown Selection i want to refresh(populate) data in 2 or 3 Divs(a simple business reqirement).Actually i do't much familiar with this partial page refresh using either with AJAx or using plugin like struts2- jquery. — Vishu, Dec 07 '12 at 17:34
Later today I'll try to find time to post a pure jQuery solution, I was just saying by rephrasing the question the jQuery community would be able to produce a nice one much more quickly. — Quaternion, Dec 07 '12 at 18:02
@Quaternion Thank you for your support. I also add jquery & Json tag as you told me to do so but still no one is giving answer. — Vishu, Dec 07 '12 at 18:08
that's because as the question stands they will not be able to understand the sj: tag. — Quaternion, Dec 07 '12 at 18:10
@Quaternion But i don't have much idea about JQuery .Should i post this question separately without sj: tag? — Vishu, Dec 07 '12 at 18:21

score 0 · Accepted Answer · answered Dec 07 '12 at 21:38

0

One of the options is to put content which is currently inside your <sj:div> to separate JSP page and configure your roleDetailsAction action to return that page instead of json result.

answered Dec 07 '12 at 21:38

Aleksandr M

24,264
12
69
143

I also did it same earlier,it is working fine for me but problem is that it is taking time to reload that jsp. I don't know why? – Vishu Dec 08 '12 at 08:12
Do you mean it takes too long to display the content of the div? What do you do inside your action? – Aleksandr M Dec 09 '12 at 20:35
right it takes too lomg to display, I updated action above with struts.xml . – Vishu Dec 10 '12 at 03:16

score 0 · Answer 2 · answered May 14 '14 at 18:09

I have to do this in almost all of my software solutions...!! These is what I do

a) Load the page with all the necessary data from server and in HTML source code link the onchange event for the dropdown button with a function in JS.

b) populate/initlize the page with the data obtained from the server.

c) As we have linked the drop down button's onchange event with our implementation in JS, all we have to do is make AJAX call from these function (in JS) and get the required data from the server. Again in the response of completion of current AJAX request we get the relevant data from server and then we use DOM manipulations to update the page with required data.

We have to stick to the id's of all the elements/div of page and fiddle with them with jQuery.

All the best.

PS: ping me if you need reference code for the same...!!

How to do partial page refresh using struts2-jquery plugin in struts2?

2 Answers2