2012-02-08 4 views
0

MVC에서 제출 된 양식에 문제가 있습니다. 그것은 2 개의 다른 점에서 적재 될 수 있고 그것을 제출하는 것과 두 번째는 다시 적재되지 않습니다.MVC 양식이 JQuery 모달 안쪽에서 제출되지 않습니다.

JQuery 모달 대화 상자 내부에로드 된 부분 뷰입니다. 홈페이지에서 모달을 실행하면 정상적으로 제출됩니다.

사용자가 양식을 표시하는 두 번째 모달을 시작할 수있는 작업을 찾을 수 있도록 시작할 수있는 또 다른 모달이 있습니다. 이 양식을 제출하면 컨트롤러에 대한 게시물이 실행되지 않습니다.

$(document).ready(function() { 
    var title =$(this).attr("data-dialog-title"); 

     $(".NoteDialog").live("click", function (e) { 

      e.preventDefault(); 
      if ($(this).attr("data-dialog-title") != "Find Task") 
      { 
       if ($(this).attr("data-dialog-id") == "deleteDialog") { 
        $("<div id='formModal'><img src='../../Content/images/ajax-loader.gif' /></div>") 
        .addClass("dialog") 
        .attr("id", $(this).attr("data-dialog-id")) 
        .appendTo("body") 
        .dialog({ 
         width: 300, 
         position: [600, 50], 
         title: $(this).attr("data-dialog-title"), 
         close: function() { $(this).remove() }, 
         modal: true, 
         buttons: { 
          "Delete": function() { 
           $("#form0").submit(); 
           $(this).dialog("close"); 
          }, 
          Cancel: function() { 
           $(this).dialog("close"); 
          } 
         } 
        }) 
       .load(this.href); 
       } 
       else 
       { 
        $("<div id='formModal'><img src='../../Content/images/ajax-loader.gif' /></div>") 
        .addClass("dialog") 
        .attr("id", $(this).attr("data-dialog-id")) 
        .appendTo("body") 
        .dialog({ 
         width: 800, 
         position: [300, 50], 
         title: $(this).attr("data-dialog-title"), 
         close: function() { $(this).remove() }, 
         modal: true, 
         buttons: { 
          "Save": function() { 
           alert('Handler for .submit() called.'); 
           $("#form0").submit(); 
           $(this).dialog("close"); 
          }, 
          Cancel: function() { 
           $(this).dialog("close"); 
          } 
         } 
        }) 
       .load(this.href); 
       } 
      } 
      else 
      { 
       $("<div id='formModal'><img src='../../Content/images/ajax-loader.gif' /></div>") 
        .addClass("dialog") 
        .attr("id", $(this).attr("data-dialog-id")) 
        .appendTo("body") 
        .dialog({ 
         width: 860, 
         position: [300, 50], 
         title: $(this).attr("data-dialog-title"), 
         close: function() { $(this).remove() }, 
         modal: true 
       }) 
       .load(this.href); 
      } 
    }); 

    $(".close").live("click", function (e) { 
     e.preventDefault(); 
     $(this).closest(".dialog").dialog("close"); 
    }); 
}); 

그것은 모두 모달 대화 상자를 실행에 사용되는 :

여기 JQuery와 스크립트입니다. Alert가 발생하고 Close 대화 상자가 나타나서 스크립트가 처리 중이며 제출하지 않습니다. 제출하는 다른 방법은

<form action="/TimeTracker/AddTime?AddID=183336&TypeID=1&_=1328710484230" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#TimeForm" id="form0" method="post"> 

가된다

부분 도면 @using (Ajax.BeginForm("AddTime","TimeTracker", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "TimeForm" }))

두 번 생성 된 폼 태그 인 사용 형태를 생성? 버튼이 작동하는 양식 자체의 일부로 시도했지만 다른 문제가있었습니다. 취소 단추는 모달을 올바르게 닫지 않아 후속 실행시 여러 모달이 트리거됩니다. 그게 해결 될 수 있다면, 나는이 비 게시 문제를 회피 할 수 있었다.

업데이트 : XHR 탭으로 Firebug의 시나리오를 실행할 때 가능한 문제점/단서를 찾았습니다. 폼이 첫 번째 모달을 처리하는 FindTask 메서드에 게시 된 것처럼 보입니다. AddTime 메서드에 게시해야합니다.이 메서드는 홈 페이지에서 호출 할 때 발생합니다.

AJAX가 양식 태그에 지정된 작업에 게시하지 않는 이유는 무엇입니까?

또한 제출시 AddTime 양식의 양식 필드가 아닌 FindTask 모달에 사용되는 게시물을 보냅니다.

답변

1

MVC가 동일한 양식 ID를 두 대화 상자 양식에 할당하고 있다는 문제점이 밝혀졌습니다. 그것은 틀린 것 인 발견 한 첫번째를 복종시킬 것입니다.

양식에 대한 특정 ID를 지정하면 제출할 양식을 지정할 수있었습니다.

관련 문제