rebonsoir !
jai un formulaire dont je veux inserer les données dans une BD
Jutilise laravel et je suis debutant la dessus
je voudrais inserer mes données dans la BD en utilisat jquery:
Mon probleme est que quand je renseigne toutes les données dans mon formulaire et que je soumet, le formulaire qui est dans une fenetre modal reste static et ne fais aucune action
pour arriver a cela, voici

mon formulaire que je lance dans une fenetre modal

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Tableau de bord</div>

                <div class="panel-body">
                    @if (session('status'))
                        <div class="alert alert-success">
                            {{ session('status') }}
                        </div>
                    @endif
<!-- Styles -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="{{ asset('css/ccibf_css.css') }}" rel="stylesheet">

    <div id="centralacc">
<div id="menu">
    <!--fin du menu-->
</div>
 <div id="titre_milieu_accueil">
<div class="modal fade" id="tab_onglet_action" role="dialog">
    <div class="modal-dialog" style="width: 700px;">

      <!-- Modal content-->
      <div class="modal-content">

        <div class="OngletTab" style="width:auto; padding: 20px; padding-right: 25px;">
  <h2>Exécuter une tâche sur ce numero</h2>
  <h2 id="numeroactuel"></h2>
  <input type="hidden" name="identifiants" id="identifiants">
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home"><span class="glyphicon glyphicon-envelope"></span>&nbsp;Sms</a></li>
    <li><a data-toggle="tab" href="#menu1"><span class="glyphicon glyphicon-tags"></span>&nbsp;Joindre une note</a></li>
    <li><a data-toggle="tab" href="#menu2"><span class="glyphicon glyphicon-paperclip"></span>&nbsp;E-mail</a></li>
    <li><a data-toggle="tab" href="#menu3"><span class="glyphicon glyphicon-retweet"></span> &nbsp;Classer</a></li>
    <li><a data-toggle="tab" href="#menu4"><span class="glyphicon glyphicon-film"></span> &nbsp;Ecouter</a></li>
    <li><a data-toggle="tab" href="#menu5"><span class="glyphicon glyphicon-trash"></span> &nbsp;Archiver</a></li>
  </ul>

  <div class="tab-content">

    <div id="menu1" class="tab-pane fade">

          <div class="modal-header">
            <label for="textarea_sms"><h4 class="modal-title"><span class="glyphicon glyphicon-tags"></span>&nbsp;&nbsp;Joindre une note</h4></label>
          </div>
          <div class="modal-body">

              <form data-toggle="validator" action="{{ route('CreationNote.store') }}" method="POST">
                {{ csrf_field() }}
                <div class="form-group">
              <textarea id="textarea_sms" placeholder="Saisir un sms pour l'appelant..." class="form-control" name="textarea_sms" cols="38" rows="9" data-error="Saisir une note." required ></textarea>
              <div class="help-block with-errors"></div>
            </div>
            <div class="form-group">
            <div class="modal-footer">
              <button type="submit" class="btn crud-note-submit btn-success">Valider</button>
              <input type="reset" value="Quitter" class="btn btn-default" data-dismiss="modal">
            </div>
            </div>
              </form>
          </div>

    </div>

  </div>
</div>

      </div>

    </div>
  </div>

    </div>
 <!-- Scripts -->
    <script src="{{ asset('js/bootstrap.js') }}"></script>
  <script src="js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="{{ asset('js/XHR.js') }}"></script>
    <script src="{{ asset('js/UpdateFichierJsonAndBD.js') }}"></script>
    <script src="{{ asset('js/DoPostCallQueue.js') }}"></script>
    <script src="{{ asset('js/UpdateCallCurrent.js') }}"></script>
    <script src="{{ asset('js/UpdateCallQueueIntoView.js') }}"></script>
    <script src="{{ asset('js/UpdateCallHistoriqueJourintoInterface.js') }}"></script>
    <script src="{{ asset('js/UpdateAllProcess.js') }}"></script>
    <script src="{{ asset('js/fonction.js') }}"></script>
 </div>
 <div id="clear"> </div>
 </div>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection

