Cakephp et javascript

Bonjour Ferias Quarante !
Merci beaucoup pour tes réponses :)

Voici mes retours :
Pour le bouton update, ça fonctionne bien, tous les boutons fonctionnent. Néanmoins, lorsque je clique sur un bouton, une fenêtre "bonjour" s'ouvre bien, mais quand je clique sur ok, une autre s'ouvre (au total 9 fois, ce qui représente le nombre de lignes dans le tableau).

Pour les inputs :

• Première solution :
  Lorsque je clique sur n'importe quel bouton, tous les username se transforment en input vide. Comme je souhaiterai que seul l'username de la ligne se modifie, ne faut-il pas que j'utilise l'id du tr ? :o Et dans ce cas comment ? Et pourquoi les input sont-ils vides alors que si je comprends bien le code JS que tu m'as montré, on fait appel au contenu du champ ?

• Deuxième solution :
  Peu importe le bouton sur lequel je clique, l'username de la première ligne disparait totalement, sans se transformer en input :(

En réfléchissant, la première solution a quand même l'air plus simple, non ? Si j'utilise des input cachés, cela ne risque-t-il pas de surcharger mon code ? :o

Encore merci pour ton aide !

Ju'

Ah oui ça fonctionne bien là ^^ Merci !

Pour l'input sans valeur, j'avais juste bêtement oublié les "égal" derrière les value... ^^' Donc ça fonctionne bien là !
Par contre, mes deux derniers champs sont des select, et reste vides. Comment faire pour que la liste déroulante se remplisse avec toutes mes options, mais que le select reste sur l'option qui concerne l'utilisateur ?

De plus, je voudrais qu'en plus des champs qui se transforment, je souhaiterai que les boutons de fin de ligne changent également. Il faut le faire sur le même principe que pour les input ? Sachant qu'il faut aussi charger de nouvelles images :o

Désolée de t'embêter ^^'

EDIT :
Pour la modification des boutons du coup je suis partie sur le même principe.

// Dans le javascript
var button_update = row.find('button.user-update');
var button_delete = row.find('button.user-delete');
button_update.html('<button class="user-save"><img src="/Intranet/img/save.gif" /></button>');
button_delete.html('<button class="user-retour"><img src="/Intranet/img/retour.gif" /></button>');

// Dans le tableau
<td class="actions">
                <span>
                    <button class="user-update"><img src="/Intranet/img/update.gif" /></button>
                                        <?php /*echo $this->Html->link(
                                        $this->Html->image('update.gif', array('alt' =>'Modifier', 'class' => 'user-update')),
                                        array('controller' => 'users', 'action' => 'edit', $user->id),
                                        array('escape' => false))*/ ?>
                 </span>
                <span>
                    <?= $this->Form->postLink(
                        $this->Html->image('delete.png', array('alt' => 'Supprimer', 'class' => 'user-delete')),
                        array('controller' => 'users', 'action' => 'delete', $user->id), 
                        $options = ['confirm' => __('Etes-vous sûr de vouloir supprimer l\'utilisateur {0} {1}?', $user->first_name, $user->name), 'escape' => false]);
                    ?>
                </span>

</td>

Toutefois, le bouton delete qui devrait devenir le bouton retour, ne change pas... Je suppose que c'est à cause de ma syntaxe, puisque la seule différence avec l'autre bouton, c'est que le bouton delete est écrit en php. Peut-être que j'intègre mal la classe ?

