Ajax는 HTML 테이블을 새로 고치는 대신 제거합니다.

Question

저는 프로젝트를 만들고 Ajax를 처음으로 사용하고 있습니다. 현재 데이터 테이블이 있으며 Ajax를 사용하여 페이지를 다시로드하지 않고도 테이블에서 레코드를 추가 및 삭제할 수 있습니다. 다음 단계는 데이터가 데이터에 추가되거나 데이터에서 제거 될 때 테이블의 데이터를 새로 고치는 것입니다. 테이블의 ID가 #testtable입니다

$(document).ready(function(){ 

$('form#TesttableIndexForm').submit(function(event){ 
    event.preventDefault(); 

    $.ajax({ 
     url:'/testing/save_ajax_data', 
     type:'POST', 
     data: $("form#TesttableIndexForm").serialize(), 
     success: function(data) { 
      $("#testtable").replaceWith(data); 
     }, 

    });  
}); 

$('a.deleteajax').click(function(event){ 
    event.preventDefault(); 

    var answer = confirm("Delete this record?") 
    if (answer){ 
     $.ajax({ 
      url:'/testing/delete_ajax_data/', 
      type:'GET', 
      data: $(this).attr("href"), 
      success: function(data) { 
       $("#testtable").replaceWith(data); 
      }, 
     }); 
    } 

    return false; 
}); 

}); 

: 내 Ajax 코드에서

, 나는 다음과 같은 있습니다. 코드의 을 코드의 success 부분에 추가하여 데이터가 추가되거나 제거되면 테이블이 새로 고쳐지도록했습니다.

그러나 데이터를 제거하고 해당 Ajax 코드를 사용하여 추가 할 수 있지만 두 이벤트가 발생할 때 테이블이 사라집니다. 페이지를 수동으로 다시로드하면 표가 수정 된 데이터와 함께 다시 나타납니다.

나는 CakePHP를 사용하고 있으며 테이블의 데이터는 데이터베이스에서 생성됩니다. 이게 내가 문제를 일으키는 원인이 될까?

미리 감사드립니다.

Answer 1

문제가 무엇인지 알아 냈습니다.

내 Ajax 파일에 HTML 테이블을로드 할 컨트롤러의 URL 인 var loadUrl = "/test-area/table/";을 추가했습니다. 그때 나는 기본적으로 데이터베이스를 다시 쿼리 내 컨트롤러 내에서 함수를 작성했다 : 이것에 대해 게임을 할 때 $this->layout = 'ajax';를 지정하지 않은 경우 기본값으로 페이지를로드하는 것입니다 때주의 사항 무슨 짓을

function testtable() { 
    $this->layout = 'ajax'; 
    $this->loadModel('Testtable'); 

    $testing = $this->Testtable->find('all'); 
    $this->set('testing', $testing); 
} 

형세. 그러면 페이지가 완전히 분리됩니다. 그래서 ajax이라는 완전히 공백의 레이아웃 파일을 만들었습니다.

그런 다음, 아약스 코드에서, 나는 제거 :

$("#testtable").replaceWith(data); 

으로 : 레코드가 추가되거나 제거 될 때 이러한 모든 것들을

$("#testtable").load(loadUrl + "#testtable"); 

, 테이블은하지 않고 다시로드됩니다 문제.