jQuery - Event na laden externe data

Status
Niet open voor verdere reacties.
M

MrLee86

Gebruiker
Lid geworden
11 mei 2007
Berichten
41
Hallo allemaal,

Ik heb een simpel jquery scriptje geschreven, maar het werkt nog niet helemaal goed. Nu ben ik (nog) niet zo'n ster in jquery, maar dit is mijn probleem:

1. Als ik op refresh druk, wordt de loader div geladen
2. Vervolgens wordt de externe data geladen
3. Na het laden van de data wordt de loader weer uitgezet en de refresh div weer geladen.

Het probleem is dat puntje 3 (van hierboven) niet pas gebeurd als de data geladen is, maar al veel eerder. Hoe kan ik ervoor zorgen dat dit pas gebeurd als de data ook echt geladen is?

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script>
$(document).ready(function() {  
  
    $('#refresh').click(function(){  
		$('#refresh').fadeOut('normal');
		$('#loader').fadeIn('normal',loadContent)
		
		function loadContent() {  
        	$('#content').load('http://www.url.nl/?val=something','',hideLoader())  
    	}  
    	function hideLoader() {
			$('#loader').fadeOut('normal');
			$('#refresh').fadeIn('normal');	
		}
							  
	});
});
</script>

</head>

<body>

<span id="refresh" style="display: block;">Refresh</span><span id="loader" style="display: none;">Loading</span>
<div id="content">hier komt de content</div>

</body>
</html>

Kan iemand van jullie mij hiermee verder helpen?

Alvast bedankt!
 
Zoals de meeste oplossingen, was ook deze oplossing simpel. Na een tijdje trial-en-error ben ik uitgekomen op het volgende script dat voor mij werkt.

PHP: 
<script>
$(document).ready(function() { 
	$('#refresh').click(function() {
	$('#refresh').fadeOut('normal');
	$('#loader').fadeIn('normal',showContent);
	function showContent() {					  
		$.getJSON("data.php?id=gebruikersnaam&jsonp_callback=?",
			function(data){
				alert(data.platinum);
				hideLoader();
			}
		);
		
	}
	
	function hideLoader() {
		$('#loader').fadeOut('normal',showRefresh);
	}
	
	function showRefresh() {
		$('#refresh').fadeIn('normal');
	}
	});
});
</script>
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan