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

jQuery utilise AJAX en interne, s'il s'agit de faire un chargement de document "distant" (externe à la page).

Deux techniques :
- soit on charge tout le contenu par avance dans la page et on masque les éléments sauf celui affiché par défaut, puis on les révèle alternativement selon les clics
- soit on ne charge rien et on va chercher le contenu dans des fichiers externes, par exemple avec la méthode load() de jQuery qui est assez simple à exploiter

Exemple

<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() {
    var url = $(this).prop('href');
    $("#hopla").load(url);
  });
});
</script>

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

Pardon, je parlais de cette page : www.netpom.fr/portfolio
Merci DEW pour ton code, et tes explications, je vais regarder de ce cote la
Par contre je viens d'essayer ton code, et il me recharge quand meme la page. C'est etrange.
Modifié par fanny95 (22 May 2013 - 12:46)

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 bien DEW!
Grace a cette magique ligne, tout fonctionne a merveilles !
Bon biensur il faut que je modifie le script, car j'aimerais que sans cliquer quelque part, que ca affiche par defaut dans cette zone la un de ces 2 fichiers. Mais j'y arrive pas. Je vais perseverer!

Voici quand même mon code, au cas ou vous avez des pistes a suivre.

<div id="inquiries">
     <a class="ext" href="<?= _HOST_DIR.'renseignements' ?>">texte</a>
</div>
<div id="quotation">
     <a class="ext" href="<?= _HOST_DIR.'devis' ?>">texte</a>
</div>
<div id="left">&nbsp;</div>

// Affichage par défaut si pas encore de clique sur les sous menus

   // si sousrub = 'renseignements'
   $("#left").load('../vues/renseignements.php');
   // marche pas, n'affiche rien, aucune erreur. 

   // si sousrub = 'devis'

   // sinon, par defaut : on affiche 'renseignements'

   // Lors du clique sur le sous menu
   $(".ext").on('click',function(event) {
	var url = $(this).prop('href');
	$("#left").load(url);
	event.preventDefault();
});

// Lors du hover sur les boutons du slide
$('.ext').hover(function () {
	$(this).addClass("hover");
},function (){
	$(this).removeClass("hover");
});

Modifié par fanny95 (24 May 2013 - 17:42)

Ça fonctionne si tu fais ça ?

$(function() {
  $("#left").load('../vues/renseignements.php');
});

Sinon essai de mettre une URL absolue vers ton fichier pour voir.

A part ça moi c'est JB...
Modifié par jb_gfx (24 May 2013 - 19:32)

Pardon !!!!!!! Pardon j'ai pas fais attention au nom. Merci pour la reponse ! Elle m'a bien aide )
Mais sinon, non ca ne change rien, j'ai essaye avec une url absolue, mais rien ne s'affiche par defaut

Bonsoir,

Si le chargement fonctionne au clique pourquoi ne pas le reprendre?
Et si on prend renseignement par defaut pas besoin de faire une condition pour l'afficher il me semble.

   // si sousrub = 'devis'

   // sinon, par defaut : on affiche 'renseignements'
   $("#left").load($('#inquiries .ext').prop('href'));

A moins que je n'ai pas compris la réel mesure du problème

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)

Pour changer l'URL tu peux utiliser history.pushState().

history.pushState(null, '', 'ma/super/url.html');

Pour te placer au niveau de ton form, avec jQuery tu peux faire ça :

var formOffset = $('#form').offset().top;
$(document.documentElement).scrollTop(formOffset);

Ou avec une animation :

var formOffset = $('#form').offset().top;
$(document.documentElement).animate({scrollTop: formOffset}, 800);

PS : pour le chargement de ton contenu initial j'étais pas frais quand je t'ai répondu la première fois : charge le coté serveur en PHP sinon les moteurs de recherches et les personnes sans js ne le verront pas.
Modifié par jb_gfx (25 May 2013 - 16:12)

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'));
		}