au clique du bouton submit, voici le script du fichier js qui controle et envoi mes donnée au controlleur pour insertion:

$(".crud-note-submit").click(function(e){
        e.preventDefault();
        var form_action = $("#menu2").find("form").attr("action");
        var textarea_sms = $("#menu2").find("input[name='textarea_sms']").val();
        var identifiants_appel = $('.OngletTab').find("input[name='identifiants']").val();
        var tableau_identifiants_appel = identifiants_appel.split(';');

        $.ajax({
            dataType: 'json',
            type:'POST',
            url: form_action,
            data:{idappeltache:tableau_identifiants_appel[0], uniqueidappeltache:tableau_identifiants_appel[1], calleridnumbertache:tableau_identifiants_appel[2], tache:textarea_sms, typetache:note}
        }).done(function(data){
            alert(data)
            $(".modal").modal('hide');
            toastr.success('Notes ajouté avec success.', 'Success Alert', {timeOut: 5000});
        });

    });

et voici ma route:

Route::resource('CreationNote', 'TacheControlleur');

mon controller:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Tache;

class TacheControlleur extends Controller
{
    //
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        //
        print_r("expression");
    }
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $create = Tache::create($request->all());
        return response()->json($create);
        //print_r($request->all());
    }
}

J'ai essayer etape par etape de controler les données soumise dans le fichier js et je remarque que j'ai toutes mes données!
en placant une alert apres chaque variable je constate que toutes les données sont là.
Jai aussi verifier mon controlleur en l'appelant directement dans l'url et je vois aucune erreur!

Je sais pas maintenant qu'es ce qui peut faire que le submit n'a pas d'effet ?
si quelqu'un trouve une anomalie dans mon code ?

3 réponses


Lartak
Réponse acceptée

Bonjour.
Comment peux-tu dire que le submit n'a pas d'effet, alors que tu dis juste avant que ton controlleur reçoit bien les données ?
C'est bien que la requête ajax est effectuée et ce ne serait pas le cas si le submit n'avait aucun effet.
Ton problème à mon avis, doit être dû au token CSRF, car tu l'ajoutes dans ton formulaire, mais il ne figure pas dans le tableau des données que tu envoies dans ta requête ajax.

Bon enfaite, autant pour moi! faire comprendre son probleme aussi est une autre chose !
bref, donc le submit a un effet !
le token CRSF, j'ai lest oublier dans la copier des données, sinon j'ai bien une ligne token crsf que je place ainsi dans mon fichier js:

$.ajaxSetup({
        headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
    });
    $(".crud-note-submit").click(function(e){
        e.preventDefault();
        var form_action = $("#menu2").find("form").attr("action");
        var textarea_sms = $("#menu2").find("input[name='textarea_sms']").val();
        var identifiants_appel = $('.OngletTab').find("input[name='identifiants']").val();
        var tableau_identifiants_appel = identifiants_appel.split(';');
        $.ajax({
            dataType: 'json',
            type:'POST',
            url: form_action,
            data:{idappeltache:tableau_identifiants_appel[0], uniqueidappeltache:tableau_identifiants_appel[1], calleridnumbertache:tableau_identifiants_appel[2], tache:textarea_sms, typetache:note}
        }).done(function(data){
            alert(data)
            $(".modal").modal('hide');
            toastr.success('Notes ajouté avec success.', 'Success Alert', {timeOut: 5000});
        });

    });

Ou comment devrais-je le placer pour essayer ?

Bonjour !
Finalement j'ai trouver la solution!
comme le disait @LARTAK, mon probleme etait effectivement lié au token CRSF !!!
Mais, ca ne fonctionnait pas a premier coup peut etre cetais lié a un probleme de cache!
sinon apres plusieur debug et plusieur essai etape par etape et en fonction du type d'erreur que cela affichait(419 unknow status), c'etait forcement lié au token
Merci !