[Yahoo UI] History Manager : hash qui disparait [Résolu]

j0hnmerrick · 16/10/2007, 16h57

Bonjour

Voilà j'essai de me servir de l'api History Manager de yui,
je suis parti de l'exemple http://developer.yahoo.com/yui/examp...-calendar.html
et j'essai de rajouter 3 liens plus bas pour atteindre des dates spécifiques

ainsi j'ai crée des <a href > du genre

Code :

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

<a href='#' onclick="nav('11_2008')"> 11_2008 </a> <br/>

avec

Code :

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

1
2
3
4
5
6
7
function nav(num) {
    var currentState = YAHOO.util.History.getCurrentState( "calendar" );
     label = num;
    if ( label != currentState ){
        YAHOO.util.History.navigate( 'calendar', label );
    }
}

et bien ca ne marche pas
si je lance sans le mode debugger, j'arrive dans la méthode enregistrée dans le YAHOO.util.History.register( "calendar", initialCalendarState, register);

avec un état qui est à l'état initial

soit je lance en debugger, et là le pas à pas me fait constater que le hash de l'url est dans un premier temps bien mis a jour. Mais une fois la méthode nav terminée, le hash est remis à vide (et là je sais pas du tout pourquoi, il passe dans aucun top.location.hash
et c'est à ce moment que la thread d'yui détecte le changement du hash, rejout le register, et donc me remet à l'état initial.
Je sais pas si je suis très clair, mais là je comprend vraiment pas trop ce qui se passe.

Je vous met mon code, si quelqu'un qui a déja utilisé l'history manager pouvait jeter un oeil

je viens de remarquer que tout marche bien sous ie. c'est bien sous firefox que j'arrive à rien.

merci

l'index.html

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Calendar Control</title>
 
<style type="text/css">
body {
    margin:0;
    padding:0;
}
</style>
 
<link rel="stylesheet" type="text/css" href="/js/yui/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="/js/yui/calendar/assets/skins/sam/calendar.css" />
<script type="text/javascript" src="/js/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/
js/yui/calendar/calendar.js"></script>
<script type="text/javascript" src="/js/yui/history/history-beta.js"></script>
<script language="JavaScript1.1" type="text/javascript" src="js/../jsp/test.js"></script>
 
 
<!--there is no custom header content for this example-->
 
</head>
 
<body class=" yui-skin-sam">
 
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
 
<script>
init();
</script>
<div id="container">
  <div id="calendarContainer"></div>
</div>
<a href='#' onclick="nav('11_2008')"> 11_2008 </a> <br/>
<a href='#' onclick="nav('11_2009')"> 11_2009 </a> <br/>
<a href='#' onclick="nav('11_2010')"> 11_2010 </a> <br/>
<a href='#' onclick="nav('11_2011')"> 11_2011 </a> <br/>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
<div id="divTest">
en attente
</div>
</body>
</html>

le fichier js associé

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
function nav(num) {
    var currentState = YAHOO.util.History.getCurrentState( "calendar" );
     label = num;
     var b
    if ( label != currentState ){
        b = YAHOO.util.History.navigate( 'calendar', label );
    }
     document.getElementById("divTest").innerHTML = "page : " + num;
}
 
 
function register( state ){
     alert("register : " + state);
    calendar.cfg.setProperty( "pagedate", state.replace( "_", "/" ) );
    calendar.render();
} 
 
 
function init() {
    // The initial month will be chosen in the following order:
    //
    // URL fragment identifier (it will be there if the user previously
    // bookmarked the application in a specific state)
    //
    //         or
    //
    // today's corresponding month (default)
 
    var today = new Date();
    var defaultCalendarState = ( today.getMonth() + 1 ) + "_" + today.getFullYear();
    var bookmarkedCalendarState = YAHOO.util.History.getBookmarkedState( "calendar" );
    var initialCalendarState = bookmarkedCalendarState || defaultCalendarState;
 
    var calendar;
 
 
    YAHOO.util.History.register( "calendar", initialCalendarState, register);
    YAHOO.util.History.onLoadEvent.subscribe(subscribe);
 
 
    YAHOO.util.History.initialize();
}
 
 
function subscribe() {
        var currentState = YAHOO.util.History.getCurrentState( "calendar" );
        var startDate = { pagedate: currentState.replace( "_", "/" ) };
 
        // Instantiate the calendar control...
        calendar = new YAHOO.widget.Calendar( "calendar", "calendarContainer", startDate );
        calendar.beforeRenderEvent.subscribe( handleCalendarBeforeRender, calendar, true );
        calendar.render();
    }
 
 
    function handleCalendarBeforeRender() {
        var calDate = calendar.cfg.getProperty( "pageDate" );
        var pageDate = ( calDate.getMonth() + 1 ) + "_" + calDate.getFullYear();
        nav(pageDate)
    }

j0hnmerrick · 16/10/2007, 17h18

je vous rajoute juste une page pas compliquée qui marche sous ie mais qui a le même problème sous firefox.

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 
<link rel="stylesheet" type="text/css" href="./yui/fonts/fonts-min.css" />
<script type="text/javascript" src="./yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="./yui/calendar/calendar.js"></script>
<script type="text/javascript" src="./yui/history/history-beta.js"></script>
</head>
 
<body>
 
<script>
 
var defaultState = "0";
var bookmarkedState = YAHOO.util.History.getBookmarkedState( "test" );
var initialState = bookmarkedState || defaultState;
 
YAHOO.util.History.register( "test", initialState, function( state ) {
	document.getElementById("divState").innerHTML = state;
} );
 
YAHOO.util.History.onLoadEvent.subscribe( function() {
    var currentState = YAHOO.util.History.getCurrentState( "test" );
} );
 
YAHOO.util.History.initialize();
 
function nav(num) {
 	 var currentState = YAHOO.util.History.getCurrentState( "test" );
	 if ( num != currentState ) {
		 YAHOO.util.History.navigate( "test", num );
	 }
}
 
</script>
<a href='#' onclick="nav('1')"> test 1 </a> <br/>
<a href='#' onclick="nav('2')"> test 2 </a> <br/>
<a href='#' onclick="nav('3')"> test 3 </a> <br/>
<a href='#' onclick="nav('4')"> test 4 </a> <br/>
<div id="divState"></div>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
 
</body>
</html>

denisC · 16/10/2007, 20h55

Tu dois inhiber l'action des liens. Apparement, c'est fait sous IE, mais pas sous FFx...

Code html :

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

1
2
3
4
<a href='#' onclick="nav('1'); return false;"> test 1 </a> <br/>
<a href='#' onclick="nav('2'); return false;"> test 2 </a> <br/>
<a href='#' onclick="nav('3'); return false;"> test 3 </a> <br/>
<a href='#' onclick="nav('4'); return false;"> test 4 </a> <br/>

Et hop, ça marche sous FFx

j0hnmerrick · 17/10/2007, 09h20

yep ca marche merci :-D

du coup y'a aussi ca qui passe

Code :

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

1
2
3
4
<a  onclick="nav('1');"> test 1 </a> <br/>
<a  onclick="nav('2');"> test 2 </a> <br/>
<a onclick="nav('3');"> test 3 </a> <br/>
<a  onclick="nav('4');"> test 4 </a> <br/>

tu me tires une belle épine du pied là dessus

merci

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email