Jquery Portfolio filtrable et validation d'un formulaire

Bonsoir

J'ai sur une même page un portfolio filtrable et un formulaire de contact (en include). A la validation du formulaire, je souhaite que la page reste visuellement au niveau du formulaire.

Dans ma page traitement, j'ai donc rajouté l' id ancre du formulaire dans mon lien

header('Location: '.$_SERVER['HTTP_REFERER'].'#contact_form' );

Ca marche mais du coup c'est le portfolio qui ne s'affiche plus après la validation

script du portfolio

/*
* Copyright (C) 2009 Joel Sutherland.
* Liscenced under the MIT liscense
*/

(function($) {
	$.fn.filterable = function(settings) {
		settings = $.extend({
			useHash: true,
			animationSpeed: 1000,
			show: { width: 'show', opacity: 'show' },
			hide: { width: 'hide', opacity: 'hide' },
			useTags: true,
			tagSelector: '#portfolio-filter a',
			selectedTagClass: 'current',
			allTag: 'all'
		}, settings);
		
		return $(this).each(function(){
		
			/* FILTER: select a tag and filter */
			$(this).bind("filter", function( e, tagToShow ){
				if(settings.useTags){
					$(settings.tagSelector).removeClass(settings.selectedTagClass);
					$(settings.tagSelector + '[href=' + tagToShow + ']').addClass(settings.selectedTagClass);
				}
				$(this).trigger("filterportfolio", [ tagToShow.substr(1) ]);
			});
		
			/* FILTERPORTFOLIO: pass in a class to show, all others will be hidden */
			$(this).bind("filterportfolio", function( e, classToShow ){
				if(classToShow == settings.allTag){
					$(this).trigger("show");
				}else{
					$(this).trigger("show", [ '.' + classToShow ] );
					$(this).trigger("hide", [ ':not(.' + classToShow + ')' ] );
				}
				if(settings.useHash){
					location.hash = '#' + classToShow;
				}
			});
			
			/* SHOW: show a single class*/
			$(this).bind("show", function( e, selectorToShow ){
				$(this).children(selectorToShow).animate(settings.show, settings.animationSpeed);
			});
			
			/* SHOW: hide a single class*/
			$(this).bind("hide", function( e, selectorToHide ){
				$(this).children(selectorToHide).animate(settings.hide, settings.animationSpeed);	
			});
			
			/* ============ Check URL Hash ====================*/
			if(settings.useHash){
				if(location.hash != '')
					$(this).trigger("filter", [ location.hash ]);
				else
					$(this).trigger("filter", [ '#' + settings.allTag ]);
			}
			
			/* ============ Setup Tags ====================*/
			if(settings.useTags){
				$(settings.tagSelector).click(function(){
					$('#portfolio-list').trigger("filter", [ $(this).attr('href') ]);
					
					$(settings.tagSelector).removeClass('current');
					$(this).addClass('current');
				});
			}
		});
	}
})(jQuery);


$(document).ready(function(){
	
	$('#portfolio-list').filterable();

});

Merci d'avance

Salut,

Tu peux, par exemple, ajouter une surcouche JS pour soumettre ton formulaire via Ajax.
Ainsi, tu resteras au même niveau.

Ah! J'oubliais...

Dans le code de ton portfolio, il y a une variante de comportement qui dépend du hash donc si tu ne veux pas soumettre ton formulaire en Ajax, tu peux ajouter une condition vérifiant que le hash est différent de #contact_form.

Bonjour et merci koala64 pour tes conseils

En cherchant ce que pouvais bien être le "hash" et en voyant l'adresse du site finissant par #contact_form, j'ai trouvé dans le script

			
/* ============ Check URL Hash ====================*/
if(settings.useHash){
 if(location.hash != ' ')
   $(this).trigger("filter", [ location.hash ]);
	else
	 $(this).trigger("filter", [ '#' + settings.allTag ]);
}

j'ai donc changé le location.hash

if(location.hash != '#contact_form')

et ça marche

Sinon, je vérifie mon formulaire coté serveur, le fait de mettre une sur couche de vérification en javascript est-il un plus ?

Merci

Salut,

Pour la vérification du hash, je pense qu'il vaut mieux faire un test du type :

if(location.hash != ' ' && location.hash != '#contact_form') {
    // ...
}
else {
    // ...
}

car le script semble prévoir certaines actions lorsque le hash est personnalisé.

Pour ce qui est de l'ajout d'une vérification côté client (en JS), ça peut être un plus, oui.

L'impératif est effectivement de faire une vérification côté serveur et l'ajout d'une surcouche JS peut offrir un certain confort en permettant d'afficher les potentielles erreurs sans avoir à recharger la page.

Bonjour et a nouveau merci

J'ai modifié la condition comme indiqué et ça marche bien aussi.

Pour la surcouche JS, je vais essayer de trouver un tuto "compréhensif" à mon niveau car je me suis rendu compte que sur d'autres pages (qui utilise un autre JS pour diaporama) le problème est le même... j'ai essayé de modifier aussi ce JS mais là, je n'y arrive pas