FOSUser et AJAX

Version imprimable

FOSUser et AJAX

Bonjour à tous,

Je souhaite mettre en place un système en AJAX pour la connexion au site.
Utilisant FosUser, j'ai tenté une méthode qui n'est peut être pas très propres mais que je pensais fonctionnelle :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 // Exemple lors d'une connexion lors du submit du formulaire FOSUser $(document).on('submit', '#ajax form', function() { $('body').css('cursor','progress'); var obj = $(this); //obj.addClass('muted'); $.ajax($(this).attr('href'), { cache: false }) .done(function(data){ $('#ajax').html(data); }) .always(function(){ $('body').css('cursor','auto'); //obj.removeClass('muted'); }); return false; });
L'idée était d'utiliser un js créant des appels ajax pour chaque cas du formulaire. et lorsque la connexion serait ok, une actualisation de la page.

Malheureusement lorsque l'appel ajax est terminé, le contenu inséré a subi un rendu avec le layout complet. j'ai donc le site dans le site!

Sauriez-vous m'aiguiller vers une solution ou vers une alternative plus propre ?

Merci à vous,
Kevin

30/12/2013, 12h34
dukoid
Code:

1 2 $('#ajax').html(data);
norm
30/12/2013, 12h35
dukoid
Code:

1 2 $('#ajax').html(data);
normal, tu injecte la page html dans la balise '#ajax'
31/12/2013, 01h34
dyron

Entièrement d'accord avec celà, c'est ce qui était prévu.

La page de login/loginerror ne contenant que le formulaire, je souhaite qu'elle se charge dans le div #ajax
31/12/2013, 12h28
dukoid

en fait j'ai pas trop compris ta question ou ton problème :lol:

Bonjour,

Si tu souhaites soumettre ton formulaire via ajax, il faut envoyer les données du formulaire.
Actuellement ton script ne fait qu'un appel get à la page de login

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    $(document).on('submit', '#ajax form', function()
    {
/..... 
        $.ajax($(this).attr('href'), {
            type: 'POST',
            cache: false,
            data:$(this).serialize()// soit "_username=toto&_password=titi"
        })
        .done(function(data){
            $('#ajax').html(data);
        })
        .always(function(){
            $('body').css('cursor','auto');
            //obj.removeClass('muted');
        });
 
        return false;
    });