Quick links: Content - sections - sub sections
EN FR
Quick Search Advanced search
 
Page

  [Opened] jForms et ajax

Posted by foxmask on 12/14/2010 16:11

J'ai envi (et besoin aussi) de pouvoir soumettre un formulaire en ajax afin d'éviter de recharger ma page dès qu'on ajoute un post.

Seulement en l'etat actuel, utilisant jForms, il m'est impossible d'eviter le rechargement de la page à la soumission.

Donc je me demandais si on ne pourrait pas faire comme CakePHP :

permettre que le bouton submit fasse un "return false;" (qu'on pourrait paramètrer dans le form.xml avec un <submit ref="ok" ajax="true/false">)

ensuite dans le contrôleur, dans la classe jFormsControl, de meme qu'on fait un $form->check() on pourrait faire un $form->isAjax() qui ferait ceci :

<code>
	function isAjax() {
		return env('HTTP_X_REQUESTED_WITH') === "XMLHttpRequest";
	}
</code>

Du coup on peut gérer le cas si le javascript est désactivé ou non dans le browser et soumettre les données comme bon nous semble

Si le bouton contient la propritété true, alors on pourrait générer (dans jformsBuilder) avec l'action du formulaire, le code ajax avec l'url de l'action

<script type="text/javascript">
// <![CDATA[
<code>
    var urlJlxAjax = '/url/from/formAction;
    $(document).ready(function(){
        //div to hide on load
        $("#jforms-data-update").hide();
        $("#jforms_id_du_form").submit(function() {
            JlxDisplayResult();
        });
    });
    function JlxDisplayResult() {
        $.ajax({
            type: "POST",
            url: urlJlxAjax,
            dataType: 'html',
            success: function(data) {
                //show the div with the expected daat
                $("#jforms-data-update").html(data);
                $("#jforms-data-update").slideDown("slow");
            }
         })
    }

// ]]>

</script> </code>

Qu'en pensez vous ?

ps: j'en ai peut-être trop mis ou pas assez mais l'idée est là ;)


@GitHub - Forum HaveFnuBB! powered by Jelix - Le Booster Jelix !

  [Opened] jForms et ajax

Reply #1 Posted by Vincentv on 12/14/2010 22:25

foxmask a dit :
J'ai envi (et besoin aussi) de pouvoir soumettre un formulaire en ajax afin d'éviter de recharger ma page dès qu'on ajoute un post.

Seulement en l'etat actuel, utilisant jForms, il m'est impossible d'eviter le rechargement de la page à la soumission.

Donc je me demandais si on ne pourrait pas faire comme CakePHP :

permettre que le bouton submit fasse un "return false;" (qu'on pourrait paramètrer dans le form.xml avec un <submit ref="ok" ajax="true/false">)

il est peu etre plus interessant de le mettre dans le {form ...} au lieu de le mettre dans le submit du form.xml :)

ensuite dans le contrôleur, dans la classe jFormsControl, de meme qu'on fait un $form->check() on pourrait faire un $form->isAjax() qui ferait ceci :
<code>
function isAjax() {
return env('HTTP_X_REQUESTED_WITH') === "XMLHttpRequest";
}
</code>

pk pas function isXhr(), ajax c'est un terme marketing et une lessive :p xhr correspond a XmlHttpRequest au moin ;)

Du coup on peut gérer le cas si le javascript est désactivé ou non dans le browser et soumettre les données comme bon nous semble

Si le bouton contient la propritété true, alors on pourrait générer (dans jformsBuilder) avec l'action du formulaire, le code ajax avec l'url de l'action
<code>
<script type="text/javascript">
// <![CDATA[
var urlJlxAjax = '/url/from/formAction;
$(document).ready(function(){
//div to hide on load
$("#jforms-data-update").hide();
$("#jforms_id_du_form").submit(function() {
JlxDisplayResult();
});
});
function JlxDisplayResult() {
$.ajax({
type: "POST",
url: urlJlxAjax,
dataType: 'html',
success: function(data) {
//show the div with the expected daat
$("#jforms-data-update").html(data);
$("#jforms-data-update").slideDown("slow");
}
})
}
// ]]>
</script>
</code>

Qu'en pensez vous ?

ps: j'en ai peut-être trop mis ou pas assez mais l'idée est là ;)

Sinon oui ca pourrais être pratique meme si je trouve plus pratique de mettre le paramètre xhr (ou ajax) dans le plugin de template form.

  [Opened] jForms et ajax

Reply #2 Posted by foxmask on 12/15/2010 01:46

Litchi a dit :

foxmask a dit :
J'ai envi (et besoin aussi) de pouvoir soumettre un formulaire en ajax afin d'éviter de recharger ma page dès qu'on ajoute un post.

Seulement en l'etat actuel, utilisant jForms, il m'est impossible d'eviter le rechargement de la page à la soumission.

Donc je me demandais si on ne pourrait pas faire comme CakePHP :

permettre que le bouton submit fasse un "return false;" (qu'on pourrait paramètrer dans le form.xml avec un <submit ref="ok" ajax="true/false">)


il est peu etre plus interessant de le mettre dans le {form ...} au lieu de le mettre dans le submit du form.xml :)

comment ca ?


@GitHub - Forum HaveFnuBB! powered by Jelix - Le Booster Jelix !

  [Opened] jForms et ajax

Reply #3 Posted by foxmask on 12/15/2010 13:29

je testerai ca ce soir ; ca sera surement plus simple http://api.jquery.com/event.preventDefault/ que tout ça


