2014-09-30 18 views
1

나는이 문제에 대한 해결책을 찾기 위해 잠시 동안 해왔지만 아무것도 작동하지 않는 것 같습니다 ... 저는 부트 스트랩에서 모달 안에 폼을 가지고 있습니다. 양식을 제출하십시오. 제출시 간단히 다른 페이지로 이동합니다. 부트 스트랩 모달 마감일 :

그러나 검증이 실패했을 경우, 내가 원하는 것은 하지에 가까운 모달위한이 양식은 (이미 자리에) 제출하지 않으며, 그때는 양식 필드에 일부 JQuery와 - UI 효과를 가지고있다. 내가 좋아하는 일을 시도했다 :
$('#modalDiv').modal('show'); 

유효성 검사가 false를 반환 또는 모달의 hide.bs.modal 이벤트하지만 그냥 가발, 멀리가는 것을 추가하고, 장소에 배경 나뭇잎

... ?

부트 스트랩과 jquery-ui간에 어떤 종류의 충돌이있을 수 있습니까? 양식 제출시 모달 닫기를 사용하지 않는 간단한 방법이 없다는 것에 놀랐지 만, 나는 그 토론에 들어갈 첫 번째 것이 아니라고 생각합니다. 어떤 제안 ??

+1

http://www.bootply.com/it2sNCJpqH – Christina

+0

이 매우 중요하지만, 나는받지 못했습니다 무엇 그 중 일부는 실제로 닫는 팝업을 멈추고 있습니다 - 사용중인 유효성 검사 플러그인입니까? – Meowts

+0

혹시 이것을 알아 냈습니까? 그렇다면 어쩌면 나에게 대답을 해줄 수 있을까? http://stackoverflow.com/questions/31037565/form-within-bootsrtap-modal-closes-the-model-on-submit –

답변

1

저는 오랫동안 해결책을 찾고있었습니다. 나는 다음의 "해결책"을 생각해 냈다. 유효성 검사를 위해 html 양식 요소와 사용 된 아약스를 제거했습니다.

HTML 코드 :

<div class="modal fade" id="addCategoryModal" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title">Add Category</h4> 
      </div> 
      <div class="modal-body"> 

       <div class="form-group"> 
        <label for="categoryName">Category Name*</label> 
        <input type="text" class="form-control" id="categoryName" placeholder="Category Name"> 
       </div> 
       <div> 
        <button class="submit" id="addCategoryBtn">Submit</button> 
       </div> 

      </div> 
      <div class="modal-footer"> 
      <div id="message-warning" style="display: none;"></div> 
      <div id="message-success" style="display: none;"></div> 
      </div> 
     </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
    </div><!-- /.modal --> 

AJAX 코드 :

$(document).ready(function() { 

/* Add Category*/ 
$('#addCategoryBtn').click(function() { 
     var categoryName = $('#categoryName').val(); 

     if (categoryName == "") { 
       $('#message-warning').html("Please add Category"); 
       $('#message-warning').fadeIn(); 
     } 
     else{ 

     var data = 'categoryName=' + categoryName; 
     $.ajax({ 
      type: "POST", 
      url: "insert.php", 
      data: data, 
      success: function(msg) { 

      // Category was added 
      if (msg == 'OK') { 
       $('#message-warning').hide(); 
       $('#categoryName').val(""); 
       $('#message-success').html("Category Added"); 
       $('#message-success').fadeIn(); 
      } 
      // There was an error 
      else { 
       $('#message-warning').html(msg); 
       $('#message-warning').fadeIn(); 
      } 

      } 

     }); 
    } 
});//End Add Category 


});//End Document Ready Function 
+0

공유해 주셔서 감사합니다.이 사례는 정확하게 기억하기에는 너무 오래 전이었습니다. 나는 코드를 더 이상 가지고 있지 않다. 그러나 이것이 도움이되기를 바란다! – Meowts