후속 사용에 대한 ajax 업데이트 관련 문제

Question

jquery-ui 대화 상자에서 열리고 ajax를 통해 제출되고 json 형식으로 업데이트 된 데이터를 읽고 페이지를 업데이트하는 양식이 있습니다. 처음에는 모든 것이 잘 작동합니다. 후속 실행에서 데이터는 데이터베이스에서 올바르게 업데이트되지만 페이지의 업데이트는 첫 번째 실행과 동일한 셀에 적용됩니다.

웹 개발자 도구 모음에서 "생성 된 소스보기"를 사용하면 이전 양식이 아직 DOM에 있음을 알 수 있습니다. 따라서이 $("form#hostEdit").find("input#id").val()은 항상 첫 번째 양식을 찾거나 한 번만 평가됩니다. jQuery에 익숙하지 않아서 어떻게해야할지 모르겠습니다. 그 양식은 여전히 ​​DOM에 있어야합니까? 다른 선택기를 사용해야합니까? 뭔가 다른 거? 업데이트를 적용

$("table.hostgrid a.new").click(function() { 
    var id = this.id.substring(3); 
    var $dialog = $('<div></div>') 
    .load('/hosts/new?byte1=${network.byte1}&byte2=${network.byte2}&byte3=${network.byte3}&byte4=' + id); 
    var getHostAction = #{jsAction @NetworkHosts.view(':id') /} 

    $dialog.dialog({ 
    autoOpen: false, 
    title: 'New host at ${network.byte1}.${network.byte2}.${network.byte3}.' + id, 
    width: 500, 
    buttons: { 
     "Create": function() { 
     $.ajax({ 
      async: true, 
      type: 'post', 
      url: '/hosts/create', 
      data: $("form#hostNew").serialize(), 
      success: function(response) { 
      $dialog.html(response); 
      if ($("div.flashSuccess") != null) { 
       $dialog.dialog('destroy'); 
       $.ajax({ 
       url: getHostAction({'id': $("form#hostEdit").find("input#id").val()}), 
       dataType: 'json', 
       success: function(data) { 
        updateHost(data); 
       }, 
       error: function(data, msg, exception) { 
        alert("Error during request: " + msg); 
       }, 
       });     
      } 
      } 
     }); 
     } 
    } 
    }); 
    $dialog.dialog('open'); 

    return false; 
}); 

기능 : 당신 updateHost() 함수는, 잘못 무슨 일이 일어나고 있는지 결정하기 위해 정말 열심히 될 것입니다 무엇을 보지 않고

function updateHost(host) { 
    var cell = $("td#dot"+host.byte4); 
    cell.fadeOut("fast", function() { 
    cell.find("span.hostname").text(host.hostname).attr("title", host.description); 
    cell.removeClass().addClass(host.agegroup); 
    if (host.type) 
     cell.addClass(host.type.toLowerCase()); 
    if (host.is_dhcp) 
     cell.addClass("dhcp"); 
    if (host.is_service) 
     cell.addClass("service"); 

    cell.fadeIn("fast"); 
    }); 
} 

Answer 1

귀하의 의구심이 정확합니다. 대화 상자 위젯이 작동하는 방식 때문에 $("form#hostEdit")이로드 한 첫 번째 양식을 실제로 찾습니다.

이 수행 할 때 $dialog.html(response);을, 당신은 대화 상자 요소 (사용자가 만든 <div>)이있는 DOM,로 그 HTML 응답을로드하는, 당신은이 작업을 수행 할 때 $dialog.dialog('destroy'); 당신은 대화 위젯을 파괴하고 , 아니 콘텐츠에 ... 그것은 여전히 ​​그 대화 상자 컨테이너 요소에 더 이상 래핑되지 DOM에있어. 당신이 원하는 것을 들어

,이 같은 내용이 당신은뿐만 아니라로드 것을 명시 적으로 .remove() 필요 : 다음

$dialog.dialog('destroy').remove(); 

중복을 가진 요소가 아니다 때문에 당신이 예상되는 동작을 얻을 것이다 ID가 여전히 DOM에 있습니다.

Answer 2

. 이 기능 버전의 웹에 링크 할 수 있습니까?

일반적으로 양식과 관련하여 ID를 사용하여 항상 올바른 페이지를 처리하고 싶습니다. 특히 페이지에 더 많은 페이지가있는 경우가 있습니다. 둘째, 해당 양식의 내용을 바꾸려는 경우 아니요, 페이지에 두 개가 없어야합니다. 첫 번째 것을 제거하고 두 번째 AJAX 호출에서 반환 된 데이터로 대체해야합니다.

내가하고있는 일을 성취하기 위해 왜 두 건의 AJAX 호출이 필요한지 질문해야합니다. 백엔드가 프론트 엔드에서 수행중인 모든 작업을 수행하지 않고 단순히 최종 정보를 반환 할 수 없습니까?

또한 양식을 바꾸려면 live 또는 livequery와 같은 것을 사용하여 click 이벤트를 새 DOM 객체에 다시 바인딩해야합니다. 이벤트는 페이지가 처음로드 될 때만 바인드됩니다.

이러한 제안 중 하나가 도움이되기를 바랍니다.

Answer 3

이제 ONE 대화 인스턴스를 만들 수 있습니다 그냥 업데이트 내용 또는 접근을하여 대화 상자를 파괴 한 후 :

var id = $("form#hostEdit").find("input#id").val(); 
$dialog.remove(); 

을하고 다음 Ajax 요청에 ID 변수를 사용합니다.