닫기 단추가 모달을 클릭하면 Ajax POST가 실행됩니다.

Question

제출을 클릭하면 아약스 게시물을 수행 할 수있는 모달을 갖지만 이제는 모달을 닫을 수 있지만 '닫기' 그것은 여전히 ​​아약스 게시물을합니다. '닫기'버튼을 클릭하면 아약스 게시물을하고 싶지 않습니다. 이 상황을 어떻게 처리해야할지 모르겠습니다.

모달

<div id="ModelView" class="modal hide fade" data-backdrop="static"> 
    <div class="modal-header"> 
     <button id="close" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3>Add Session</h3> 
    </div> 
    <div class="modal-body"> 
     <input type="hidden" id="rateId" /> 
     <table class="table"> 
      <tr> 
       <td>Client</td> 
       <td> 
        <select id="clientSelect"> 
        </select> 
       </td> 
      </tr> 
      <tr> 
       <td>Lessons</td> 
       <td> 
        <select id="SelectLessonCounter"> 
         <option value="1">1</option> 
         <option value="1.5">1.5</option> 
         <option value="2">2</option> 
        </select> 
       </td> 
      </tr> 
      <tr> 
       <td>From</td> 
       <td> 
        <div class="input-append bootstrap-timepicker-component"> 
         <input id="from" size="16" type="text" readonly="true" /> 
         <span class="add-on"> 
          <i class="icon-time"></i> 
         </span> 
        </div> 

       </td> 
      </tr> 
      <tr> 
       <td>Till</td> 
       <td> 
        <div class="input-append bootstrap-timepicker-component"> 
         <input id="till" size="16" type="text" readonly="true" /> 
         <span class="add-on"> 
          <i class="icon-time"></i> 
         </span> 
        </div> 

       </td> 

      </tr> 
      <tr> 
       <td>Subject</td> 
       <td> 
        <select id="subjectSelect"> 
        </select> 
       </td> 
      </tr> 
      <tr> 
       <td>Type</td> 
       <td> 
        <select id="typeSelect"> 
         <option value="<%# (int)Genius.Models.Enums.RateType.Tutoring %>">Tutoring </option> 
         <option value="<%# (int)Genius.Models.Enums.RateType.Couching %>">Couching </option> 
        </select> 
       </td> 
      </tr> 
      <tr> 
       <td></td> 
       <td> 
        <input id="dontCount" type="checkbox" /> 
        Don't Count 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div class="modal-footer"> 
     <a id="btnDoneEdit" href="#" data-dismiss="modal" class="btn btn-success">Done</a> 
    </div> 
</div> 

아약스 포스트

$("#ModelView").modal("show").on("hidden", function (a, b, c) { 

        if (a.target.localName != 'div') 
         return; 

        var d = { 
         id: 0, 
         SubjectId: $("#subjectSelect").val(), 
         ClientId: $("#clientSelect").val(), 
         From: f + " " + $("#from").val(), 
         Till: f + " " + $("#till").val(), 
         DontCount: $("#dontCount").is(":checked"), 
         Type: $("#typeSelect").val(), 
         LessonCounter: $("#SelectLessonCounter").val() 
        } 


        $.ajax({ 
         type: "POST", 
         url: "Api/UpdateTimeTable.ashx", 
         data: JSON.stringify(d), 
         success: function (response, status, xhr) { 
          var ct = xhr.getResponseHeader("content-type") || ""; 
          if (ct.indexOf('json') > -1) { 
           window.location = window.location; 
          } 
          if (ct.indexOf('text') > -1) { 
           alert(response); 
           window.location = window.location; 
          } 
         }, 
         error: function (jqXHR, textStatus, errorThrown) { 
          alert("There seems to be a problem. " + errorThrown); 
         } 
        }); 

       }); 

Answer 1

내가 해결 한 내 모달, 내 jquery 조금 변경하고 지금은 잘 작동합니다.

$("#ModelView").modal("show").on(
    //$(document).on("click", '#btnDoneEdit', function (e) { 
    $('#btnDoneEdit').click(function (e) { 
         // e.preventDefault(); 
         alert("Hi"); 
         //if (a.target.localName != 'div') 
         // return; 

         var d = { 
          id: 0, 
          SubjectId: $("#subjectSelect").val(), 
          ClientId: $("#clientSelect").val(), 
          From: f + " " + $("#from").val(), 
          Till: f + " " + $("#till").val(), 
          DontCount: $("#dontCount").is(":checked"), 
          Type: $("#typeSelect").val(), 
          LessonCounter: $("#SelectLessonCounter").val() 
         } 

         $.ajax({ 
          type: "POST", 
          url: "Api/UpdateTimeTable.ashx", 
          data: JSON.stringify(d), 
          success: function (response, status, xhr) { 
           var ct = xhr.getResponseHeader("content-type") || ""; 
           if (ct.indexOf('json') > -1) { 
            window.location = window.location; 
           } 
           if (ct.indexOf('text') > -1) { 
            alert(response); 
            window.location = window.location; 
           } 
          }, 
          error: function (jqXHR, textStatus, errorThrown) { 
           alert("There seems to be a problem. " + errorThrown); 
          } 
         }); 

        }) 
       ); 

Answer 2

온 ('숨겨진') 이벤트에 아약스 전화를 결합하지만, 제출 버튼의 클릭 이벤트에하지 마십시오.

[업데이트] (I 모달 플러그인을 모르겠지만,이

이

$("#ModelView").modal("show"); 

      /*EDIT*/ 
      $(document).on("click", '#btnDoneEdit', function(e){ 
       e.preventDefault(); 
      /*EDIT end */ 


       var d = { 
        id: 0, 
        SubjectId: $("#subjectSelect").val(), 
        ClientId: $("#clientSelect").val(), 
        From: f + " " + $("#from").val(), 
        Till: f + " " + $("#till").val(), 
        DontCount: $("#dontCount").is(":checked"), 
        Type: $("#typeSelect").val(), 
        LessonCounter: $("#SelectLessonCounter").val() 
       } 


       $.ajax({ 
        type: "POST", 
        url: "Api/UpdateTimeTable.ashx", 
        data: JSON.stringify(d), 
        success: function (response, status, xhr) { 
         var ct = xhr.getResponseHeader("content-type") || ""; 
         if (ct.indexOf('json') > -1) { 
          window.location = window.location; 
         } 
         if (ct.indexOf('text') > -1) { 
          alert(response); 
          window.location = window.location; 
         } 
        $("#ModelView").modal("hide"); 

        }, 
        error: function (jqXHR, textStatus, errorThrown) { 
         alert("There seems to be a problem. " + errorThrown); 
        } 
       }); 


      }); 

Answer 3

그럼 당신은 아약스 포스트에 대한 자신의 기능을해야이 : 같은 것을해야하며에 바인딩 버튼에서 온 클릭 이벤트 :

<input type="Button" value="Done" onclick="ajaxCall()" /> 

은 ...

function ajaxCall() 
{ 
$.ajax({...)}; 
}