Zend FR

samspitz · 16-05-2010 16:37:01

Bonjour à tous,

Je souhaite obtenir votre aide, afin de réussir un casse tête, certainement super simple pour vous.
Je mis en place un Drag&Drop jquery-ui qui me permet de droppé plusieurs éléments, je souhaiterais à chaque Drop insérer en base de donnée, mon problème est comment passer en paramétre dans ajax url Zend et comment recupéré dans mon controller les actions passer en ajax et comment enregistré en base de donnée.

Avant de venir sur ce site afin d'obtenir de l'aide sur ce casse tête, j'ai tenté e réussir tout seul comme un grand donc voici mes débuts :

ma partie ajax avec jquery :
Code :

Code:

$(function() {
            // there's the gallery and the trash
            var $gallery = $('#gallery'), $trash = $('#trash');
            
            
            // let the gallery items be draggable
            $('.slot',$gallery).draggable({
                cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
                revert: 'invalid', // when not dropped, the item will revert back to its initial position
                containment: $('#slot').length ? '#slotbase' : 'document', // stick to demo-frame if present
                helper: 'clone',
                cursor: 'move',
                
            });
            // let the trash be droppable, accepting the gallery items
            $arm.droppable({
                accept: '#gallery  .slot',
                activeClass: 'ui-state-highlight',
                drop: function(ev, ui) {
                    deleteImage(ui.draggable);
                }
                            $.ajax({
            type:"POST",
            url: "<?php $this->baseUrl('/index/index')?>",
            // j'en sais rien comment faire
            
            )}
            });
            // let the trash be droppable, accepting the gallery items
            // let the gallery be droppable as well, accepting items from the trash
            $gallery.droppable({
                accept: '#trash  .slot',
                activeClass: 'custom-state-active',
                drop: function(ev, ui) {
                    recycleImage(ui.draggable);
                }
            });
            // image deletion function
            var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off" title="Recycle this image" class="ui-icon ui-icon-refresh"></a>';
            function deleteImage($item) {
                $item.fadeOut(function() {
                    var $list = $('.slotbaseCard',$arm).length ? $('.slotbaseCard',$arm) : $('<div class="slotabseCard">').appendTo($arm);
 
                    //$item.find('a.ui-icon-trash').remove();
                    $item.append(recycle_icon).appendTo($list).fadeIn(function() {
                        $item.animate({ width: '30px' }).find('img').animate({ height: '39px' });
                    });
                });
            }
            // image recycle function
            var trash_icon = '<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash"></a>';
            function recycleImage($item) {
                $item.fadeOut(function() {
                    $item.find('a.ui-icon-refresh').remove();
                    $item.css('width','30px').append(trash_icon).find('img').css('height','39px').end().appendTo($gallery).fadeIn();
                });
            }
 
            
            // resolve the icons behavior with event delegation
            $('ul.gallery > li').click(function(ev) {
                var $item = $(this);
                var $target = $(ev.target);
 
                if ($target.is('a.ui-icon-trash')) {
                    deleteImage($item);
                } else if ($target.is('a.ui-icon-zoomin')) {
                    viewLargerImage($target);
                } else if ($target.is('a.ui-icon-refresh')) {
                    recycleImage($item);
                }
 
                return false;
            });
        });

ma partie controller
Code :

Code:

// je ne sais pas comment faire pour récuperer ajax

Merci d'avance de l'aide donc vous pourrez m'apporter.
sam

Wiinner · 21-05-2010 11:42:42

Bon, je vais essayer d'apporter une réponse (c'est la première fois que j'essaye d'aider quelqu'un sur ce forum, alors soit indulgent :p).

Dans ton appel ajax, tu peux lui passer des données en utilisant :

data: { }
Je sais pas exactement ce que tu veux insérer dans ta base, mais supposons que tu veux dire que l'utilisateur à dropper l'objet draggable dans ton objet droppable,
il va falloir que tu passes en paramètre à ton controlleur les identifiants de ces 2 objets

donc tu aurais un truc du style :

data: { drop_id: this.id, drag_id: ui.draggable.id }
(Je sais pas exactement la syntaxe pour récupérer les ID, donc faudra surement adapter

Dans ta partie controlleur, vu que tu fais de l'ajax, déjà il faut mettre :

Code:

$this->_helper->layout->disableLayout(); 
$this->_helper->viewRenderer->setNoRender();

pour dire de pas charger la vue associé à l'action

Ensuite tu dois récupérer les variables postées

Code:

$drop_id = $this->_getParam('drop_id');
$drag_id = $this->_getParam('drag_id');

Puis après, t'as le traitement pour inséré dans ta base de données.
Mais là, je peux pas t'aider plus que çà, vu que t'en as pas dit plus là dessus :p

Voila, j'espère que çà pourra t'aider

nORKy · 21-05-2010 15:13:51

Pour le base url, une astuce très simple, dans ton layout, tu colles directement un code javascript du style :
site = { url: "<?= $this->baseUrl();?>"; }

Ainsi, dans tous les reste de ton code, JS, tu fais 'site.url + "/controller/action"'

Pour le controller, je propose une deuxième solution en plus de celle de wiiner :

Code:

 public function init()
     {
         $ajaxContext = $this->_helper->getHelper('AjaxContext');
         $ajaxContext->->addActionContext('monaction', 'json')
                ->initContext();
     }

  public function monactionAction() {
     $cle = $this->_getParam('valeur');
     $this->view->valide = true;
  }

Il faut penser à appelé ton lien JS avec /format/json (ex: site.url + "/module/controller/action/format/json")

Tu n'as pas a desactivé le layout ou le rendu, c'est automatique.
Tu n'as pas a sérialisé de valeur en Json, pas à faire de echo, et même pas à faire de monaction.phtml
Tout ce que as à faire, est de place des clés/valeurs dans view, ca sera automatiquement sérialisé en JSON et envoyé à ton client

ex:
JS

Code:

$.get(site.url + "/module/controller/action/format/json/cle/value/cle2/valeur2", function(data) {
  alert(data.valide); // renvoie true avec le code que j'ai mis plus haut
});

Zend FR

#1 16-05-2010 16:37:01

ajax jquery-ui et controller

Code:

Code:

#2 21-05-2010 11:42:42

Re: ajax jquery-ui et controller

Code:

Code:

#3 21-05-2010 15:13:51

Re: ajax jquery-ui et controller

Code:

Code:

Pied de page des forums