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

  [Opened] jForms et ajax

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à wink


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

  [Opened] jForms et ajax

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 smile

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 tongue xhr correspond a XmlHttpRequest au moin wink

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à wink

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

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 smile

comment ca ?


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

  [Opened] jForms et ajax

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

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

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

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

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

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à smile

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 wink


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

  [Opened] jForms et ajax

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

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