Execution Ajax sur un onclick qui quitte la page

Version imprimable

Bonjour à tous,

J'imagine que le sujet a été traité plus d'une fois, mais je ne trouve rien sur le forum.

Voici mon problème, très bête.
Voici mon code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 $(document).ready(function() { $(".menu-title").click(function() { $.ajax({ url: "../themes/leometr/ajax/clear_cookie_settings.php", success: function(){ alert('success'); }, error: function(){ alert('failure'); } }); }); });
$(".menu-title").click(function() me dirige vers une nouvelle page. (Je n'ai pas le choix, je dois passer par cette fonction pour exécuter ma commande.)

Lorsque je mets un alert('n'importe quoi'); après le ajax, il s’exécute correctement avant de quitter la page, lorsque je n'en mets pas, l'ajax ne s’exécute pas.

(J'imagine qu'il y a besoin d'une pause avant de quitter la page... qui se met lorsque je mets mon alert)

Si vous avez la solution, Merci !

18/07/2013, 17h52
DJ Caësar 9114

Bonjour,
Il manque quand même un gros bout de code pour qu'on comprenne ce qui cloche.
Et dans ton alert, tu échappes bien l'apostrophe?

Quand je fais ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<script type="text/javascript">
$(document).ready(function() {
   $(".menu-title").click(function() {
		$(window).bind('beforeunload', function(e) {    
			var lol = "lol";
		});
		$.ajax({
		  url: "../themes/leometr/ajax/clear_cookie_settings.php",
		  success: function(){
			alert('success');
		  },
		  error: function(){
			alert('failure');
		  }
		});
 
  	});
 
});
</script>

La fonction ajax ne s'execute pas (j'ai le failure de retourné en gros)

Et quand je fais ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<script type="text/javascript">
$(document).ready(function() {
   $(".menu-title").click(function() {
		$(window).bind('beforeunload', function(e) {    
			var lol = "lol";
		});
		$.ajax({
		  url: "../themes/leometr/ajax/clear_cookie_settings.php",
		  success: function(){
			alert('success');
		  },
		  error: function(){
			alert('failure');
		  }
		});
 
                alert('toto');
  	});
 
});
</script>

La fonction Ajax s'éxecute, vu que le alert('toto'); bloque ma page avant qu'elle ne se ferme.

18/07/2013, 18h10
dojbouli

la class .menu-title correspond à la classe du <span> qui entourne mon <a href> dans mon menu navbar.

Le Beforeunload ne sert à rien, c'était juste pour un test.
18/07/2013, 19h41
NoSmoking

Bonjour,

Citation:

la class .menu-title correspond à la classe du <span> qui entourne mon <a href> dans mon menu navbar.

il te faut annihiler le comportement par défaut des balises A.

Code:

1
2
3
4
5
$( ".menu-title" ).on( "click", function(){
    //...
 
    return false;
});

Le truc c'est que je souhaite que mon lien soit tout de même exécute...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script type="text/javascript"> $(document).ready(function() { $( ".menu-title" ).on( "click", function(){ $.ajax({ url: "../themes/leometr/ajax/clear_cookie_settings.php" }); return false; }); }); </script>
ce code fonctionne mais le lien n'est pas exécute...

C'est bon j'ai trouvé, merci pour vos indications. (La solution ci-dessous)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<script type="text/javascript">
$(document).ready(function() {
	$( ".menu-cours" ).click(function() {
 
		var oldHref = $('.menu-cours').children('a').attr('href'); // store the old url
		$.ajax({
			url: "../themes/leometr/ajax/clear_cookie_settings.php",
			success: function(reply){
				//Run the default action here if I have to disable the default action
				window.location.href = oldHref; // go to the new url
			},
		});
 
		return false;
 
	});
});
</script>