Erreur Cannot read property 'length' , Ajax Laravel
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:
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:
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:
Route::post('/blog/category/create','CategoryController@postCreateCategory')->name('admin.blog.category.create');
le contrôleur
Code:
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:
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:
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
