Discussion :

[vagners]

Bonjour à tous

J'ai un soucis d'événements javascript, mon but étant d'utiliser le script suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
var url = 'http://demos.mootools.net/demos/Ajax_Timed/ajax_timed.php';
 
// refresh every 4 seconds
var timer = 4; 
// periodical and dummy variables for later use
var periodical, dummy; 
var start = $('start'), stop = $('stop'), log = $('log_res');
 
/* our ajax istance */
var ajax = new Ajax(url, { 
	update: log,
	method: 'get',
	onComplete: function() {
		// when complete, we remove the spinner
		log.removeClass('ajax-loading'); 
	},
	onCancel: function() {
		// when we stop timed ajax while it's requesting
		// we forse to cancel the request, so here we
		// just remove the spinner
		log.removeClass('ajax-loading'); 
	}
});
 
/* our refresh function: it sets a dummy to prevent 
   caching of php and add the loader class */
var refresh = (function() {
	// dummy to prevent caching of php
	dummy = $time() + $random(0, 100);
	// we add out fancy spinner
	log.empty().addClass('ajax-loading');
	// requests of our php plus dummy as query
	ajax.request(dummy); 
}); 
 
// start and stop click events
start.addEvent('click', function(e) {
	// prevent default
	new Event(e).stop(); 
	// prevent insane clicks to start numerous requests
	$clear(periodical); 
 
	/* a bit of fancy styles */
	stop.setStyle('font-weight', 'normal');
	start.setStyle('font-weight', 'bold');
	log.empty().addClass('ajax-loading'); 
	/* ********************* */
 
	// the periodical starts here, the * 1000 is because milliseconds required
	periodical = refresh.periodical(timer * 1000, this); 
 
	// this is the first only request, later on will be only the periodical and refresh 
	// that do the request. If we don't do this way, we have to wait for 4 seconds before 
	// the first request.
	ajax.request($time()); 
});
 
stop.addEvent('click', function(e) {
	new Event(e).stop(); // prevent default;
 
	/* a bit of fancy styles 
	   note: we do not remove 'ajax-loading' class
             because it is already done by 'onCancel'
			 since we later do 'ajax.cancel()'
	*/
	start.setStyle('font-weight', 'normal');
	stop.setStyle('font-weight', 'bold');
	/* ********************* */
 
	// let's stop our timed ajax
	$clear(periodical); 
	// and let's stop our request in case it was waiting for a response
	ajax.cancel(); 
});

l'html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div id="form_box">
	<ul>
		<li><a id="start" href="#">start</a></li>
		<li><a id="stop" href="#">stop</a></li>
	</ul>
</div>
<div id="log">
	<h3>Ajax Response</h3>
	<div id="log_res"><!-- spanner --></div>
</div>
<span class="clr"><!-- spanner --></span>

Il fonctionne sur mon site mais je voulais que le script ne se lance pas sur l'action du bouton start, mais au chargement de la page.
J'ai essayé de remplacer 'click' par 'onLoad' à la ligne 25 mais rien y fait.
Voila je ne connais pas très bien JS si quelqu'un pouvait m'aider il serrait le bienvenu .
La source ce trouve là:
http://demos.mootools.net/Ajax_Timed

[Ikonic]

Salut,

peut-être en insérant à la fin de ton javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
window.onload = function() {
  return Try.these(
    function() { return $('start').onclick() }
  ) || false;  
};

[vagners]

salut ikonic,
J'ai essayé de rajouter ton code que j'avou ne pas bien comprendre, mais rien à faire il faut toujours cliquer sur start pour lancer le script ...

[Ikonic]

Salut,

Mon code veut dire qu'une fois que la page est chargée, cela essaie de déclencher l'événement qui est attribué à start.
Je n'utilise pas mootools, mais il me semblait que ce framework était basé sur protoype.js.
Désolé...
Donc en allant regardé dans la doc de mootools, il est précisé que tu peux spécifier load pour l'événement à attribuer.

