CakePHP 3 - AJAX-Speicherproblem und Uncaught SyntaxError: Unerwarteter Bezeichner

Question

Ich habe ein Formular in einem Modal, das Daten in einer Tabelle (Essen) speichert. Die Tabelle hat folgende Felder:

• ID
• Kategorie
• Typ

Wenn ich die Seite zu laden, ich sofort eine Uncaught SyntaxError: Unexpected identifier (managefood:393) bekommen; Ich habe in dem Code, auf den sich diese Zeile bezieht, kommentiert.

Das Modal öffnen und die Felder ausfüllen funktioniert gut. Das Speichern funktioniert jedoch nicht, beim Aktualisieren der Seite und Überprüfen von MySQL wurden keine neuen Daten eingegeben. Ich bin nicht wirklich sicher, wie man überprüft, wo mein AJAX-POST fehlgeschlagen ist (zum Beispiel, wenn eine der Formulareingaben gebrochen ist, und da diese Felder erforderlich sind, würde das erklären, dass es nicht speichert).

Ich Kuchen backte mein Modell auch für den Tisch, nur um zu überprüfen, ob es ein Problem im Modell gab, aber das hat es nicht behoben.

Unten ist der Code, der die Schaltfläche und das Skript enthält, das das Modal öffnet, das Modal selbst mit den Formulareingaben und das Skript, das die Daten speichert.

$(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>

Unten ist auch der Code für die Add-Funktion im Controller:

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

Soweit ich sehe dies ein Syntaxfehler ist. Ihr Code lautet wie folgt:

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

Versuchen Hinzufügen ein Koma , nach Linie 392, vor der type: Eigenschaft Erklärung. Wie so:

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

In Bezug auf die Fehler Problem der Handhabung: Nach dem jQuery documentation Sie cana verwenden, um die .done(), .fail() und .always() Methoden, um zu sehen, ob der POST-Anforderung selbst ausfällt oder erfolgreich ist. Zum Beispiel:

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

Auf diese Weise können Sie was die Post zurückkehrt sehen und was die erorr ist (falls vorhanden).