Requête ajax pour dupliquer un élément existant dans un formulaire

Par Anju, il y a 9 ans

Javascript

Bonjour à tous !

Voilà, je suis une grande débutante en ajax, et j'aurais besoin d'aide pour une petite fonctionnalité.

J'ai un formulaire d'ajout de demandes, et sur ce formulaire j'ai un bouton qui permet de dupliquer une demande existante. Donc quand je clique, une pop-in s'ouvre avec une liste déroulante contenant toutes les demandes existantes. Quand j'en choisis une et que je clique sur ok, la pop-in doit se fermer et le formulaire doit être pré-rempli avec les données de la demande choisie.

Voilà ce que j'ai fais pour le moment, je précise que je code sous CakePHP3 :

La pop-in :

<?php echo $this->Form->input('demandes', ['options' => $listeDemandes, 'empty' => 'Sélectionnez une demande à dupliquer', 'label' => false]); ?> <a href="#!" type="button" class=" modal-action modal-close waves-effect waves-green btn" id="dupli" onclick="duplicate();">Ok</a>

La fonction js duplicate():

`
function duplicate(){
var id = $('#demandes').val();
console.log(id);

$.ajax({
    url: "/Intranet/demande-evolution/demandes/duplicate"+id,
    data: {
        id: id
    },
    dataType: 'json',
    type: 'get',
    success: function(json) 
    {
        console.log('success');
        console.log(json.demande);
    },
    error:function(jqXHR, textStatus, errorThrown)
    {
        console.log('erreur');
    }
});

}
`

Et la fonction php vers laquelle elle renvoie:

public function duplicate() { $demande_id = $this->request->data['demandes']; $demande = $this->Demandes->find()->where(['id' => $demande_id])->first(); debug($demande); header('Content-Type: application/json'); json_encode($demande); $this->set(compact('demande')); $this->set('_serialize', ['demande']); }

Pour le moment, j'arrive à récupérer l'id de la demande choisie dans la liste déroulante en JS.
Mais j'ai une erreur GET : GET http://localhost/Intranet/demande-evolution/demandes/duplicate1?id=1 404 (Not Found)

J'avoue que je ne sais pas trop comment faire... Et j'ai plus l'impression de me mélanger les pinceaux et de m'embrouiller... Donc si quelqu'un pouvait m'aider ce serait vraiment gentil ^^'

Merci par avance pour votre aide !

Ju'

8 réponses

Kaelyscius, il y a 9 ans

Hello !

Essaye de remplacer ton type:GET par type: "POST". Le type get est plutôt utilisé pour recevoir une réponse, et le post pour envoyer un élément.

Après je connais pas cake3 pour connaitre la logique du passage d'information. Mais essaye déjà ça.

Ensuite ton url si c'est pas une page que tu souhaite atteindre, je pense que tu n'as pas besoin de lui passer l'id vu que tu veux atteindre une méthode. (Si je comprend bien ce que tu veux faire) Tu as tes datas envoyés en ajax que tu dois récupérer en php.

E-Bismuth, il y a 9 ans

Bonjour,
Est tu sur que ton URL fini par duplicate1?id=1 ? Elle ne devrait pas plutôt etre du style duplicate?id=1

Au cas si oui à la fin de l'url définit dans l'ajax enleve le +id

Anju, il y a 9 ans

@Kaelyscius
Alors, j'ai remplacé par POST, mais ça me renvoie une erreur post aussi.
En fait, ce qu'il faudrait que je fasse (si je me trompe pas dans ma logique), c'est récupérer l'id de la demande en JS, et l'envoyer à ma méthode php, pour récupérer toutes les données de la demande dans la base de données, pour ensuite les réutiliser en ajax, pour pré-remplir mon formulaire...
Enfin je crois...

@E-Bismuth
J'ai retiré le id, mais ça me fait toujours une erreur get :/

Anju, il y a 9 ans

Oui, c'est ce que j'ai dis dans mon post :p

Oui je l'ai bien définie :/

Mais du coup je sais pas si je dois faire en GET ou en POST xD On me dit des choses différentes xD

Kaelyscius, il y a 9 ans

SI je comprend ce que tu veux faire, tu envoie un ID à ton serveur et lui s'occupe de faire la dupplication?

Le type de requête HTTP (GET / POST) ici, est de type POST. Car tu veux envoyer une donnée à ton serveur. Le GET est utilisé pour faire une demande et recevoir une réponse de ton serveur.

Quel erreur as tu en changeant en POST?

Edit : d'ailleurs, avec jquery tu n'es pas obligé de signifier un type:GET car par défaut une requête HTTP est en get ^^

Defy, il y a 9 ans

peut etre que en faisant un console.log de errorThrow tu aura plus de detail

Anju, il y a 9 ans

Je reviens par ici, j'avais laissé un peu cette fonction de côté ^^'
J'ai un peu d'amélioration.

J'ai réussi à ne plus avoir d'erreur qui s'affiche, mais par contre j'entre toujours dans le error de la requête ajax...
Je remets mon code :

Côté serveur :

public function duplicate() { $demande_id = $this->request->data['demandes']; $d = $this->Demandes->find()->where(['id' => $demande_id])->first(); $dem = array(); $dem = Hash::insert($dem, 1, [$d->id, $d->name]); header('Content-Type: application/json'); json_encode($dem); $this->set(compact('dem')); $this->set('_serialize', ['dem']); }

Côté client:

function duplicate(){ var id = $('#demandes').val(); $.ajax({ url: "/Intranet/demande-evolution/demandes/duplicate", data: { demande_id: id }, dataType: 'json', type: 'post', success: function(json) { console.log(json.dem); console.log('success'); console.log(id); }, error:function(jqXHR, textStatus, errorThrown) { console.log(id); console.log('erreur'); } }); }

Donc à ce niveau là, j'ai le 'erreur' qui s'affiche dans ma console, mais je ne sais pas pourquoi, ni comment savoir pourquoi... ^^'

cid5420, il y a 9 ans

tu as fait un var_dump de $dem?

Moi quand je passe une variable en ajax, je recupere $_GET['id'] dans le script php !
Là dans ton code je ne vois pas de get ou post donc comment te sers tu de la variable qui est envoyé ?
exemple :

id = input.val(); $.ajax({ url: "?p=controleur.action", data: 'id='+ id, // on envoie $_GET['id'] dataType: 'json', success: function(json) { json.forEach(function(p/*, index */){ body.append(p); }) }, error: function(json){ console.log(json); } });