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";
	}

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");
            }
         })
    }

// ]]>

Qu'en pensez vous ?

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

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.

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 ?

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

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?

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.

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.

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) { ... };

// ]]>

(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;
            }
        }

}

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 ;)

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);
            }})
        })

});

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)

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() ?