Bonjour,
J'ai un bouton avec lequel j'affiche une popup (Fancybox). Pour afficher ma popup j'utilise de l'ajax. Voici mon code :

Code de AppController.php:

<?php
    public function beforeFilter(){
        // On court-circuit l'affichage si c'est de l'ajax
        if($this->RequestHandler->isAjax()){
            $this->layout = null;
        }
    }
?>

Code de mon controller :

<?php
    public function admin_modalAlbum(){
        if($this->request->is('post')){
        $this->Album->create();
        $this->Album->set($this->request->data);
        if($this->Album->validates()){
            $return = json_encode('success');
        echo $return;
        }else{
            $return = json_encode($this->validateErrors($this->Album));
                echo $return;
        }
        }
    }
?>

Et enfin code HTML permettant d'ouvrir la popup :

<li>
    <?php 
        echo $this->Html->link(
            'Nouvel album', 
            array('action' => 'modalAlbum', AuthComponent::user('role') => true),
            array(
                'class' => 'uibutton icon add pop_box'
            )
        ); 
    ?>
</li>

Tout marche très bien. Lors du clique la popup s'ouvre avec la vue associée à admin_modalAlbum.

Voici mon problème : Comme vous l'avez vue dans la méthode admin_modalAlbum() je fais des retours en json pour ma validation de formulaire ajax.

<script type="text/javascript">
        $(function(){
            function displayError(tag, value){
                $( tag ).parent().addClass('error');
                $( tag ).parent().append('<div class="error-message">' + value + '</div>');
            }
            $( '#addalbum' ).live('click', function(){
                $.ajax({
                    type : 'POST',
                    url : $( '#add-new-album' ).attr('action'),
                    data : $( '#add-new-album' ).serializeArray(),
                    dataType : 'json',
                    beforeSend : function(){
                        $( '#add-new-album' ).find('.error').removeClass('error');
                        $( '#add-new-album' ).find('.error-message').remove();
                    }
                    success : function(json){
                        if(json == 'success'){
                            $.fancybox.close();
                        }else{
                            if(data.name){ displayError( '#AlbumName', data.name ); }
                        }
                    }
                });
                return false;
            });
        });
</script>

Dès que je clique sur le bouton permettant de sauvegarder les informations, les validations s'effectue correctement mais CakePHP me redirige à chaque fois vers la vue modalAlbum.
J'ai essayer de faire un $this->autoRender = false mais ça m'affiche le message stocker dans $return (success ou le message de validation). Si j'enlève le $this->autoRender = false , il m'affiche la vue dans le layout 'admin'. J'ai du oublier de faire quelque chose ou bien j'ai une erreur dans mon code.

Comment faire pour récupérer le retoure json sans rediriger vers la méthode modalAlbum?

En espérant avoir été clair dans mes explications. Merci de votre aide.

1 réponse


kal-el
Auteur
Réponse acceptée

Ok je me répond à moi-même. Le problème venait d'une erreur bête. J'ai oublié la petite virgule dans mon code Javascript entre la fonction beforeSend et success. Voici le code corrigé :

<script type="text/javascript">
        $(function(){
            function displayError(tag, value){
                $( tag ).parent().addClass('error');
                $( tag ).parent().append('<div class="error-message">' + value + '</div>');
            }

            $( '#addalbum' ).live('click', function(){
                $.ajax({
                    type : 'POST',
                    url : $( '#add-new-album' ).attr('action'),
                    data : $( '#add-new-album' ).serializeArray(),
                    dataType : 'json',
                    beforeSend : function(){
                        $( '#add-new-album' ).find('.error').removeClass('error');
                        $( '#add-new-album' ).find('.error-message').remove();
                    }, // Ici j'avais oublié la virgule
                    success : function(json){
                        if(json == 'success'){
                            $.fancybox.close();
                        }else{
                            if(data.name){ displayError( '#AlbumName', data.name ); }
                        }
                    }
                });
                return false;
            });
        });
</script>