Discussion :

[Zembla]

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

[Zembla]

j'ai forcé la valeur de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var name = event.target.previousElementSibling.value;

avec une valeur bidon (var name="toto")
et il m'envoie bien la valeur de l'input , ça remplie bien ma table et affiche bien la bonne valeur dans la page.
les lignes suivantes posent t'elles problèmes ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('btn').addEventListener('click',createNewCategory);

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var name = event.target.previousElementSibling.value;

mon problème vient que je ne parviens pas a passer la data du button de mon formulaire qui se trouve ici
resources\views\admin\blog\categories.blade.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<button type="submit" id="btn" class="btn">Create Category</button>

au traitement dans mon js qui est ici :
public\js\categories.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
var docReady = setInterval(function(){
    if (document.readyState !== "complete"){
        return;
    }
    clearInterval(docReady);

    document.getElementById('btn').addEventListener('click',createNewCategory);  
    
},100);



function createNewCategory(event) {
    event.preventDefault();
    var name = event.target.previousElementSibling.value;
    // name= "Shadocko";
    if(name.length === 0) {
        alert("Please 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, baseUrl + url, true);
    http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    http.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    http.setRequestHeader('X-CSRF-TOKEN', token);
    http.send(params + "&_token=" + token);
}