Question

根据要求，我必须在struts2中执行动态复选框。与第一个动作调用类似，将出现一个复选框列表，并在任何复选框上选择另一组复选框将加载到div中。我使用struts2迭代器遍历复选框并在每个复选框后创建一个动态div并通过jquery调用一个动作。调用该操作，结果也显示在控制台中，但未在div.code中加载，如下所示第一个JSP：

<s:iterator value="categoryList" var="eachCheck">
    <s:checkbox name="%{#eachCheck}" id="%{#eachCheck}" cssClass="category_checkbox" labelposition="left"  label="%{#eachCheck}"/> 
    <s:div id="%{#eachCheck}"></s:div>
</s:iterator>

Jquery代码：

    $(document).ready(function() {
$('.category_checkbox').click(function(){
    var checked = $(this).is(':checked');
    if(checked)
    {

        var checkbox_id=$(this).attr("id");
        console.log(checkbox_id);
        var loaded_div="#"+checkbox_id;
        $.ajax({
            type:"POST",
            url : "loadSubCategory",
            data : "categoryName="+checkbox_id,
            beforeSend:function(){
            },
            success:function(data,textStatus){

               // alert("data "+data);
               // alert("textStatus "+textStatus);
                console.log(data);
                console.log(textStatus);
                $(loaded_div).html(data);
               // alert("after ");
            },
            error: function (jqXHR, exception) {
                console.log(jqXHR);
                console.log(exception);
            //  getErrorMessage(jqXHR, exception);
            }
        });
    }


});
});

第二个JSP：

<s:iterator value="subcategoryList" var="eachSub">
    <s:checkbox name="%{#eachSub}" id="%{#eachSub}"  labelposition="left"  label="%{#eachSub}"/> 
    <s:div id="%{#eachSub}"></s:div>
</s:iterator>

动作类：

public class DiagnosticCentreAction extends ActionSupport {

private List categoryList;
private List subcategoryList;
private String categoryName;

public DiagnosticCentreAction() {
}

public String loadCategory() {
    categoryList=new ArrayList();
    categoryList.add("category1");
    categoryList.add("category2");
    categoryList.add("category3");
    categoryList.add("category4");
    System.out.println("hiiiiii");
    return SUCCESS;
}

public String loadSubCategory(){
     System.out.println("called ");
     subcategoryList=new ArrayList();
     switch (categoryName) {
        case "category1":
            subcategoryList.add("sub1cat1");
            subcategoryList.add("sub2cat1");
            subcategoryList.add("sub3cat1");
            subcategoryList.add("sub4cat1");
            System.out.println("subcategoryList "+subcategoryList);
            break;
        case "category2":
            subcategoryList.add("sub1cat2");
            subcategoryList.add("sub2cat2");
            subcategoryList.add("sub3cat2");
            System.out.println("subcategoryList "+subcategoryList);
            break;
        default:
            subcategoryList.add("sub1cat3");
            System.out.println("subcategoryList "+subcategoryList);
            break;


    }
     return SUCCESS;
}

Answer 1

@Aleksandr M是对的。你有相同的＆＃34; id＆＃34;在你的div和复选框上。你需要让它们与众不同。

<s:iterator value="categoryList" var="eachCheck">
  <s:checkbox name="%{#eachCheck}" id="%{#eachCheck}" cssClass="category_checkbox" labelposition="left"  label="%{#eachCheck}"/> 
  <!-- append _div here to make it unique -->
  <s:div id="%{#eachCheck}_div"></s:div>

在查找目标div

时更改JS以附加_div

    $(document).ready(function() {
$('.category_checkbox').click(function(){
    var checked = $(this).is(':checked');
    if(checked)
    {

        var checkbox_id=$(this).attr("id");
        console.log(checkbox_id);
        // append the _div in
        var loaded_div="#"+checkbox_id + "_div";
        $.ajax({
            type:"POST",
            url : "loadSubCategory",
            data : "categoryName="+checkbox_id,
            beforeSend:function(){
            },
            success:function(data,textStatus){

               // alert("data "+data);
               // alert("textStatus "+textStatus);
                console.log(data);
                console.log(textStatus);
                $(loaded_div).html(data);
               // alert("after ");
            },
            error: function (jqXHR, exception) {
                console.log(jqXHR);
                console.log(exception);
            //  getErrorMessage(jqXHR, exception);
            }
        });
    }


});
});

使用jquery加载动态struts2复选框

1 个答案: