[JQuery] jquery.ajaxForm sur un formumaire chargé dynamiquement

salut,

je galère depuis un moment sur ce probleme.

Il s'agit pour moi de soumettre un formulaire en ajax. Jusque là rien de bien compliqué avec ajaxForm. Mais ce formulaire est dans un "onglet" qui est chargé dynamiquement en ajax lors d'un clic. Il y a plusieurs onglet sur ma page et je ne charge que la partie qui m'interesse à chaque fois.

Lorsque je place ce formulaire + l'appel ajaxForm sur la page principale, ca fonctionne normalement, logique.
Quand j'essaie de faire la meme chose sur le formulaire chargé dynamiquement dans l'onglet, ca ne fonctionne plus.

Je sais pas si je suis clair, c'est pas simple à expliquer.

Bref, est-il possible de réaliser celà avec jquery et ajaxForm ?
de quelle manière ?

Merci de votre aide.

Bonjour à toi,

Oui ça doit être possible ne t'en fais pas :)

En fait, ton formulaire est chargé dynamiquement, ce qui veut dire qu'il n'est pas pris en compte lors du chargement de ta page, dans la mesure où il est arrivé après. Il faut donc que tu déclare la fonction de son traitement en même temps que sa génération. Si tu génère de l'HTML, alors tu inclus ta fonction JS à l'intérieur, elle pourra dans ce cas être exécutée.

C'est comme ça que j'avais fait pour ma part, mais il doit peut-être y avoir une solution plus simple :p

Bon courage !!

Tu n'aurais pas un petit bout de code à montrer (voire une page de test) pour nous permettre de commencer à voir où est le problème ?

Citation:

---

Envoyé par Carabi

Bonjour à toi,

Oui ça doit être possible ne t'en fais pas :)

En fait, ton formulaire est chargé dynamiquement, ce qui veut dire qu'il n'est pas pris en compte lors du chargement de ta page, dans la mesure où il est arrivé après. Il faut donc que tu déclare la fonction de son traitement en même temps que sa génération. Si tu génère de l'HTML, alors tu inclus ta fonction JS à l'intérieur, elle pourra dans ce cas être exécutée.

C'est comme ça que j'avais fait pour ma part, mais il doit peut-être y avoir une solution plus simple :p

Bon courage !!

---

oui c'est ce que j'ai essayé de faire, mais je pense que ca bloque au niveau du déclencheur. la techno ajax, j'apprends un peu sur le tas. Je suis ingé réseau/systeme et je sais coder en php, etc, je comprends aussi le fonctionnement de l'ajax, mais là ca manipule des librairie que je maitrise pas encore bien (jquery).

voila le schéma :

je suis sur une page "profil", sur celle ci, je clic sur un onglet "préférences" qui me charge via ajax un formulaire (prefences.php) dans ma boite à onglet déjà chargé. Ca tu avais compris je crois.

Maintenant, j'ai ajouté ceci dans preferences.php c'est l'appel du script (updateProfile.php) qui va prendre en compte mon formulaire avec la div (#updateStatus) qui recoit la réponse
#f_infos est mon formulaire.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<script type="text/javascript"> $(document).ready(function() { var options = { target: '#updateStatus', url: 'updateprofile.php' };   $('#f_infos').submit(function() { $(this).ajaxSubmit(options); return false; }); }); </script>

---

je pense que le probleme vient de $(document).ready(function() mais je sais pas quoi mettre. :?

Citation:

---

Envoyé par Bovino

Tu n'aurais pas un petit bout de code à montrer (voire une page de test) pour nous permettre de commencer à voir où est le problème ?

---

trop compliqué, j'ai essayé mais j'arrive pas isoler la page, comme je developpe en local.


Merci pour l'aide apportée en tout cas.

Citation:

---

je pense que le probleme vient de $(document).ready(function() mais je sais pas quoi mettre.

---

Code:

---

$(function(){});

---

suffit effectivement, mais le problème ne vient pas de là, il doit provenir du fait que quand ta div est mise à jour, la structure du formulaire doit poser problème... (même la partie non affichée est susceptible d'être prise en compte).

juste une question, l'endroit où se trouve le code suivant a-t-il une importance car c'est clair que ce code n'est pas executé puisque j'ai essayé avec un simple alert() dans cette fonction lors du submit du formulaire, il n'est pas affiché :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<script type="text/javascript"> $(function() { var options = { target: '#updateStatus', // target element(s) to be updated with server response url: 'updateprofile.php' }; // alert('coucou'); $('#f_infos').submit(function() { // alert('coucou2'); $(this).ajaxSubmit(options); return false; }); }); </script>

---

Non, l'emplacement n'est pas en cause (mais il est préférable de le placer dans le head) car ta fonction n'est initialisée qu'après le chargement de ta page.
En revanche, serait-il possible de voir comment est formé ton submit ?

Et avec

Code:

---

1 2	$(document).ready(function(){...});

---

il ne s'affiche pas non plus?

Sinon, ajaxSubmit, je connais pas moi, en tout cas pas vu dans la doc JQuery 8O

Question subsidiaire, ajaxSubmit, c'est quoi ?

je crois savoir où est le probleme. J'utilise la fonction suivante pour charger ma div :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

function file(fichier) { if(window.XMLHttpRequest) // FIREFOX xhr_object = new XMLHttpRequest(); else if(window.ActiveXObject) // IE xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); else return(false); xhr_object.open("POST", fichier, false); xhr_object.send(null); if(xhr_object.readyState == 4) return(xhr_object.responseText); else return(false); }

---

Je pense que je devrais renvoyer : eval(xhr_object.responseText)
et pas juste xhr_object.responseText
c'est en tout cas une cause d'erreur que j'ai trouvé sur le net. :?


ajaxSubmit c'est un pluginde jquery. http://malsup.com/jquery/form/

Et sinon,

Code:

---

1 2	$("#myform").submit( function() {} );

---

ça marche pas mal non plus :)

Ah ok, autant pour moi...:aie:

donc je vais essayer d'ammener un début d'explication sur ce qui me semble etre la caue de mes soucis (non résolu encore malgré tout)

Il se trouve que le code javascript n'est pas executer dans des données chargé via ajax.

C'est une histoire de contexte global, je dois dire que c'est aps trop mon rayon donc voila un blog qui en parle mieux que je ne le ferais : http://www.xorax.info/blog/programma...al-global.html

cela dit, je vois pas comment je pourrais intégrer sa solution. J'ai tenté un eval de mon xhr_object.responseText mais ca me sors une erreur.
j'avoue que j'arrive pas bien à appliquer sa solution.

Citation:

---

mais ca me sors une erreur

---

Quel genre?

halleluia mes amis !!

ca fonctionne. Ca va me demander pas mal de boulot mais bon, en fait, c'est ma fonction de chargement dynamique qui etait foireuse (celle que j'ai mise plus haut), j'ai donc décidé de remplacer ces appels ajax par la meme chose mais avec jquery

ce qui donne pour le changement d'onglet :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

$(document).ready(function(){ $("a.profil").click(function() { $.ajax({ type: "POST", url: $(this).attr("href"), success: function(retour){ $("#membre_content").empty().append(retour); } }); return false; }); });

---

Et dans mon onglet, j'ai rien touché pour l'instant et le code javascript qui me permettait de valider le formulaire est bien pris en compte maintenant.

quasi une journée de recherche... mais :yaisse2:
je suis content, merci pour votre aide et votre soutien les gars.

Tu m'etonnes que t'es content :) Ca fait du bien hein ^^