Подождите, пока пользователь не щелкнет на промежутке, затем запустите запрос AJAX - PullRequest
Новая
       15

Подождите, пока пользователь не щелкнет на промежутке, затем запустите запрос AJAX

1 голос
/ 22 мая 2019

В настоящее время я работаю с простым AJAX-запросом, когда пользователь изменяет что-то в поле ввода и нажимает значок «проверить».Приведенный ниже код не меняет значок с «изменить» на «проверить», НО, когда я удаляю строку $.when($(icon).trigger("click")).then(function(){ с помощью запроса AJAX, значок меняется.

Я действительно ценю любую помощь с соответствующей инструкцией jquery 

$(document).ready(function() {
    $('.clickable-edit-icon').click(function(e){
        e.preventDefault();

        var delete_id = $(this).closest('tr').data('contact-id');
        var icon = $(this).children();
        var input = $(this).parent().children('input');
        var input_text = $(input).text();

        if (icon.text() == "edit") {
            $(input).prop('disabled', false);
            $(icon).text("check");
            $.when($(icon).trigger("click")).then(function(){
                $.ajax({
                    url: 'edit/'+delete_id+'/',
                    method: 'PUT',
                    data: {},
                    contentType:'application/json',
                    error: function(result){},
                    success: function(result) {}
                });
            });
        }else{
            $(input).prop('disabled', true);
            $(icon).text("edit");
        }
    });
});

Структура HTML 

<tr>
   <td id="contact-first-name">
      <input value="{{ contact.first_name }}" disabled>
          <span class='clickable-edit-icon'>
              <i class='tiny material-icons'>edit</i>
          </span>
   </td>
</tr>

Если вам интересно, почему я написал var input = $(this).parent().children('input'); вместо var input = $(this).parent('input'); причина в том, что ввод во втором случае не определен.

Ответы [ 2 ]

1 голос
/ 23 мая 2019

В основном благодаря @ADyson проблема была решена. Следующий шаг, с которым мне приходится иметь дело, это метод PUT 400 (Bad Request) в Django, но да ... это другая история. Теперь AJAX выполняется только при нажатии на значок / диапазон проверки, и это было целью решения.

Файл JS 

$(document).ready(function(){

    $(".clickable-edit-icon").on('click',function(e){
        e.preventDefault();

        var span = $(this);
        var icon = $(this).children();
        var input = span.siblings('input');

        input.prop('disabled', false);
        span.siblings(".clickable-check-icon").show();
        span.hide();
    });

     $('.clickable-check-icon').on('click',function(e){
        e.preventDefault();

        var span = $(this);
        var icon = $(this).children();
        var input = span.siblings('input');
        var edit_id = span.closest('tr').data('contact-id');

        input.prop('disabled', true);
        span.siblings(".clickable-edit-icon").show();
        span.hide();

        $.ajax({
            url: 'edit/'+edit_id+'/',
            method: 'PUT',
            data: {},
            contentType:'application/json',
            dataType: 'json',
            error: function(result){},
            success: function(result) {
                $(icon).text("edit");
                $(input).prop('disabled', true);
            }
        });

    });
});

Структура HTML 

<tr>
   <td id="contact-first-name">
      <input value="{{ contact.first_name }}" disabled>
          <span class='clickable-edit-icon'>
              <i class='tiny material-icons'>edit</i>
          </span>
          <span class='clickable-check-icon' style="display:none;">
              <i class='tiny material-icons'>check</i>
          </span>
   </td>
</tr>
0 голосов
/ 22 мая 2019

Не видя html-структуру, я изложил ее в простой форме: 

<div class='item'>
  <input tyle="text" />
  <span class="clickable-edit-icon editing">check</span>
</div>

$(document).ready(function() {
  $('.clickable-edit-icon').on('click',function(e){
        e.preventDefault();

        var delete_id = $(this).closest('tr').data('contact-id');
        var icon = $(this);
        var input = $(this).parent().children('input');
        var input_text = $(input).text();
        if (icon.text() == "edit") {
            $(input).prop('disabled', false);
            $(icon).text("check");
            $.when(icon.trigger("click")).then(function(){
              $.ajax({
                    url: 'edit/'+delete_id+'/',
                    method: 'PUT',
                    data: {},
                    contentType:'application/json',
                    error: function(result){},
                    success: function(result) {}
                });
            });
        }else{
            $(input).prop('disabled', true);
            $(icon).text("edit");
        }
    });
};

Надеюсь, это поможет в мышлении.

...