動態struts2複選框加載使用jquery

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> 

Action類：

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是正確的。你的div和複選框上有相同的「id」。你需要讓他們與衆不同。

<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

$(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); 
      } 
     }); 
    } 


}); 
});