JSP 的值未达到 javascript

Question

I have a very weird problem.

I have a jsp in which I populated values from database through jstl tags. I want to read the checked rows into Javascript, but I am not able to get these values into my js file.

I used jQuery, dojo and normal JavaScript to read these values and display in web console, they just don't work.

Can some one please review and let me know why the values cannot be read in javascript? Below is the code snippet of my jsp.

<div class="table-responsive">
  <table class="table">
    <thead></thead>
    <tbody>
    <c:forEach var="emailItemType"
               items="${emailFormModel.getEMailFormDisplayData().getEMailItemTypes()}">
      <tr class="accordion-toggle collapsed" id="accordion1"
          data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
        <th class="expand-button"></th>
        <th>
          <c:out value="${emailItemType.key}"/>
        </th>
        <th><input type="checkbox" class="dijit.form.CheckBox" id="select_all">
        </th>

      </tr>
      <tr class="hide-table-padding">
        <td></td>
        <td colspan="3">
          <div id="collapseOne" class="collapse">
            <c:forEach var="emailItemTypeAttr" items="${emailItemType.value}"
                       varStatus="idx">
              <div class="row">
                <div class="col-sm-1">
                  <input type="checkbox" data-dojo-attach-point="checkBox"
                         name="checkBox" id="checkbox"
                         data-dojo-type="dijit.form.CheckBox"
                         class="dijitCheckBox" value="check1">
                </div>
                <div class="col-sm-2 text-nowrap" id="sourceValue"
                     name="sourceValue" data-dojo-attach-point="sourceValue"
                     value="${emailItemTypeAttr.getSourceValue()}">
                  <c:out value="${emailItemTypeAttr.getSourceValue()}"/>

                </div>
                <div class="col-sm-2 text-nowrap"
                     data-dojo-attach-point="userIdValue" name="userIdValue">
                  <c:out value="${emailItemTypeAttr.getUserIdValue()}"/>
                </div>
                <div class="col-sm-2 text-nowrap"
                     data-dojo-attach-point="objectId" name="objectId">
                  <c:out value="${emailItemTypeAttr.getObjectId()}"/>
                </div>
              </div>
            </c:forEach>
        </td>
      </tr>
    </c:forEach>
    </tbody>
  </table>
</div>

Below is my Js code:

dojo code :
    require([
        "dojo/request",   
        "dojo/dom",
        "dojo/dom-attr",
        "dijit/registry",
         "dojo/text!./templates/email.jsp"
    ], function (request,dom,domattr,registry,template) {
        var source = thisForm.sourceValue.get('value');
        console.log("var is :" + source);       

        var checkboxes = registry.findWidgets(dom.byId('checkbox'));
        console.log(checkboxes);    

       var SourceValue = registry.byId("sourceValue").get('value');
        console.log("sourceValue from regitry id:"+ SourceValue);
         var sourceValue = dojo.byId("sourceValue").value;
         console.log("sourceValue from dojobyid:"+ sourceValue);

       });

JavaScript code throws error saying it is undefined:

var sourceValue = document.getElementById("sourceValue").textContent;;
console.log("sourceValue:"+sourceValue);

Code below is in jquery, which is for selecting all the checkboxes when the above check box is checked. This works but doesn't still display the source value.

$(document).ready(function () {
  var sourceValue = $('#sourceValue').val();
  console.log('sourceValue:' + sourceValue);
  $('#select_all').on('click', function () {
    if (this.checked) {
      $('.dijitCheckBox').each(function () {
        this.checked = true;
      });
    } else {
      $('.dijitCheckBox').each(function () {
        this.checked = false;
      });
    }
  });

  $('.dijitCheckBox').on('click', function () {
    if ($('.dijitCheckBox:checked').length == $('.dijitCheckBox').length) {
      $('#select_all').prop('checked', true);
    } else {
      $('#select_all').prop('checked', false);
    }
  });
});

Nothing just works, please help as I am working on this for a long time.

Answer 1

When checkbox dijitCheckBox is clicked you can use find() and closest() method of jquery to get the value which you need using classname .

Demo Code :

 $(document).ready(function() { $('#select_all').on('click', function() { if (this.checked) { $('.dijitCheckBox').each(function() { this.checked = true; //checkbox->closest <tr>--> find class with name sourceValue console.log($(this).closest('tr').find('.sourceValue').text() + " | "); }); //same do with other div just change classs name } else { $('.dijitCheckBox').each(function() { this.checked = false; }); } }); $('.dijitCheckBox').on('click', function() { //when checkbox is clicked find closest tr with class sourceValue var source_value = $(this).closest('tr').find('.sourceValue').text(); console.log("sourceValue:"+source_value); if ($('.dijitCheckBox:checked').length == $('.dijitCheckBox').length) { $('#select_all').prop('checked', true); } else { $('#select_all').prop('checked', false); } }); });

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div class="table-responsive"> <table class="table"> <thead></thead> <tbody> <tr class="accordion-toggle collapsed" id="accordion1" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne"> <th class="expand-button"></th> <th> <:--<c.out value="${emailItemType.key}" />-->123 </th> <th><input type="checkbox" class="dijit.form:CheckBox" id="select_all"> </th> </tr> <tr class="accordion-toggle collapsed" id="accordion1" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo"> <th class="expand-button"></th> <th> <.--<c.out value="${emailItemType.key}" />-->345 </th> <th><input type="checkbox" class="dijit.form.CheckBox" id="select_all"> </th> </tr> <tr class="hide-table-padding"> <td></td> <td colspan="3"> <div id="collapseOne" class="collapse"> <div class="row"> <div class="col-sm-1"> <input type="checkbox" data-dojo-attach-point="checkBox" name="checkBox" id="checkbox" data-dojo-type="dijit.form.CheckBox" class="dijitCheckBox" value="check1"> </div> <div class="col-sm-2 text-nowrap sourceValue" id="sourceValue" name="sourceValue" data-dojo-attach-point="sourceValue" value="${emailItemTypeAttr.getSourceValue()}">Abc </div> <div class="col-sm-2 text-nowrap" data-dojo-attach-point="userIdValue" name="userIdValue"> 1</div> <div class="col-sm-2 text-nowrap" data-dojo-attach-point="objectId" name="objectId"> 2 </div> </div> </td> </tr> <tr class="hide-table-padding"> <td></td> <td colspan="3"> <div id="collapseTwo" class="collapse"> <div class="row"> <div class="col-sm-1"> <input type="checkbox" data-dojo-attach-point="checkBox" name="checkBox" id="checkbox" data-dojo-type="dijit.form.CheckBox" class="dijitCheckBox" value="check1"> </div> <div class="col-sm-2 text-nowrap sourceValue" id="sourceValue" name="sourceValue" data-dojo-attach-point="sourceValue" value="${emailItemTypeAttr.getSourceValue()}"> xyz </div> <div class="col-sm-2 text-nowrap" data-dojo-attach-point="userIdValue" name="userIdValue"> 2 </div> <div class="col-sm-2 text-nowrap" data-dojo-attach-point="objectId" name="objectId">3</div> </div> </td> </tr> </tbody> </table> </div>