>source

데이터가 성공적으로 제출되면 업데이트된 목록을 호출할 뿐만 아니라 데이터베이스에 데이터를 생성 및 업데이트하기 위한 일련의 중첩 Ajax 호출이 있습니다.

code는 다음과 같이 작동합니다.

(1) 페이지가 렌더링될 때 트랜잭션 목록이 표시되며 각 행은 사용자가 편집할 수 있습니다.

(2) 특정 행을 클릭하면 Ajax 호출을 실행하여 업데이트할 데이터로 채워진 양식을 검색합니다.

(3) 양식은 Ajax를 통해서도 제출됩니다.

(4) 성공적으로 제출되면 테이블을 업데이트하기 위해 다른 Ajax 호출을 수행합니다.

첫 번째 문제: 테이블이 Ajax를 통해 로드될 때 "편집" 버튼이 더 이상 작동하지 않습니다. 두 번째 문제: 업데이트 및 생성을 위해 표시되는 양식은 양식을 업데이트할 때 미리 채워져 있다는 점을 제외하고는 동일합니다. Ajax 호출을 복제하는 것을 피하고 싶지만 그렇게 하지 않으면 첫 번째 Ajax 호출(pt 1)에서 로드된 후 양식을 제출할 수 없었습니다. 더 깨끗한 code를 만드는 방법이 있습니까?

다음은 자바스크립트 code입니다. 서버 측에서는 모두 잘 작동합니다.

$(".edit-transaction").click(function () {
  //obtain the object id to load the correct form
  const object_id= $(this).data('object-id');
  //request the form via AJAX Get request
  $.ajax({
    type: 'GET',
    url: "/transaction/",
    data: {
      'slug': object_id
    },
    success: function(response) {
      //Get the form for the requested object
      $("#display-form").html(response.html); //this code retrive the form
      $("#transaction-form").submit(function (e) {
        //preventing from page reload and default actions
        e.preventDefault();
        let serializedData= $(this).serialize();
        //Update the form via AJAX
        $.ajax({
          type: 'POST',
          url: "/transaction/",
          data: serializedData,
          success: function (response) {
            console.log('updated successfully')
            //load the table with the new content updated
            $.ajax({
              type: 'GET',
              url: "/get-transactions-list/",
              success: function (data) {
                $("#display-transaction-list").html(data.html);
              },
            });
          },
          error: function (response) {
            let error= response ["responseJSON"]["error"];
            $.each(error, function (code, message) {
              alert('message');
            });
          }
        })
      })
    },
    error: function (response) {
      let error= response ["responseJSON"]["error"];
      $.each(error, function (code, message) {
        alert('message');
      });
    }
  })
});
$("#transaction-form").submit(function (e) {
  //preventing from page reload and default actions
  e.preventDefault();
  let serializedData= $(this).serialize();
  //Create a new transaction via AJAX
  $.ajax({
    type: 'POST',
    url: "/transaction/",
    data: serializedData,
    success: function (response) {
      console.log('created successfully')
      //load the table with the new content updated
      $.ajax({
        type: 'GET',
        url: "/get-transactions-list/",
        success: function (data) {
          $("#display-transaction-list").html(data.html);
        },
      });
    },
    error: function (response) {
      let error= response ["responseJSON"]["error"];
      $.each(error, function (code, message) {
        alert('message');
      });
    }
  })
})

도움을 주셔서 감사합니다.

jQuery ajax 함수는 약속 사용을 지원합니다. 이는 async /await 구문으로 더 깔끔한 code를 만들 수 있음을 의미합니다. 그러면 중첩된 AJAX 호출이 많이 제거됩니다.

Emiel Zuurbier2022-02-15 10:30:12

이벤트 핸들러 내에서 이벤트 핸들러를 등록하는 것은 권장하지 않습니다. 대신 수신하려는 요소가 동적으로 추가되는 경우 이벤트 위임을 사용하십시오.

Phil2022-02-15 10:30:12
  • 답변 # 1

    일부 요소는 비동기식으로 추가되므로 런타임에 추가된 이벤트 리스너는 해당 요소에 영향을 미치지 않습니다. 대신 "이벤트 위임"을 통해 이벤트를 수신해야 합니다.

    테이블 콘텐츠를 로드하기 위한 사용자 지정 이벤트를 만들 수도 있습니다. 따라서 테이블을 업데이트하려면.방아쇠()당신의 맞춤 이벤트. 이것은 삭제 등과 같은 테이블 업데이트가 필요한 다른 기능을 구현하려는 경우에 유용합니다.

    //custom event for loading the table content
    $(document).on('load.table', '#display-transaction-list', function () {
        const $table= $(this);
        $.ajax({
            type: 'GET',
            url: "/get-transactions-list/",
            success: (data)=> $table.html(data.html)
        });
    });
    //edit transaction event
    $(document).on('click', '.edit-transaction', function () {
        //obtain the object id to load the correct form
        const object_id= $(this).data('object-id');
        //request the form via AJAX Get request
        $.ajax({
                type: 'GET',
                url: "/transaction/",
                data: {
                    'slug': object_id
                },
                success: function(response) {
                    //Get the form for the requested object
                    $("#display-form").html(response.html); //this code retrive the form
                },
                error: function (response) {
                    let error= response ["responseJSON"]["error"];
                    $.each(error, function (code, message) {
                    alert('message');
                });
            }
        })
    });
    //save transaction event
    $(document).on('submit', '#transaction-form', function (e) {
        //preventing from page reload and default actions
        e.preventDefault();
        let serializedData= $(this).serialize();
        //Update the form via AJAX
        $.ajax({
            type: 'POST',
            url: "/transaction/",
            data: serializedData,
            success: function (response) {
                //you can add some data to the response
                //to differentiate between created and updated. Eg response.actionType
                console.log('created or updated successfully')
                //load the table with the new content updated
                $("#display-transaction-list").trigger('load.table');
            },
            error: function (response) {
                let error= response ["responseJSON"]["error"];
                $.each(error, function (code, message) {
                    alert('message');
                });
            }
        })
    })

  • 이전 css : 이 div 겹침을 분리하는 방법
  • 다음 Kedro 데이터 카탈로그에 .wav 파일 디렉토리를 어떻게 추가합니까?