Case à cocher dynamic struts2 chargement à l'aide de jquery

Question

Conformément à l'exigence, je dois cocher dynamique dans struts2. Comme pour la première action appeler une liste de case à cocher apparaîtra et en sélectionnant sur la case à cocher un autre jeu de cases à cocher sera chargé dans le div. J'utilise struts2 itérateur pour faire défiler la case à cocher et créer un div dynamique après chaque case à cocher et appeler une action via jquery. L'action est appelée et le résultat est également affiché dans la console mais il est pas chargé dans le div.code est donné ci-dessous Première 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> 

Code 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); 
      } 
     }); 
    } 


}); 
}); 

Deuxième 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> 

classe 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 est correct. Vous avez le même "id" sur votre div et case à cocher. Vous devez les rendre différents.

<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> 

Modifier la JS ajouter le _div lors de la recherche de la cible 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); 
      } 
     }); 
    } 


}); 
});