Checkboxes values are not obtained until click event

0

I have a function that executes a query and I obtain a data which I assemble inputs of type checkboxes in the following way:

function checkboxPlagues(id){
    $.ajax({
      url: getBaseUri() + 'planthealth/getplagues/'+ id,
      dataType: 'json',
      'error': function(response) {
        redirectPage(response.status);
      },
      success: function(response) {
        var data = response['return'];
        var divs = '';

        for(var i in data){
          divs += '<div class="col-lg-12 no-margin no-padding">'+
                    '<div class="col-lg-12 no-margin no-padding">'+
                      '<input type="checkbox" id="ck_'+ data[i].id +'" name="ck_plague[]" value="'+ data[i].id +'" checked = "checked">'+ data[i].plague +
                    '</div>'+
                  '</div>';
        }

        $checkPlague.append(divs);
      }
    });
  }

This function is executed when the page is loaded, up there well. Then what I do is capture the values of each input that are checked to send it to a function that makes me a query with the selected values of the following way:

$consult.on('click', function(e){
    e.preventDefault();
    var arrPlague = [];

    $("input[name='ck_plague[]']:checked").each(function(){
      arrPlague.push($(this).val());
    });
    resultPlanthealth(arrPlague);
  });

$consult is the button that calls the function resultPlanthealth and sends an array with the values of the checkboxes selected as follows:

function resultPlanthealth(arrPlaguess){

var url = getBaseUri() + 'planthealth/getplaguequadrant/'+ arrPlagues;

$.ajax({
    url: url,
    dataType: 'json',
    'error': function(response) {
      redirectPage(response.status);
    },
    beforeSend: function() {
        $("#loading-screen").show();
    },
    complete: function() {
        $("#loading-screen").hide();
    },
    success: function(response) {
      var incidence  = response['return'];

      for (var i in incidence) {
          //Aquí armo una tabla pero todo funciona bien
      }
    }
});
  }

To execute the $consult button when the page loads, I do it in the following way:

$consult.click();

The problem is that when I load the page the data of checkboxes is not obtained and it only works until when I click the button $consult

But I do create checkboxes from HTML if it works without having to click the $consult button, but I need it to be from jquery because it must be dynamic.

I have reviewed ways but I could not find how to solve this.

Greetings!

    
asked by Fabian Sierra 26.09.2017 в 03:50
source

1 answer

0

Regards

It will be enough for the so-called $consult.click(); to be performed from function checkboxPlagues just after line $checkPlague.append(divs); ; that is:

function checkboxPlagues(id){
    $.ajax({
      url: getBaseUri() + 'planthealth/getplagues/'+ id,
      dataType: 'json',
      'error': function(response) {
        redirectPage(response.status);
      },
      success: function(response) {
        var data = response['return'];
        var divs = '';

        for(var i in data){
          divs += '<div class="col-lg-12 no-margin no-padding">'+
                    '<div class="col-lg-12 no-margin no-padding">'+
                      '<input type="checkbox" id="ck_'+ data[i].id +'" name="ck_plague[]" value="'+ data[i].id +'" checked = "checked">'+ data[i].plague +
                    '</div>'+
                  '</div>';
        }

        $checkPlague.append(divs);
        $consult.click(); /* Aquí se invoca */
      }
    });
  }
  

Attention so that it is resolved

    
answered by 26.09.2017 / 21:47
source