Requête Ajax avec Symfony (gridstack)

Mipmo
PHP Symfony
Javascript
PHP

Bonjour à tous,

Je travaille actuellement sur symfony et j'essaie de créer un environnement en gridstack qui pourra être sauvegardé en base de données à la fin.

Je m'explique, j'ai créé mon grid stack dans ma page d'accueil celui-ci fonctionne bien, je peux redimensionner les grids et les bouger.

Ensuite, j'ai créer un fichier js dans lequel je sauvegarde l'emplacement de mes grids. J'ai donc voulu faire une requête ajax pour envoyer mes données dans un controller php. Puis faire une requête de la variable de mes grids pour l'envoyer en base de données.

Mais malheureusement je bloque, je n'arrive pas du tout avec ajax ni avec mon controller php, ça fait un bout de temps que je suis bloquée donc j'aimerais bien avoir un petit coup de main, merci d'avance à tous !

Mon fichier html : 

   <a class="btn btn-primary" data-bind="click: addNewWidget">Ajouter un élément</a>
        <a onClick="saveGrid()" class="btn btn-primary" href="#">Sauvegarder</a>
        <a onClick="loadGrid()" class="btn btn-primary" href="#">Charger</a>
        <a onClick="saveFullGrid()" class="btn btn-primary" href="#">Tout sauvegarder</a>
        <a onClick="loadFullGrid()" class="btn btn-primary" href="#">Tout Charger</a>
        <a onClick="clearGrid()" class="btn btn-primary" href="#">Supprimer</a>

Mon fichier js : 

saveGrid = function(save) {
    delete serializedFull;
    serializedData = grid.save();
    document.querySelector('#saved-data').value = JSON.stringify(serializedData, null, '  ');
}

$.post("DefautController.php", {data:"saveGrid"}, function(save){
   alert(save);
});

// $.ajax({
//     type: "GET",
//     url: "/src/Controller/GridController.php",
//     data: { $saveGrid = saveGrid },
// });
// console.log(saveGrid);

ça doit être surement très simple mais je bute énormément, merci encore !

2 réponses

gillesr
Réponse acceptée

Bonjour,

c'est dans ta fonction saveGrid qu'il faut faire ton appel ajax.
De plus il ne faut pas appeler le fichier php, mais la route qui correspond à la méthode de ton controleur.

par exemple : 


saveGrid = function(save) {
    delete serializedFull;
    serializedData = grid.save();
    $.post("grid/save", {data:serializedData}, function(save){
       alert(save);
    });
}

Et dans ton controleur symfony : 


/**
 * @Route("/grid/save", methods={"POST"})
*/
public function saveGrid(string $data): Response
{
    ... logique de traitement ...
    return $this->json('Grille sauvegardée');
}
Mipmo
Auteur
Réponse acceptée

Bonjour,

Merci beaucoup Gillesr, finalement j'ai réussi à me dépatouiller !

J'arrive à transmettre les emplacement des grids et les afficher :

Fichier .JS : 

saveGrid = function () {
    delete serializedFull;
    serializedData = grid.save();
    var datasave = document.querySelector('#saved-data').value = JSON.stringify(serializedData, null, '  ');
    datasave = {
        "value": JSON.stringify(datasave)
    };

    $.ajax({
        type: "post",
        url: "GridRegister.php",
        data: datasave,
    });
}

Fichier php : 

$var = json_decode( $_POST["value"]);

//echo "salut";
//echo $var;

echo $var;
//echo sizeof($var);

//for($i =0; $i < 3; $i++){
//    echo "fraise";
//    echo $var[$i]->x;
//}

foreach($var as $element){
//    echo "fraise";
    echo $element.",";
}

Maitenant avec mon foreach j'essaie d'entrer les données en base ^^