Rafraichissement resultats sans recharger la page (jquery)

Bonjour tout le monde !

Je recherche un effet de rafraichissement des resultats de mon formulaire sans recharger la page. La technique je ne sais pas : Jquery ou Ajax ?

J'aimerais un effet dans ce style la :
http://jquerymobile.com/demos/1.0/docs/forms/selects/options.html

Mais je ne sais pas quoi exactement mettre dans mon code ni quelle technique utilisez.
Avez-vous des idees ou des pistes a suivre svp ?

Pour idee, c'est sur ce formulaire la : www.netpom.fr

Merci beaucoup

Fanny, y'a pas de formulaire sur la page que tu as mise en lien !

Pour éviter qu'il recharge la page tu dois bloquer l'effet du lien.

<div id="hopla"></div>
<a href="portfolio.html" class="ext">Mon portfolio</a>
<a href="photos.html" class="ext">Mes photos</a>
<script>
$(document).ready(function() {
  $(".ext").on('click',function(event) {
    var url = $(this).prop('href');
    $("#hopla").load(url);
    event.preventDefault();
  });
});
</script>

Doc : http://api.jquery.com/event.preventDefault/
Modifié par jb_gfx (22 May 2013 - 18:30)

Merci Tybar! Ca marche =D Ca m'affiche par defaut le bloc qu'il me faut au bon endroit.

J'ai reussi a resoudre mon autre pb moi-meme )
Je voulais que lorsqu'on met dans l'url : contact/inquiries ou contact/quotation, que ca me change le bloc du texte. J'ai donc rajoute ces lignes:

// Si on change l'url
var pathname = window.location.pathname;
if(pathname == "/netpom/contact/renseignements") { $("#left").load($('#inquiries .ext').prop('href')); }
if(pathname == "/netpom/contact/devis") { $("#left").load($('#quotation .ext').prop('href')); }

Mais maintenant, j'aimerais que lorsque je clique sur un de ces deux boutons (du slide ou du sous-menu), que ca met a jour l'url. C'est possible ca ?

Et le comble du comble, ca serait que lors du clique sur un de ces 4 boutons, que ca aille directement au niveau du formulaire. J'avais donc pense a une ancre. Donc j'ai change le href de mes liens qui ont la classe .ext, mais rien n'y fait, lors du clique sur ces boutons, ca ne change pas l'url, donc ca ne me prends pas en compte mon ancre. Par contre ca fonctionne si je modifie l'url et que j'affiche "contact/renseignements#form" ca m'emmene bien au bon endroit.
Modifié par fanny95 (25 May 2013 - 13:10)

MERCI jb_gfx

Tes lignes fonctionnent a merveille. Le défilement jusqu'au formulaire fonctionne tres bien.
J'ai ajuste mon script, je pense que c'est possible de l'optimiser mais je ne sais pas comment. Au pire c'est pas bien grave, ca fonctionne alors je vais laisser ca comme ca.

Par contre concernant le changement d'url lors du clique, si je clique 2 fois dessus, ca le rajoute deux fois. C'est un peu embêtant. La fonction history.pushState me rajoute l'url plusieurs fois d'affile si je clique 2 fois de suite sur le bouton (en fait j'ai remarque c'est a cause du slash). Si je laisse juste cette ligne la ca fonctionne :

history.pushState(null, '', 'renseignements');

Mais du coup, ca me met netpom/renseignements au lieu de netpom/contact/renseignements
Une idee ?

Déjà tu peux utiliser le chemin complet depuis la racine et en commençant par un slash, ça réglera ton problème :

history.pushState(null, '', '/netpom/contact/renseignements');

Ensuite pour améliorer le confort pour l'utilisateur j’éviterai de rajouter une entrée à l'historique si il est sur la même page (URL en fait).

Un exemple :

$('bidule').click(function() {
    var url = '/netpom/contact/renseignements';
				
    if (window.location.pathname != url) {
          history.pushState(null, '', url);
    }
)};

PS : sympas tes nouvelles lunettes.
Modifié par jb_gfx (26 May 2013 - 19:37)

Coucou jb_gfx

Merci pour tes infos.
Mais j'y tiens pour l'url, genre netpom.fr/contact/devis
Car ca m'aidera si j'ai un bouton sur le site, qui veut directement acceder a la page Contact section Devis.
Donc du coup, je ne sais toujours pas faire pour avoir l'url qui change Car la solution ne marche pas avec un slash

Voici mon code pour rappel.

Sinon, comment faut-il que je fasse pour afficher par defaut en php le bloc que j'ai besoin ?
Je pensais faire ca : Faire 2 div. Une #renseignements et l'autre #devis. Mettre par defaut en CSS devis display:none. Puis lors du clique sur le bouton devis, ca change l'url, ca cache la div #renseignements et ca affiche #devis. J'arrive a faire cette deuxieme partie mais par la premiere (pour changer l'url en js).

		$("#left").load($('#inquiries .ext').prop('href'));
		
		// Lors du clique sur le sous menu
		$(".ext").on('click',function(event)
		{
			// On recupere l'url du lien href puis on charge ce lien dans le bloc #left
			var url = $(this).prop('href');
			$("#left").load(url);
			
			// On arrive directement au niveau du form
			//var ancre = $('#contact').offset().top;
			//$(document.documentElement).scrollTop(420);
			$(document.documentElement).animate({scrollTop: 420}, 800);
			// 420: 420px en dessous du bouton / Ou ancre (var)
			
			// On empeche le rechargement de la page
			event.preventDefault();
		});
		
		$("#inquiries .ext").on('click',function(event)
		{
			// On ajoute la class actif
			$(this).addClass('actif');
			$("#quotation .ext").removeClass('actif');
			// On change l'url
			//history.pushState(null, '', 'renseignements');
		});
		
		$("#quotation .ext").on('click',function(event)
		{
			$(this).addClass('actif');
			$("#inquiries .ext").removeClass('actif');
			// On change l'url
			//history.pushState(null, '', 'devis');
		});
		
		// Si on change l'url a la main
		var pathname	= window.location.pathname;
		var url_rens	= '/netpom/contact/renseignements';
		var url_dev		= '/netpom/contact/devis';
		
		if(pathname == url_rens) {
			$("#left").load($('#inquiries .ext').prop('href'));
		}
		if(pathname == url_dev)  {
			$("#left").load($('#quotation .ext').prop('href'));
		}