2016-11-05 4 views
0

모달 대화 상자 폼을 ​​제출할 때 아약스 응답을받을 수 없습니다. 양식이 모달이 아닌 경우 완벽하게 작동합니다.jquery 모달 폼 대화 상자에서 ajax 응답 받기

형태 :

<div id="form2" style="display: none"> 
    <form id="objectInsert" action="element/create" method="POST" enctype="multipart/form-data"> 
     <div class="form-group"> 
      <label for="name">Name</label> 
      <input class="form-control" type="text" name="name" id="name"/> 
     </div> 

     <div class="form-group"> 
      <label for="description">Description</label> 
      <textarea class="form-control" name="description"></textarea> 
     </div> 
    </form> 

다음

내가 콘솔에서 아약스 성공의 일부를 얻을!

$("#objectInsert").submit(function(e) { 
    e.preventDefault(); 
    resetErrors(); 
    var form = this; 
    var url = $(this).attr('action'); 
    var data = new FormData($(this)[0]); 
    $.ajax({ 
     type: 'POST', 
     url: url, 
     data: data, 
     dataType: 'json', 
     cahe:false, 
     processData: false, 
     contentType: false, 
     success: function(resp) { 
      console.log(resp);//Working 
     }, 
     error: function() { 
      console.log('there was a problem checking the fields'); 
     } 
    }); 
}); 

여기 콘솔에서 ajax 오류가 발생합니다! 누군가 내가 잘못하고있는 곳을 말해 줄 수 있습니까?

$("#add_element").click(function(){ 
     $("#form2").dialog({ 
      modal:true, 
      width:400, 
      buttons:{ 
       Send:function(e){ 
        e.preventDefault(); 
        var form = $("#objectInsert"); 
        var url = form.attr('action'); 
        var data = new FormData(form[0]); 
        $.ajax({ 
         type: 'POST', 
         url: url, 
         data: data, 
         dataType: 'json', 
         cahe:false, 
         processData: false, 
         contentType: false, 
         success: function(resp) { 
          console.log(resp);//not working 
         }, 
         error: function(xhr, status, error) { 
          console.log('there was a problem checking the fields'); 
          console.log(xhr); 
          console.log(error); 
         } 
        }); 
        return false; 

       }, 
       Cancel:function(){ 
        $(this).dialog("close"); 
       } 
      } 
     }); 
    }); 

public function create() { 
    try{ 
     $this->form = new Form(); 
     $this->form->post('name'); 
     $this->form->val('isEmpty', 'name'); 
     $this->form->post('description'); 
     $this->form->val('isEmpty', 'description'); 

     $this->form->fetch(); 
     $this->form->submit(); 

     $data = $this->form->get_postData(); 

     $this->model->insert($data); 

     echo json_encode('success'); 
    } catch (Exception $ex) { 
     $errors = $this->form->get_error(); 
     $_SESSION["errors"] = $errors; 
     //This is for ajax requests: 
     if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && 
       strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) 
       == 'xmlhttprequest') { 
      echo json_encode($_SESSION['errors']); 
      exit; 
     } 

     foreach ($_SESSION["errors"] as $errors){ 
      echo $errors; 
      echo '<br/>'; 
     }exit; 
    } 
} 
+2

당신이 콘솔에서 오류의 원인을 확인 했 펑션 블록을 폐쇄하지 않은이 코드를 볼 수있는 컨트롤러? –

+0

오류 처리기에 전달되는 매개 변수를 사용하십시오. ['Function (jqXHR jqXHR, String textStatus, String errorThrown)]] (https://api.jquery.com/jquery.ajax/) – Andreas

+0

감사합니다. 오류 처리기를 추가했습니다. Throw 된 오류는 다음과 같습니다. "SyntaxError : JSON.parse : JSON 데이터 반환 window.JSON.parse (data +" ");" 이것은 console.log (오류)입니다. line – Prosp

답변

-1

당신이

success: function(resp) { 
     console.log(resp);//not working 
     },//This is not closed for success function 
error: function() { 
     console.log('there was a problem checking the fields'); 
     } 
+0

코드에서 누락 된 대괄호가 아닙니다 ... – Andreas

+0

오, 죄송합니다!, 내 눈이 먼저 잡았습니다. :) –

+0

도 쉼표가 필요합니다. – charlietfl

관련 문제