2013-06-12 65 views
0

我有一個模式,將提交點擊後,將做ajax後,但現在我想有一個選擇來關閉模式,但只要我點擊'關閉'它仍然做阿賈克斯職位。點擊「關閉」按鈕後,我不想做ajax帖子。我不知道如何處理這種情況。Ajax POST火災當關閉按鈕點擊模態

莫代爾

<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); 
         } 
        }); 

       }); 
+0

指向特定模式插件的鏈接將會很有用。 –

回答

0

我有固定的我模式,我改變了我的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); 
          } 
         }); 

        }) 
       ); 
2

不結合AJAX調用上( '隱藏')事件,但對提交按鈕的單擊事件。

[更新] (我不知道的模態插件,但它應該是這樣的:)

$("#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); 
        } 
       }); 


      }); 
+0

或者將它綁定到 –

+0

你能舉個例子嗎?我仍然是這個新手 – Gericke

+0

剛剛再次通過代碼,它是假設綁定('隱藏')。該事件將顯示模式,但現在如果我點擊關閉模式,它不應該做ajax後,當我點擊'完成'它應該做ajax後。 – Gericke

0

那麼你應該做一個自己的功能,爲Ajax後,並將其綁定到從按鈕onclick事件:

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

...

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