(Voir http://docs.mootools.net/Element/Ele...ement.addEvent)

Donc essaie ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
// start and stop click events
start.addEvent('load', function(e) {
	// prevent default
	new Event(e).stop(); 
	// prevent insane clicks to start numerous requests
	$clear(periodical); 
 
	/* a bit of fancy styles */
	stop.setStyle('font-weight', 'normal');
	start.setStyle('font-weight', 'bold');
	log.empty().addClass('ajax-loading'); 
	/* ********************* */
 
	// the periodical starts here, the * 1000 is because milliseconds required
	periodical = refresh.periodical(timer * 1000, this); 
 
	// this is the first only request, later on will be only the periodical and refresh 
	// that do the request. If we don't do this way, we have to wait for 4 seconds before 
	// the first request.
	ajax.request($time()); 
});

remplace le click par load et non onLoad , comme tu avais essayé, puisqu'il est écrit "sans le préfixe on".

[Ikonic]

Si ça ne marche pas (ce qui ne m'étonnerait pas car l'événement onLoad n'est pas supporté par les balises <li>), essaie alors ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
var url = 'http://demos.mootools.net/demos/Ajax_Timed/ajax_timed.php';
 
// refresh every 4 seconds
var timer = 4; 
// periodical and dummy variables for later use
var periodical, dummy; 
var start = $('start'), stop = $('stop'), log = $('log_res');
 
/* our ajax istance */
var ajax = new Ajax(url, { 
	update: log,
	method: 'get',
	onComplete: function() {
		// when complete, we remove the spinner
		log.removeClass('ajax-loading'); 
	},
	onCancel: function() {
		// when we stop timed ajax while it's requesting
		// we forse to cancel the request, so here we
		// just remove the spinner
		log.removeClass('ajax-loading'); 
	}
});
 
/* our refresh function: it sets a dummy to prevent 
   caching of php and add the loader class */
var refresh = (function() {
	// dummy to prevent caching of php
	dummy = $time() + $random(0, 100);
	// we add out fancy spinner
	log.empty().addClass('ajax-loading');
	// requests of our php plus dummy as query
	ajax.request(dummy); 
}); 
 
stop.addEvent('click', function(e) {
	new Event(e).stop(); // prevent default;
 
	/* a bit of fancy styles 
	   note: we do not remove 'ajax-loading' class
             because it is already done by 'onCancel'
			 since we later do 'ajax.cancel()'
	*/
	start.setStyle('font-weight', 'normal');
	stop.setStyle('font-weight', 'bold');
	/* ********************* */
 
	// let's stop our timed ajax
	$clear(periodical); 
	// and let's stop our request in case it was waiting for a response
	ajax.cancel(); 
});
 
 
// start and stop click events
document.body.addEvent('load', function(e) {
	// prevent default
	new Event(e).stop(); 
	// prevent insane clicks to start numerous requests
	$clear(periodical); 
 
	/* a bit of fancy styles */
	stop.setStyle('font-weight', 'normal');
	start.setStyle('font-weight', 'bold');
	log.empty().addClass('ajax-loading'); 
	/* ********************* */
 
	// the periodical starts here, the * 1000 is because milliseconds required
	periodical = refresh.periodical(timer * 1000, this); 
 
	// this is the first only request, later on will be only the periodical and refresh 
	// that do the request. If we don't do this way, we have to wait for 4 seconds before 
	// the first request.
	ajax.request($time()); 
});

[vagners]

En fait j'avai deja essayé avec load au lieu de onLoad .. biensur ca ne marche pas. Mais si c'est qu'un souci de balise <li> ca peu pas s'arranger ?

Sinon j'ai essayé ton bout de code :http://www.pissonchurch.com/test.php
pas de résultat !
Voila en tout cas merci de répondre ikonic a+

[vagners]

Ok désolé, la solution :
// start and stop click events
/* start.addEvent('click', function(e) {
// prevent default
new Event(e).stop();*/
// prevent insane clicks to start numerous requests
$clear(periodical);

/* a bit of fancy styles */
/* stop.setStyle('font-weight', 'normal');
start.setStyle('font-weight', 'bold');*/
log.empty().addClass('ajax-loading');
/* ********************* */

// the periodical starts here, the * 1000 is because milliseconds required
periodical = refresh.periodical(timer * 1000, this);

// this is the first only request, later on will be only the periodical and refresh
// that do the request. If we don't do this way, we have to wait for 4 seconds before
// the first request.
ajax.request($time());
/* });
*/
/* stop.addEvent('click', function(e) {
new Event(e).stop();*/ // prevent default;

/* a bit of fancy styles
note: we do not remove 'ajax-loading' class
because it is already done by 'onCancel'
since we later do 'ajax.cancel()'
*/
/* start.setStyle('font-weight', 'normal');
stop.setStyle('font-weight', 'bold');*/
/* ********************* */

// let's stop our timed ajax
/* $clear(periodical);
log.removeClass('ajax-loading');
// and let's stop our request in case it was waiting for a response
ajax.cancel();
});*/