@GitHub - Forum HaveFnuBB! powered by Jelix - Le Booster Jelix !

  [Opened] jForms et ajax

Reply #4 Posted by Vincentv on 12/15/2010 13:32

Au lieu de mettre <submit ref="ok" ajax="true/false"> dans le form.xml. il pourrait être passé dans les options du plugin form/formmfull pour le builder (documentation). ton form.xml ne change pas et dans ton template tu decide si tu utilise XmlHttpRequest pour la soumission ou non.

Ca devrait demander des modifications uniquement des les builders, non?

  [Opened] jForms et ajax

Reply #5 Posted by foxmask on 12/15/2010 13:40

Oui tout à fait.

Mais, sauf erreur, cela n'aura plus lieu d'être si "event.preventDefault" permet d'empêcher le comportement par défaut (ici soumettre le formulaire), pour le "soumettre (qd meme) en javascript". Du coup chercher dans le contrôleur si l'entente est XMLHttpRequest, n'a plus aucun interet. Si le javascript est actif ca passera en xhr, sinon ben par la methode classique. CA fait juste produire 2 actions au lieu d'une (si on detecte l'entete xhr).

Je vous tiens au courant de mon test.


@GitHub - Forum HaveFnuBB! powered by Jelix - Le Booster Jelix !

  [Opened] jForms et ajax

Reply #6 Posted by Vincentv on 12/15/2010 13:46

jquery renseigne l'entete d'apres ce que j'ai lu dans l'action de ton controllers si tu detecte l'entête xhr tu peux remplacer la réponse html par un htmlfragment, je vois pas pk tu veux en faire 2.

  [Opened] Re: jForms et ajax

Reply #7 Posted by foxmask on 12/15/2010 23:29

Bon au bout du compte j'ai fini par y arriver avec de l'inspiration venue de Toulouse (Hadrien;)

Pour empêcher la soumission il faut utiliser preventDefault et là où je me fourvoyais c'était dans l'enchainement de la partie ajax que je ne mettais pas dans la meme fonction

à présent ca donne ceci :

le template :

{literal}
<script type="text/javascript">
// <![CDATA[
<code>
    var urlSaveAjx = {/literal}{urljsstring 'module~controller:action'}{literal};
    $(document).ready(function(){
        $(".jelix-message").hide();
        $("#data-update").hide();
        $("#jforms_xxx").submit(function(event) {
            event.preventDefault();
            talk();
        });
    });
    function talk() {
        $.ajax({
            type: "POST",
            url: urlSaveAjx,
            data: $("#jforms_xxx").serialize(),
            dataType: 'html',
            success: function(data) {
                $("#articles").hide().prepend(data).fadeIn('slow');
                $(".jelix-message").slideDown("slow");
                $(".jelix-message").slideUp(1000);
                clearForm($("#jforms_reg_histo"));
            }
         })
    }

    function clearForm(form) { ... };

// ]]>

</script> </code>

(l'effet obtenu ici c'est l'ajout de ce que l'on saisi dans le formulaire au fil de l'eau dans le DOM + l'affichage d'un message "message ajoute" qq instants + effacement du formulaire)

le controleur :

function save() {
<code>
            $form = jForms::fill('foobar');

            if (!$form or !$form->check())
                return false;
            //save the data to the database and get the Primary Key of the
            // "just" inserted record
            $pk = $form->saveToDao('foobardao');
            //if it's not a XHR request
            if (!array_key_exists('HTTP_X_REQUESTED_WITH',$_SERVER)) {
                // do a "classic" redirect
                $rep = $this->getResponse('redirect');
                $rep->action='module~controller:action';
                return $rep;
            }
            //if it's a XHR request
            else {
                //get the inserted record
                $data = jDao::get('foobardao')->get($pk);
                // call the htmlfragment response dedicated to XHR
                $rep = $this->getResponse('htmlfragment');
                // filled template to return
                $rep->tplname='module~added_ajax';
                $rep->tpl->assign('data',$data);
                return $rep;
            }
        }

}

</code>

je n'ai volontairement pas mis ni le "bout" de html (added_ajax) ni le clearForm mais l'idée est là :)

voila !

Comme cela si les données sont soumises ; javascript désactivé ; c'est la premiere partie du controleur qui est pris en compte ; sinon la seconde.

j'en ferai un tuto ou post sur mon blog à l'occasion ;)


@GitHub - Forum HaveFnuBB! powered by Jelix - Le Booster Jelix !

  [Opened] jForms et ajax

Reply #8 Posted by Vincentv on 01/31/2011 16:23

J'essai de faire la même chose que toi, cependant je rencontre un erreur (Le token du formulaire n'est pas valide, vous devez remplir le formulaire correctement à partir du site) quand j'utilise le script ajax

$('#jforms_XXX').submit(function(event){
<code>
        event.preventDefault();
        $.post(this.action, {data : $(this).serialize(), success : function(data){
                $('#facebox .content').html(data);
            }})
        })

});

</code>

Si je retire le script le formulaire fonctionne correctement sans me lancer d'erreur de token.

Aurais tu rencontrais ce problème? une idée pour le résoudre?

(version 1.2 de jelix)

  [Opened] jForms et ajax

Reply #9 Posted by foxmask on 01/31/2011 21:00

je rencontrai le pb avant de mettre la main sur preventDefault peut-être que ton code n'est pas correct à un poil près.

si tu le fais avec une seconde fonction foobar() apres le event.preventDefault qui ferait comme mon function talk() ?


@GitHub - Forum HaveFnuBB! powered by Jelix - Le Booster Jelix !

 
Page
  1. jForms et ajax