CakePHP 3 - AJAX保存問題とUncaught SyntaxError：予期しない識別子

Question

私はテーブル（Food）にデータを保存するモーダルのフォームを持っています。テーブルには、次のフィールドがあります。私は、ページをロードすると

• ID
• カテゴリー
• タイプ

は、私はすぐにUncaught SyntaxError: Unexpected identifier (managefood:393)を取得します。私は、これがどの行を指しているのかを以下のコードでコメントしました。

モーダルを開いてフィールドを埋めても問題ありません。しかし、保存に失敗すると、ページを更新してMySQLをチェックすると、新しいデータは入力されません。私はAJAXのPOSTが失敗した場所を確認する方法が実際にはわかりません（たとえば、フォーム入力の1つが壊れていて、それらのフィールドが必要なので、保存しないと説明しています）。

モデルに問題があったかどうかを確認するだけで、私のモデルもテーブルで焼き直しましたが、修正されませんでした。

以下は、モーダルを開くボタンとスクリプト、フォーム入力によるモーダル自体、およびデータを保存するスクリプトを含むコードです。以下は

$(document).ready(function() { 
 
    $("#newsavebutton").click(function() { 
 
    $.post("<?= $host . $basepath ?>/food/add.json", { 
 
     category: $('#category').val(), 
 
     type: $('#type').val() //line 393 
 
    };); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<button onclick="newFood()" class="btn btn-primary btn-xl page-scroll wow tada">New Food</button> 
 

 
<script> 
 
    function newFood() { 
 
    $('#newfoodModal').modal('show'); 
 
    } 
 
</script> 
 

 
<div class="modal fade" id="newfoodModal" tabindex="-1" role="dialog" aria-labelledby="newfoodLabel" aria-hidden="true"> 
 
    <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> 
 
     <h3 class="modal-title" id="newfoodLabel">New Food</h3> 
 
     <br> 
 
     <div> 
 
      <div class="col-sm-12"> 
 
      <label for="category" id="newCategoryLabel" style="text-align: left">Category</label> 
 
      <select name="category" id="newCategory" onchange="newchangeCategory()" class="form-control"> 
 
           <option value="" disabled selected hidden>Select a category</option> 
 
           <option value="Fruit">Fruit</option> 
 
           <option value="Vegetable">Vegetable</option> 
 
          </select> 
 
      </div> 
 
      <div class="col-sm-12"> 
 
      <label for="type" id="newTypeLabel" style="text-align: left">Type</label> 
 
      <select name="type" id="newType" class="form-control"></select> 
 
      </div> 
 

 
      //this script enables for the second select to change based on the first - if Fruit is chosen as the category for example, only fruit options are shown in the Type select. 
 
      <script type="text/javascript"> 
 
      var typeOptions = {}; 
 
      typeOptions['Fruit'] = [ 
 
       'Apple', 
 
       'Pear', 
 
       'Banana', 
 
       'Plum', 
 
       'Peach' 
 
      ]; 
 
      typeOptions['Vegetable'] = [ 
 
       'Broccoli', 
 
       'Carrot', 
 
       'Pumpkin' 
 
      ]; 
 

 
      function newchangeCategory() { 
 
       var categoryChoice = document.getElementById('newCategory'); 
 
       var typeChoice = document.getElementById('newType'); 
 
       var selectedCategoryChoice = categoryChoice.options[categoryChoice.selectedIndex].value; //line 340 
 
       console.log(selectedCategoryChoice); 
 
       while (typeChoice.options.length) { 
 
       typeChoice.remove(0); 
 
       } 
 
       var typesAvailable = typeOptions[selectedCategoryChoice]; 
 
       if (typesAvailable) { 
 
       var i; 
 
       for (i = 0; i < typesAvailable.length; i++) { 
 
        var type = new Option(typesAvailable[i], typesAvailable[i]); 
 
        typeChoice.options.add(type); 
 
       } 
 
       } 
 
      }; 
 
      </script> 
 
     </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close 
 
        </button> 
 
     <button id="newsavebutton" type="button" class="btn btn-primary" data-dismiss="modal">Save changes 
 
        </button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

また、コントローラの追加機能のためのコードです：

public function add() 
    { 
     $food = $this->Food->newEntity(); 
     if ($this->request->is('post')) { 
      $food = $this->Food->patchEntity($food, $this->request->data); 
      if ($this->Food->save($food)) { 
       $this->Flash->success(__('The food has been saved.')); 

       return $this->redirect(['action' => 'index']); 
      } else { 
       $this->Flash->error(__('The food could not be saved. Please, try again.')); 
      } 
     } 
     $this->set(compact('food')); 
     $this->set('_serialize', ['food']); 
    } 

Answer 1

私の知る限り、これは構文エラーで見るように。次のように あなたのコードは次のとおりです。

$.post("<?= $host . $basepath ?>/food/add.json", { 
    category: $('#category').val() 
    type: $('#type').val() //line 393 
};); 

はtype:プロパティ宣言の前に、ライン392の後に昏睡,を追加してみてください。そのような：問題をエラー処理について

$.post("<?= $host . $basepath ?>/food/add.json", { 
    category: $('#category').val(), //<-- here 
    type: $('#type').val() //line 393 
};); 

：あなたはPOSTリクエスト自体が失敗したか成功したかどうかを確認するために.done()、.fail()と.always()メソッドを使用カナjQuery documentationによります。たとえば、

$.post("<?= $host . $basepath ?>/food/add.json", { 
    category: $('#category').val(), //<-- here 
    type: $('#type').val() //line 393 
}) 
.done(function(data) { 
    console.log(data); 
    alert("success"); 
    }) 
.fail(function(error) { 
    console.log(error); 
    alert("error"); 
}); 

このようにして、POSTが返すものと、erorrが何であるかを確認できます。