2

Tenho esse código HTML e PHP

<?php foreach (array_chunk($unfollow, 3) as $row): ?>
<div class="row mb-5">
  <?php foreach ($row as $value): ?>
    <?php //var_dump($value) ?>
    <div class="col-md-4">
      <h5><?=$value->node->username?></h5>
      <img src="<?=$value->node->profile_pic_url?>" alt="<?=$value->node->profile_pic_url?>" class="img-fluid" width="100" height="100" data-toggle="tooltip" data-placement="top" title="Você segue <?=$value->node->full_name?>">

      <form method="post" id="add_white_list_<?=$value->node->username?>">
        <div id="message"></div>
        <div class="form-group">
          <input type="hidden" name="his_ds_user_id" value="<?=$value->node->id?>" class="form-control">
          <input type="hidden" name="username" value="<?=$value->node->username?>" class="form-control">
          <input type="hidden" name="url" value="<?=Url::url_base('ajax/add/white_list')?>" class="form-control">
        </div>
        <button type="submit" name="submit" class="btn btn-outline-primary btn-block">Lista branca</button>
      </form>
    </div>
  <?php endforeach ?>
</div>
<?php endforeach ?>

E este em JQuery:

$('#add_white_list_' + 'input[name=his_ds_user_id]'.val()).submit(function(event) {
  event.preventDefault();
  $('#add_white_list button[name=submit]').attr({
    disabled: true
  }).html('<i class="fa fa-spinner fa-spin"></i>');

  function add_white_list() {
    $.ajax({
      url: $('#add_white_list input[name=url]').val(),
      type: 'POST',
      dataType: 'json',
      data: $('#add_white_list').serialize(),
      success: function(a) {
        if (a['status'] === 'ok') {
          $('#gender #message').addClass('alert alert-success').html(a['message']);
        }
      },
      error: function(jqXHR, exception) {
        if (jqXHR.status === 403) {
          $("#add_white_list #message").removeClass('alert alert-info').addClass('alert alert-danger').html('Limite de taxa excedido.');
          $('#add_white_list button[name=submit]').show().attr({
            disabled: false
          }).html('<i class="fa fa-plus"></i> Enviar seguidores');
        } else {
          setTimeout(add_white_list(), 2000);
        }
      },
    });
  }
  add_white_list();
});

Repare que estou dando um id para cada formulário, só que não está funcionando

$('#add_white_list_' + 'input[name=his_ds_user_id]'.val()).submit(function(event)

Era pra ficar algo como: #add_white_list_123456789.

Tem alguma outra forma de fazer isso?

8
  • Também não é, mas acho que é por este caminho aí
    – Banks
    Commented 14/04/2019 às 4:06
  • Mas não precisa dar id's aos forms. Basta pegar o que foi submetido com $(this)
    – Sam
    Commented 14/04/2019 às 4:08
  • Teria um exemplo ?
    – Banks
    Commented 14/04/2019 às 4:08
  • Por que desta forma, só o primeiro item do loop funciona.
    – Banks
    Commented 14/04/2019 às 4:10
  • Quase consegui, só não sei o que eu fiz que deu erro nessa linha $(this + ' button[name=submit]').attr({ disabled: true }).html('<i class="fa fa-spinner fa-spin"></i>');
    – Banks
    Commented 14/04/2019 às 4:23

1 Resposta 1

1

Não precisa usar id's em cada form. Basta pegar o form que disparou o evento submit com this e $(this). Até porque você também está repetindo id's, como o #message.

Altere o #message por uma class .message. Aí basta você buscar os elementos usando this. Por exemplo:

url: $('input[name=url]', this).val(),

E:

$('.message', this)

E no setTimeout, você faz:

setTimeout(function(){
$this.submit()}, 2000);

Onde a variável $this você declara no início da função do evento:

var $this = $(this);

Tanto this quanto $this representa o form que chamou o evento.

Também não precisa usar uma função dentro da função do evento. Basta executar o código direto, que será chamado novamente disparando o evento de forma manual no setTimeout, como mostrado anteriormente em $this.submit().

Então o código ficará desta forma:

$('form').submit(function(event) {
  event.preventDefault();
  var $this = $(this);
  $('button[name=submit]', this).attr({
    disabled: true
  }).html('<i class="fa fa-spinner fa-spin"></i>');

    $.ajax({
      url: $('input[name=url]', this).val(),
      type: 'POST',
      dataType: 'json',
      data: $this.serialize(),
      success: function(a) {
        if (a['status'] === 'ok') {
          $('.message', $this).addClass('alert alert-success').html(a['message']);
        }
      },
      error: function(jqXHR, exception) {
        if (jqXHR.status === 403) {
          $(".message", $this).removeClass('alert alert-info').addClass('alert alert-danger').html('Limite de taxa excedido.');
          $('button[name=submit]', $this).show().attr({
            disabled: false
          }).html('<i class="fa fa-plus"></i> Enviar seguidores');
        } else {
          setTimeout(function(){
             $this.submit()}, 2000);
        }
      },
    });
});
6
  • Funcionou valeu!
    – Banks
    Commented 14/04/2019 às 5:07
  • Só as mensagens que não estão indo
    – Banks
    Commented 14/04/2019 às 5:21
  • Vc trocou no HTML o #message por .message?
    – Sam
    Commented 14/04/2019 às 5:31
  • Sim troquei, estou acostumado fazer assim $('#gender #message').addClass('alert alert-success').html(a['message']); mas desta forma $(.message, this), nunca fiz. alem do mais fiz, funcionar só que o botão não voltou ao normal.
    – Banks
    Commented 14/04/2019 às 5:35
  • é só trocar todos os this por $this funcionou agora
    – Banks
    Commented 14/04/2019 às 5:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .