Formulaire et AJAX... empecher "l'envoi" du form

Bonjour,

Je bosse actuellement sur un backoffice, j'ai une grosse lib (php) qui me permet de générer des listing à la volée, jusque la tout va bien!

Dans ce listing on a la possibilité de trier les données sur chaque colonne, et de creer un mini formulaire de recherche (filtre en gros)

Voila le problème:

Afin de rendre l'utilisation plus souple , certain listing au lieu de recharger complétement la page sont chargés en ajax dans une div au milieu de l'écran (pseudo effet lightbox)

Pour garder les comportements de tri sur les colonnes j'ai écrit ce petit bout de code qui va remplacer tout les hrefs par des onclick avec les liens correspondant...

Seul soucis, je n'arrive pas a reproduire la chose avec les formulaires!

J'ai bien essayé de rajouter un "observer" sur le submit, mais quoi qu'il arrive mon formulaire est envoyé, au lieu de recharger simplement ma div avec les données filtrées!

function initFrame()
{
	var f = $$('#fond_gris_contenu .ajax_link a');
	for(var i=0; i<f.length; i++){
		Event.observe(f[i], 'click', Checks.generic.bindAsEventListener(f[i].href));
		f[i].href = 'javascript:void(0);';
	}
}

var Checks = {
	generic: function(event) {
    popup_fond(this);
  }
};

Ce code me permet de remplacer mes href par les onclick si ma lib est chargé en javascript.

Event.observe(search, 'submit', function(e) {alert('test');return false;});

J'ai essayé des tonnes de solutions pour mes forms, mais impossible.... mon form est envoyé quoi qu'il arrive!

par contre, si je rajoute en dur le

onsubmit="alert('test');return false;"

j'ai bien mon alert, et ensuite plus rien, alors que la même chose avec le event.observe, m'affiche bien mon alert, mais ensuite le form est envoyé!

Quelqu'un aurait une idée?

MERCI d'avance! [/i][/i][/i]
Modifié par folk (29 Jun 2007 - 10:47)

Hello,

La gestion des événements en DOM 2 n'est pas tout à fait la même qu'en DOM 0 ; tu dois passer par stopPropagation et preventDefault (cancelBubble et returnValue pour IE).

Avec un Event.observe, tu peux te servir de la fonction suivante :

function cancelClick(e)
{
	if(e && e.stopPropagation && e.preventDefault)
	{
		e.stopPropagation();
		e.preventDefault();
	}
	else if(e && window.event)
	{
		window.event.cancelBubble = true;
		window.event.returnValue = false;
	}

	return false; // Pour Safarÿ
}

Event.observe(
	search,
	'submit',
	function(e)
	{
		alert('test');
		return cancelClick(e);
	}
);

Je te conseille d'ailleurs de lire ces tutos pour mieux comprendre :

http://css.alsacreations.com/Tutoriels-JavaScript/La-gestion-des-evenements-en-JavaScript
http://gilles.chagnon.free.fr/cours/dhtml/evenements.html

PS : Attention aux [i ] lorsque tu postes un code. Cela correspond à la mise en italique du forum donc soit tu mets un espace comme ce que je viens de faire, soit tu changes de lettre

PS 2 : Avec Prototype, il y a peut-être un équivalent à la fonction ci-dessus mais comme je ne m'en sers jamais... je te laisse chercher.
Modifié par koala64 (29 Jun 2007 - 11:18)

C'est Event.stop(e);

voir ici : http://particletree.com/notebook/eventstop/

koala64 a écrit :
C'est Event.stop(e);

Oui biensur j'avais tout essayé sauf ca!

Et merci pour les liens, cela va surement combler quelques lacunes


Marchi beaucoup



PS: pour les [i ] j'avais vu le soucis, mais j'ai été un peu flemmard sur le coup