CODEWITHSUNDEEP
javascriptjquery
Dom
Dom

Reputation: 3444

how to find the nearest element

How to get visible the nearest <i> element after an input.

My html code :

<td data-sort-initial="true" data-value="azert" style="padding:7px;position:relative;">
                            <input class="form-control input-sm edit2" data-nom_champ="contact_label" data-id_ecole_contact="10" name="contact_label" type="text" value="azert">
                            <i class="fa fa-spinner fa-spin" id="waiting_label_10" style="display:none;position:absolute;right:10px;top:13px;"></i>
                        </td>

And my js code :

$.ajax({
            type        : 'POST',
            url         : $('#url_for_ajax').val()+'/update_ecole_contact_ajax',
            dataType    : 'json',
            data        : {_token:$('meta[name="_token"]').attr( 'content' ),id_ecole_contact:$(this).data('id_ecole_contact'),nom_champ:$(this).data('nom_champ'),new_value:$(this).val()},
            beforeSend  : function() {
                $(this).closest('i').next().show();
                // $('#waiting_valeur'+id_ecole_contact).show();
            },
            success     : function(reponse) {
                $('#waiting_'+id_ecole_contact).hide();
            }
        });

In this example, the <i> element is still not visible. The problem is here :

$(this).closest('i').next().show();

But I do not know what exactly.

Upvotes: 0

Views: 50

Answers (1)

guest271314
guest271314

Reputation: 1

I detail : I have an input and I send and ajax request when the value of this input changes.

Try using event.target , .next()

$("input").change(function(event) {
  $.ajax({
    type: 'POST',
    url: $('#url_for_ajax').val() + '/update_ecole_contact_ajax',
    dataType: 'json',
    data: {
      _token: $('meta[name="_token"]').attr('content'),
      id_ecole_contact: $(this).data('id_ecole_contact'),
      nom_champ: $(this).data('nom_champ'),
      new_value: $(this).val()
    },
    beforeSend: function() {
      // here, `event.target` is `input`
      $(event.target).next("i").show();
      // $('#waiting_valeur'+id_ecole_contact).show();
    },
    success: function(reponse) {
      $('#waiting_' + id_ecole_contact).hide();
    }
  });
})

Upvotes: 1

Related Questions