Values from JSP are not getting to 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.

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.

Swati · Accepted Answer

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

Values from JSP are not getting to javascript

Answers (1)

Related Questions