pheromix pheromix - 19 days ago 11
HTML Question

How to know that a tag content has spaces?

I placed spaces before the content of a table cell in particular condition :

<c:forEach items="${menus}" var="hash_map_menu">
<c:if test="${hash_map_menu.key == groupe_menu.gmnu_code}">
<c:forEach items="${hash_map_menu.value}" var="menu" varStatus="iterator">
<c:set var="bgcolor" value="#f9f9f9"/>
<c:set var="checked" value=""/>
<c:set var="indentation" value=""/>
<c:forEach items="${role_menus}" var="role_menu">
<c:if test="${role_menu.menu_id == menu.menu_id}">
<c:set var="checked" value="checked"/>
</c:if>
</c:forEach>
<table class="table">
<tbody>
<c:if test="${iterator.index % 2 == 0}">
<c:set var="bgcolor" value="white"/>
</c:if>
<c:if test="${menu.menu_bouton == 1}">
<c:forEach begin="0" end="${menu.depth}">
<c:set var="indentation" value="${indentation}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" />
</c:forEach>
</c:if>
<tr style="background-color:${bgcolor};">
<td id="menulib_${menu.menu_id}">${indentation}${menu.menu_navigation}</td>
<td width="5%" align="center"><label><input type="checkbox" class="minimal" id="${menu.menu_id}" name="${menu.menu_id}" value="${menu.menu_id}" ${checked} /></label></td>
</tr>
</tbody>
</table>
</c:forEach>
</c:if>
</c:forEach>


It gives something like this :

enter image description here

Now I want to test if an unchecked checkbox is in the same table row of a cell that has not been added spaces :

<script type="text/javascript">

$(function() {

$(":checkbox").on("ifUnchecked", function() { // iCheck callback
var cellContent = $("td[id='menulib_"+$(this).attr('id')+"']").html();
if (cellContent == $.trim(cellContent)) {
alert("unchecked a parent checkbox");
} else {
alert("unchecked a child checkbox");
}
});

});

</script>


At runtime even if I uncheck a checkbox corresponding to a row that has a cell having spaces then I got alert
unchecked a parent checkbox
! So how to know that an element's content has spaces ?

Answer

You could do something like this (comments in code):

$('.minimal').on('change', function() { // bind change event to checkboxes
  var checkbox = $(this);
  if (!checkbox.is(':checked')) {  // run the following if the checkbox is unchecked
    var firstCell = checkbox.closest('td').prev();  // get the first sibling cell (this assumes your checkbox is always the second cell)
    
    if (firstCell.html().startsWith('&nbsp;')) { // check if the html starts with a non breaking space
      firstCell.css('color', 'red');  // do your stuff here
    }
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tbody>
    <tr style="background-color:${bgcolor};">
      <td id="menulib_${menu.menu_id}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${menu.menu_navigation}</td>
      <td width="5%" align="center">
        <label>
          <input type="checkbox" class="minimal" id="${menu.menu_id}" name="${menu.menu_id}" value="${menu.menu_id}" ${checked} />
        </label>
      </td>
    </tr>
    <tr style="background-color:${bgcolor};">
      <td id="menulib_${menu.menu_id}">${menu.menu_navigation1}</td>
      <td width="5%" align="center">
        <label>
          <input type="checkbox" class="minimal" id="${menu.menu_id1}" name="${menu.menu_id1}" value="${menu.menu_id}" ${checked} />
        </label>
      </td>
    </tr>
  </tbody>
</table>

Comments