Retrieve via Jquery custom "date" attribute value

Question

I am a beginner in programming and I have a question about Jquery (if I’m wrong, please correct me...).

I have a screen that generates several div’s dynamically with information about clubs, and within each div has a button that when clicking, you have to pass 3 parameters via JSON to the controller that responds with true or false the request.

The fact is that I can not at all get the parameters of the div that was clicked, I have the following code.

obs. The parameters I need, I put in a "date" attribute inside the TD tag.

I appreciate the help with this, I believe it’s a simple thing, but I’m not really getting...

< script >
  $(function() {
    $('.ok').click(function(e) {
      e.preventDefault;
      var IP_Clube = $(this).closest('tr').find('td[data-ip]').data('ip');
      var Alias_Clube = $(this).closest('tr').find('td[data-alias]').data('alias');
      var Cod_Clube = $(this).closest('tr').find('td[data-codigo]').data('codigo');
      $('#divCarregando').modal({
        show: true
      });
      $.ajax({
        url: "/ClubeSlim/Index2",
        contetType: "application/json",
        data: {
          'IP_Clube': IP_Clube,
          'alias_clube': Alias_Clube,
          'cod_clube': Cod_Clube
        },
        type: "POST",
        dataType: "json",
        success: function(json) {
          if (json.ind_statusconexao == true) {
            $('#divCarregando').modal('hide');
            alert('Base do clube ' + Alias_Clube + ' verificado com sucesso!');
            window.location.reload();
          } else {
            $('#divCarregando').modal('hide');
            alert('A conexão com o Clube ' + Alias_Clube + ' FALHOU!');
            window.location.reload();
          }
        }
      });
    });
  }); < /script>

<div class="row">
  @foreach (var item in ViewBag.Clubes)
{
  <div class="col-md-3 col-sm-3">
    <div class="panel panel-success">
      <div class="panel-heading">
        <h4 style="text-align:center">@item.nom_clube</h4>
      </div>
      <div class="panel-body">
        <table>
          <tr>
            <td data-codigo="@item.cod_clube">
              <p class="text-muted">Código do Clube: <span class="text-success">@item.cod_clube</span>
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p class="text-muted">Empreendimento: <span class="text-success"> @item.nom_empr </span>
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p class="text-muted">Capacidade: <span class="text-success"> @item.num_capacidade </span>
              </p>
            </td>
          </tr>
          <tr>
            <td data-ip="@item.ip_clube">
              <p class="text-muted">IP: <span class="text-success"> @item.ip_clube </span>
              </p>
            </td>
          </tr>
          <tr>
            <td data-alias="@item.alias_clube">
              <p class="text-muted">Alias: <span class="text-success"> @item.alias_clube </span>
              </p>
            </td>
          </tr>
          <tr>
            <td>
              <p class="text-muted">Última Atualização: <span class="text-success"> @item.dat_atual </span>
              </p>
            </td>
          </tr>
        </table>
        <button class="btn btn-outline btn-success btn-block ok">Verificar Conexão</button>
      </div>
      <div class="panel-footer">
        <span class="text-info">Última Verificação em : @item.dat_ult_verificacao</span>
      </div>
    </div>
  </div>
}
</div>

Answer 1

Try placing the parameters on the button itself

<button data-params='{"IP_Clube":"@item.ip_clube","alias_clube":"@item.alias_clube","cod_clube":"@item.cod_clube"}' class="btn btn-outline btn-success btn-block ok">Verificar Conexão</button>

Then you can do it like this:

$('.ok').click(function(e) {
    var data = $(this).data("params");
    $.post("/ClubeSlim/Index2", data, function(retorno){
        alert(retorno);
    });
});

Answer 2

I get attribute values by naming them in HTML in the ID property:

//JSP
<select name="tipoTk" id="tipoTk" tp="select">

// Script
tipoTk = $("#tipoTk").val();
$.ajax({
  type: "get",
  data: {tipoTk: tipoTk},
  ...