CODEWITHSUNDEEP
javajavascriptjqueryjsp
splatter_fadli
splatter_fadli

Reputation: 781

How to check checkbox based on row table (database)?

I've a form that can edit/update data build in modal (bootstrap), I want to check the checkbox based on my row table...

this is my edit/update form : 

<td><fieldset id="menu_e">
<input type="checkbox" name="menu" value="User" class="ceksmenu">User<br />
<fieldset id="sub_menu_user_e">
<input type="checkbox" name="sub_menu_user" value="User1" class="ceksmuser">User1
<input type="checkbox" name="sub_menu_user" value="User2" class="ceksmuser">User2
<input type="checkbox" name="sub_menu_user" value="User3" class="ceksmuser">User3<br />
</fieldset>
<input type="checkbox" name="menu" value="Monitoring" class="ceksmenu">Monitoring<br />
<fieldset id="sub_menu_monitoring_e">
<input type="checkbox" name="sub_menu_monitoring" value="Monitoring1" class="ceksmmonit">Monitoring1
<input type="checkbox" name="sub_menu_monitoring" value="Monitoring2" class="ceksmmonit">Monitoring2
<input type="checkbox" name="sub_menu_monitoring" value="Monitoring3" class="ceksmmonit">Monitoring3<br />
</fieldset>
<input type="checkbox" name="menu" value="Parameter" class="ceksmenu">Parameter<br />
<fieldset id="sub_menu_parameter_e">
<input type="checkbox" name="sub_menu_parameter" value="Parameter1" class="ceksmparam">Parameter1
<input type="checkbox" name="sub_menu_parameter" value="Parameter2" class="ceksmparam">Parameter2
<input type="checkbox" name="sub_menu_parameter" value="Parameter3" class="ceksmparam">Parameter3</fieldset>
</fieldset>
</td>

this is my table code : 

<tbody>
   <c:forEach var="row" items="${requestScope.authorityuser}">
      <tr>
          <td>${row.id_authority}</td>
          <td>${row.nama_authority}</td>
          <td><c:forEach var="u" items="${row.menu}">|${u}| </c:forEach></td>
          <td><c:forEach var="u" items="${row.sub_menu_user}">|${u}| </c:forEach></td>
          <td><c:forEach var="u" items="${row.sub_menu_monitoring}">|${u}| </c:forEach></td>
          <td><c:forEach var="u" items="${row.sub_menu_parameter}">|${u}| </c:forEach></td>
          <input type="hidden" name="id_authority" value="${row.id_authority }">
          <td><a href="#update" role="button" data-toggle="modal"
             class="update" id_update="${row.id_authority}"
                        nama_authority="${row.nama_authority}" menu="${row.menu}" 
                                sub_menu_user="${row.sub_menu_user}" sub_menu_monitoring="${row.sub_menu_monitoring}" 
                                    sub_menu_parameter="${row.sub_menu_parameter}"> <i class="icon-edit"></i> <spring:message code="edit" text="default text" />
              </a><a href="#delete" role="button" data-toggle="modal"
                                class="delete" id_delete="${row.id_authority}">
                                 <i class="icon-trash"></i> <spring:message code="delete" text="default text" />
                            </a></td>
                </tr>
                </c:forEach>
        </tbody>

I tried like this and it's not work :(

<script type="text/javascript">
  $(document).ready(function() {
     $('.update').click(function() {
       if($('input:checkbox[name=sub_menu_user]').is(':checked')){
           $('input:checkbox[name=sub_menu_user]').prop('checked', true);
      }else{
           $('input:checkbox[name=sub_menu_user]').prop('checked', false);
      }
     var id_update = $(this).attr("id_update");
     var nama_authority = $(this).attr("nama_authority");
     var menu = $('input:checkbox[name=menu]').is(':checked');
     var sub_menu_user = $('input:checkbox[name=sub_menu_user]').is(':checked');
     var sub_menu_monitoring = $('input:checkbox[name=sub_menu_monitoring]').is(':checked');
     var sub_menu_parameter = $('input:checkbox[name=sub_menu_parameter]').is(':checked');

     $('#id_authority_e').val(id_update);
     $('#id_authority_l').val(id_update);
     $('#nama_authority_e').val(nama_authority);
     $('#menu_e').val(menu);
     $('#sub_menu_user_e').val(sub_menu_user);
     $('#sub_menu_monitoring_e').val(sub_menu_monitoring);
     $('#sub_menu_parameter_e').val(sub_menu_parameter);
  });
  $('.delete').click(function() {
     var id_delete = $(this).attr("id_delete");
     $('#id_authority_d').val(id_delete);
  });
     $('#example').dataTable({
  });
});
</script>

this is the output of my table

enter image description here

how is it possible?? any help will be pleasure :)

this is my edit/update form

enter image description here

this is my table

enter image description here

Upvotes: 0

Views: 1474

Answers (1)

winner_joiner
winner_joiner

Reputation: 14925

Well i just looked at the javascript portion, here is my answer.

You would have to read the Text in the HTML and parse it, for that you need to be able to get a specific cell. With the row_id you can narrow your search down and over the classname for the cloumn you get the right cell.

I hope this short working demo on jsFiddle might help you with your "problem".

HTML:

<table class="data-table">
    <tr id="row_1"><td class="authority">...</td> 
        <!-- id should be constructed something like id="row_${row.id_authority}" -->
        <td class="...">...</td>
        <td class="users">|user1|user2|user3|</td>
        <td class="...">...</td>
        <td> <a href="#update" class="update" id_update="1">edit</a>  </td>
        <!-- id_update should be as in your code id="${row.id_authority}" -->
    </tr>  
</table>

Javascript:

$(function(){
    $(".update").click(function(){
        var id_update = $(this).attr("id_update");
        var users = $("#row_" +  id_update).find(".users").text().split("|").slice(1,-1);
        for(var user in users)
            alert(users[user]);
    });
});
// tested on Windows 7 with Chrome 33+

edit: added some "Code"

possible JSP Code:

<c:forEach var="row" items="${requestScope.authorityuser}">
    <tr id="row_${row.id_authority}">
        <td class="...">${row.id_authority}</td>
        <td class="...">...</td>
        <td class="users"><c:forEach var="u" items="${row.sub_menu_user}">|${u}| </c:forEach></td>
        <td class="...">...</td>
        <td>
            <a href="#update" role="button" data-toggle="modal"
            class="update" id_update="${row.id_authority}"
            nama_authority="${row.nama_authority}" menu="${row.menu}" 
            sub_menu_user="${row.sub_menu_user}" sub_menu_monitoring="${row.sub_menu_monitoring}" 
                sub_menu_parameter="${row.sub_menu_parameter}"> <i class="icon-edit"></i> <spring:message code="edit" text="default text" />
            </a> ...
        </td>
    </tr>
</c:forEach>

edit:

i updated the jsFiddle (this link is different to the one above).

the important part is here...

for(var user in users){
    // it could be optimized, but like this it could work.
    $("input[name='sub_menu_user'][value='" + users[user] + "']")[0].checked=true;
}
// tested on Windows 7 with Chrome 33+

Upvotes: 1

Related Questions