login  Naam:   Wachtwoord: 
Registreer je!
 Forum

jquery pagina laden zonder refresh (Opgelost)

Offline recruity - 23/08/2014 10:55
Avatar van recruityNieuw lid Goedeavond,

ik ben een website voor een vriend aan het aanpassen.
Het is een 1 pagina website. Echter worden er wel pagina's in geladen. Voor de foto's wil ik dat de pagina content.php dynamisch wordt geladen middels de ajax functie.
Deze functie werkt alleen niet dynamisch de pagina wordt namelijk toch opnieuw geladen.
Wat moet ik veranderen zodat het ajax gedeelte wel wordt geladen en niet de gehele pagina.

voorbeeld staat hier online klik hier

stukje jquery
php code - Bekijk de code zonder highlighting - Klap code in 
  1. var klikevent = function() {
  2. 	//$("a").click(function() {
  3. 	var imgid = $(this).find("img").attr('alt');
  4. 	var imggid = imgid;
  5. 	var imgides = escape(imgid)
  6.  
  7. 	var string = imgides;
  8. 		$.ajax({
  9.    		type: "GET",
  10.    		url: "ajax/content.php",
  11. 		//data: string,
  12.    		data: {var1: string, var2: imggid },
  13. 		//data: { string, test: imggid },
  14.    		cache: false,
  15. 		dataType: "html",
  16. 		success: function(data){
  17. 			$(".content").html(data);
  18. 		}
  19.  
  20. 	});
  21.  
  22. }

3 antwoorden

Gesponsorde links
Offline shamrock - 23/08/2014 13:53
Avatar van shamrock Lid Volgens mij werkt het gewoon zonder refresh, alleen heb je de link in de foto als: # gezet, daardoor spring je naar boven op de pagina. Vervang dat door

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href='javascript:void(0);'>


en je zult op dezelfde positie blijven
Offline Thomas - 23/08/2014 13:56
Avatar van Thomas Moderator Als de link niet gevolgd moet worden, dan moet je er voor zorgen dat het default gedrag van het klikken op een link (dit is het "volgen" van de link) niet uitgevoerd wordt.

Dit doe je doorgaans via het event:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $().ready(function() {
  2.     $('... selectie van de juiste hyperlinks ...').click(function(e) {
  3.         e.preventDefault(); // deze regel zorgt ervoor dat de link niet gevolgd wordt
  4.         // ... de rest van je code ...
  5.     });
  6. });


Ik neem ook aan dat je jQuery in een "ready" blok staat?

Daarnaast is het wellicht ook een idee om de bewuste hyperlinks te voorzien van een href die er voor zorgt dat je sowieso nergens naartoe navigeert, dit doe je doorgaans met:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="javascript:void(0)">klikken op deze link doet sowieso niets</a>


Dit zou in principe ook een complete alternatieve oplossing zijn, je hebt in dit geval niet meer per se e.preventDefault() nodig denk ik.
Offline recruity - 23/08/2014 14:05
Avatar van recruity Nieuw lid hartelijk dank

<a href="javascript:void(0)">

dit was inderdaad de oplossing weer wat geleerd
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.186s