>source

나는 만들었습니다 Ajax Request 숨기고 싶은 modal성공. 내가 직면 한 문제는 hide 메서드 내부의 기능입니다.첫 통화에서 작동하지 않음하지만 다시하면 효과가 있습니다. 다음은 코드입니다.

HTML

<table class="table table-hover">
    <thead>
        <tr>
            <th scope="col">User Id</th>
            <th scope="col">Time In</th>
            <th scope="col">Status</th>
            <th scope="col">LAST ACTIVE</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<div class="modal" tabindex="-1" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Delete Session</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Delete Session <span></span>?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="deleteSession">Submit</button>
      </div>
    </div>
  </div>
</div>

JS

$('#deleteSession').click(function(event) {
    $.ajax({
        url: `/session/${userId}`,
        type: 'POST',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        dataType: 'JSON',
            data: {
            userId: userId,
            _method: "DELETE"
          },
        })
        .done(function(data) {
            $('#myModal').modal('hide');
            $('.alert.alert-success > span').text('Success');
            userId = "";
            $('#myModal').on('hide.bs.modal', function (e) {
              // Function does not run on first call 
              $(".alert.alert-success").show();
              getSessions();
            })
        })
        .fail(function() {
            console.log("error");
        })
});

문제는 무엇이며 어떻게 해결합니까?

  • 답변 # 1

           .done(function(data) {
                // hide modal (before)
                $('#myModal').modal('hide');
                ...
                // register hide event listener (after)
                $('#myModal').on('hide.bs.modal', function (e) {
                    ...
                })
            })
    
    

    모달을 숨기고 그 후에 hide action listener를 추가합니다. 리스너는 선언 후 작동을 시작하므로 두 번째부터 숨기기 작업을 처리합니다.

    그 후 완료되면 이전 이벤트를 삭제하지 않고 이벤트 숨기기에 대한 새 리스너를 매번 추가합니다.

    나는 이동하는 것이 좋습니다 $('#myModal').on('hide.bs.modal', ...}); 외부 done 메서드 (페이지가로드 될 때 리스너를 한 번만 생성한다는 의미).

    EDIT1 : 작업 코드 샘플

    $( document ).ready(function() {
      // create event listener once when page loaded
      $('#myModal').on('hide.bs.modal', function (e) {
         $(".alert.alert-success").show();
         getSessions();
      });
      $('#deleteSession').click(function(event) {
        $.ajax({
            url: `/session/${userId}`,
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            dataType: 'JSON',
                data: {
                userId: userId,
                _method: "DELETE"
              },
            })
            .done(function(data) {
                $('#myModal').modal('hide');
                $('.alert.alert-success > span').text('Success');
                userId = "";
            })
            .fail(function() {
                console.log("error");
            })
      });
    });
    
    

    'event'에 대한 Jquery는 내부에서 작업을 실행하지 않고 'event'가 발생할 때 실행할 작업을 등록합니다.

  • 답변 # 2

    당신은 시도 할 수 있습니다 success(function(data))

           success(function(data) {
                $('#myModal').modal('hide');
                $('.alert.alert-success > span').text('Success');
                userId = "";
                $('#myModal').on('hide.bs.modal', function (e) {
                  // Function does not run on first call 
                  $(".alert.alert-success").show();
                  getSessions();
                })
            })
    
    

    또는 complete(function())

    Oficial jQuery 문서에서.

    Callback Function Queues

    The beforeSend, error, dataFilter, success and complete options all accept callback functions that are invoked at the appropriate times.

    나는 그것이 효과가 있기를 바랍니다

관련 자료

  • 이전 node.js - knexjs PostgreSQL에서"Listen"을 사용하는 방법이 있습니까?
  • 다음 lua - 오류 - 개체에 새 속성을 할당하려고 할 때 "테이블이 아닌 인덱스 시도"