De même comment faire pour que mon bouton save (qui remplace l'update), soit lié à mon controller "user" et mon action "edit" ?

Pour les boutons se serait plus simple de créer les 4 boutons (update, save, delete et back) et de cacher par défault save et back ; quand tu cliques tu updates tu affiches les input et tu masques update et delete et tu affiches save et back.
Quand tu cliques sur back tu reviens de base (sans les inputs), quand tu cliques sur save tu sauvegardes le tout en ajax et tu reviens aussi de base (sans les inputs).

Pour les select, ce que tu peux faire c'est créer le select que tu veux de base avant le tableau et le cacher, comme ça au lieu de créer le code dans le JS tu prend l'élément cacher et tu l'ajoute au td correspondant.
Sinon la soltuion 2 (qui surcharge le code html certes) aurait était plus simple, avec pour chaque td par exemple

<td class="username">
    <span class="value">XXX</span>
    <span class="input">le code de l'input ou du select</span>
</td>

Comme ca tu n'aurais qu' afficher ou masquer tel ou tel élément selon si tu édite ou pas, le code JS serait plus "lite" et lisible.

Après tout cela n'est pas propre à Cake mais plutôt au JS, tu devrait pulbier dans le forum JS

J'ai donc rajouté 4 boutons comme tu me l'as conseillé. Bon, après ce sont des problèmes de JS que j'ai, donc je vais pas t'embêter avec ça ^^'

Par contre, je pense que j'ai quand même un problème côté CakePHP.
En effet, mon bouton delete est écrit en PHP :

<?= $this->Form->postLink(
                        $this->Html->image('delete.png', array('alt' => 'Supprimer', 'class' => 'user-delete')),
                        array('controller' => 'users', 'action' => 'delete', $user->id), 
                        $options = ['confirm' => __('Etes-vous sûr de vouloir supprimer l\'utilisateur {0} {1}?', $user->first_name, $user->name), 'escape' => false]);
                    ?>

Le problème c'est que du coup, la classe se met sur l'image, alors que moi j'ai besoin d'avoir un bouton avec une classe. En fait, il faudrait que mon icône delete soit écrit de la même façon que le bouton "update" :

<button class="user-update"><img src="/Intranet/img/update.gif" /></button>

Mais je n'arrive pas à faire l'équivalence en HTML... Comme il fait appel à un controller, je ne comprends pas comment faire :(

C'est normal qu'il te mette la classe sur l'image et pas sur le bouton vu que c'est ce que tu as écris ... :)

<?= $this->Form->postLink($this->Html->image('delete.png', array('alt' => 'Supprimer')),
                          array('controller' => 'users', 'action' => 'delete', $user->id), 
                          ['class' => 'user-delete', 'confirm' => __('Etes-vous sûr de vouloir supprimer l\'utilisateur {0} {1}?', $user->first_name, $user->name), 'escape' => false]);
?>

Effectivement... ^^'
Mais du coup, dans mon code JS, faut que je mette la classe hide sur le "a" et non sur "button" pour que ça fonctionne !

Bon, maintenant mes autres boutons ne s'affichent pas, et faut que je trouve le moyen de sauvegarder tout ça...

Le fait de sauvegarder ce serait plutôt du CakePHP, non?
Parce que j'ai ma fonction edit dans mon UsersController, mais comment la lier au bouton save ?

Ma fonction edit :

 public function edit($id = null)
    {
        $user = $this->Users->get($id, [
            'contain' => []
        ]);
        if ($this->request->is(['patch', 'post', 'put'])) {
            $user = $this->Users->patchEntity($user, $this->request->data);
            if ($this->Users->save($user)) {
                $this->Flash->success(__('L\'utilisateur a bien été sauvegardé.'));
                return $this->redirect(['action' => 'index']);
            } else {
                $this->Flash->error(__('L\'utilisateur n\'a pas été sauvegardé. Veuillez réessayer.'));
            }
        }
        $profiles = $this->Users->Profiles->find('list', ['limit' => 200]);
        $this->set(compact('user', 'profiles'));
        $this->set('_serialize', ['user']);
    }

Poour la sauvegarde tu peux par exemple sur le bouton save ajoute dans les options

[
    'data-url' => $this->Url->Build(['controller' => 'Users', 'action' => 'edit', $user->id])
]

Et dans ton JS tu fais un appel ajax, en tutilisant jquery ca fait qqe chose comme ca

$('.bouton-save').click(function(e) {
    e.preventDefault();
    var url = $(this).data('url');
    $.post({
        url : url,
        // liste des parametres 
    });
});

Donc du coup j'ai modifié mon bouton "save", ce qui donne ceci :

<?= $this->Form->postLink(
                        $this->Html->image('save.gif', array('alt' => 'Save')),
                        ['data-url' => $this->Url->Build(['controller' => 'users', 'action' => 'edit', $user->id])],
                        ['class' => 'user-save hide', 'escape' => false])  ?>

Du coup, y'a bien une action sur mon bouton, quand je clique dessus, il semble bien valider. Toutefois, la modification ne s'enregistre pas encore !
Pour l'ajax, je ne vois pas quoi mettre dans la liste de paramètre. Après quelques recherches, j'ai fais quelque chose comme ça, mais j'ai de forts doutes sur la justesse du truc ^^' :

$('.user-save').click(function(e) {
        e.preventDefault();
        var url = $(this).data('url');
        $.post({
            url : url,
            data: data,
              success: success,
              dataType: dataType
        });
    });

Je ne sias pas commetntu fais tes recherches mais le pramètre data doit contenir tout les champs et valeurs comme pour un formulaire, qqe chose comme çà. Après côté controller, il faut que seriazlize le retour de la vue, il y a des exemples sur ce forum et sur internet

$('.user-save').click(function(e) {
        e.preventDefault();
        var url = $(this).data('url');
        var row = $(this)..parents('tr');
        $.post({
            url : url,
            data: { 
                username: row.find('td.username').find('input').val(), 
                name : ...
                // etc pour chaque champs
             }
        }).done(function(data) {
            // mettre les valeurs des inputs dans les champs valeurs et cacher les inputs
        }).fail(function(data) {
            // afficher un message
        });
    });