Bonjour,

j'essaye de suivre un tuto sur laravel

il y'a une page ou l'ont peut ajouter des catégories dans une table mysql en utilisant un envoi via ajax
j'ajoute que je sais comment insérer, lire ou modifier des données en utilisant juste le php de laravel
mais là c'est un passage du tuto avec utilisation d'un script javascript.

hors j'ai ces erreur suivante dans la console chrome :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
"categories.js:19 Uncaught TypeError: Cannot read property 'length' of undefined
    at HTMLButtonElement.createNewCategory (categories.js:19)
createNewCategory @ categories.js:19 "
cette ligne 19 correspond à un test if ( en gras dans le code qui suit )

pour voir quant je supprime ce test j'ai un message suivant

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
categories.js:67 POST http://laravel-blog/admin/blog/category/create 422 (Unprocessable Entity)
ajax @ categories.js:67
createNewCategory @ categories.js:24
la route concernée

Code : Sélectionner tout - Visualiser dans une fenêtre à part
Route::post('/blog/category/create','CategoryController@postCreateCategory')->name('admin.blog.category.create');
le contrôleur

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
 
    namespace App\Http\Controllers;
 
    use Illuminate\Http\Request;
    use App\Category;
    use Illuminate\Support\Facades\Response;
 
    class CategoryController extends Controller {
        public function getCategoryIndex() {
            $categories = Category::orderBy('created_at', 'desc')->paginate(5);
 
            return view('admin.blog.categories', ['categories' => $categories]);
        }
 
    public function postCreateCategory(Request $request) {
        $this->validate($request, [
            'name'  => 'required|unique:categories'    
        ]);
 
        $category       = new Category();
        $category->name = $request['name'];
 
        if($category->save()) {
            return Response::json(['message' => 'Category created.'], 200);
        }
 
        return Response::json(['message' => 'Error during creation.'], 404);
    }
    }
la page blade

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
@extends('layouts.admin-master') 
@section('styles')
<link rel="stylesheet" href="{{URL::secure('css/categories.css')}}"
@endsection
 
@section( 'content') 
 
<form action="" method="post">
        <div class="row small-up-1 medium-up-2 large-up-2 textquote">
                <div class="column  ">
 
        <label for="name">Category Name
                <input type="hidden" name="_token" value="{{ csrf_token() }}">    
            <input type="text" id="name" name="name"/>
          </label>
        <button type="submit" class="btn">Create Category</button>
    </div>
 
</div>
</form>
 
<div class="row small-up-1 medium-up-2 large-up-2 textquote">
        <div class="column  ">
        @foreach ($categories as $category)
        <article>
            <div class="callout" data-id="{{$category->id}}">
                <h3>{{$category->name}}</h3> 
 
                <nav >
                    <ul class="menu">
 
 
 
                        <li><a href="#">Edit</a></li>
                        <li><a href="#" class="colorrouge ">Delete</a></li>
                    </ul>
                </nav>
            </div>
            @endforeach
        </article> 
    </div>
</div>
 
 
 
<div class="row small-up-1 medium-up-2 large-up-2 textquote">
            <div class="column  text-center">
                @if ($categories->lastPage()>1)
                <section class="pagination">
                    @if ($categories->currentPage()!==1)
                    <a href="{{$categories->previousPageUrl()}}"><i class="fi-previous"></i> Previous</a> @endif @if ($categories->currentPage()!==$categories->lastPage())
                    <a href="{{$categories->nextPageUrl()}}"><i class="fi-next"></i> Next</a> @endif
                </section>
                @endif
            </div>
        </div>
 
@endsection
 
@section( 'scripts') 
<script type="text/javascript">
var token = "{{Session::token()}}"
</script>
le js

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
var docReady = setInterval(function() {
    if(document.readyState !== 'complete') {
        return;
    }
 
    clearInterval(docReady);
 
    //...
    document.getElementsByClassName('btn')[0].addEventListener('click',
    createNewCategory);
 
    }, 100);
 
 
 
    function createNewCategory(event) {
    event.preventDefault();    
    var name = event.target.previousElementSibling.value;    
     if(name.length === 0) {
        alert('Please enter a valid category name');        
        return;  
      } 
 
    ajax("POST", "/admin/blog/category/create", "name=" + name, newCategoryCreated, [name]);  
  }
 
        function newCategoryCreated(params, success, responseObj) {
        location.reload();    
    }
 
    function ajax(method, url, params, callback, callbackParams) {
         var http;
 
    if(window.XMLHttpRequest) {
        http = new XMLHttpRequest;
    }
    else {
        http = new ActiveXObject('Microsoft.XMLHttp');
    }
 
    http.onreadystatechange = function() {
        if(http.readyState == XMLHttpRequest.DONE) {
            if(http.status == 200) {
                var obj = JSON.parse(http.responseText);
 
                callback(callbackParams, true, obj);
            }
            else if(http.status == 400) {
                alert('Category could not be saved. Please try again.');
                callback(callbackParams, false);            }
            else  {
                var obj = JSON.parse(http.responseText);                
                if(obj.message) {
                    alert(obj.message);
                }
                else {
                    alert('Please check the name');
                }
            }
        }   
    }
 
    http.open(method,  url, true);
    http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    http.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
   //console.log(token);
    http.send(params + '&_token=' + token);
    }
merci pour toute aide