Conseils commandes AJAX

Bonjour à tous.

Je suis nouveau sur le forum, veuillez me pardonner si j'ai loupé une étape de présentation ou autre.

Je suis en plein dans un projet et j'ai la tête qui va exploser.

Le but consiste à contrôler l'application Foobar2000 via HTTP à l'aide de ce projet là:

http://www.hydrogenaudio.org/forums/...howtopic=62218

Je souhaite contrôler mon foobar via le browser internet de ma PSP.(Frontnet je crois...).

Les templates d'origine sont parfait, juste à créer de nouveaux boutons et réarranger le tout pour avoir une interface personnalisée. C'est en html et en css.

Donc j'entre les commandes, si je sais pas je chercher, c'est pas bien compliqué. J'ai quelques notions en html/css.

Le seul "hic" c'est le javascript. Il faudrait que je l'apprenne en entier mais le temps me manque cruellement. Alors j'essaie d'apprendre fonction par fonction mais bon... Et dire que je voulais me lancer dans l'apprentissage de python et du C ....

Enfin bref. Le problème est que les requêtes que j'envoie via mon navigateur vers mon "serveur Foobar" rafraichisse ensuite ma page. Ce n'est pas un problème pour un navigateur sur PC, mais sur la PSP...

J'appuie sur mon icone lecture, et toute la page se rafraichis, vraiment pas classe. Alors j'ai pris connaissance d'AJAX. Il y a d'ailleurs sur la page du projet quelques templates avec ces commandes. Problème, elles ne fonctionnent pas sur ma PSP.

Alors je voudrais adapter mon template perso avec des commandes AJAX pour que la page entière ne soit plus rafraichie dès que j'appuie sur les touches lecture, pause, etc... Rien que d'y penser j'ai mal au crâne.

Ca fait des jours que je fais du DOS, maintenant l'HTML et le javascript:aie:

J'adore apprendre donc ça va. Voici mon code HTML et Javacript:

Code:

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 Transitional//EN">
<html><head><title>Mon Index Foobar 2000</title>
 
 
 
<script type="text/javascript" src="script.js"></script> <!--Ligne importe le javascript à partir d'un fichier -->
 
<link rel="stylesheet" type="text/css" href="style.css" /> <!--Ligne importe le style CSS à partir d'un fichier-->
</head><body onload="mouse_capture_init(); fit();" onresize="fit();">
<form action="/" method="get" name="cmd_form" target="_self" class="frm">
 
<div>
<!--Ces 6 lignes sont les icones-->
<input name="Stop" title="Stop Playback" type="image" src="stop.png"  ;width="50"; height="50"; class="stop" ; onclick="pc(this.name);">
<input name="PlayOrPause" title="Pause/resume playback" type="image" src="pause.png" width="50" ; height="50" ; onclick="pc(this.name);">
<input name="Start" title="Start playback" type="image" src="lecture.png" width="50" ; height="50" ; onclick="pc(this.name);">
<input name="StartPrevious"  title="Play previous track" type="image" src="precedent.png" width="50" ; height="50" ; onclick="pc(this.name);">
<input name="StartNext" title="Play next track" type="image" src="suivant.png" width="50" ; height="50" ; onclick="pc(this.name);">
<input name="StartRandom" title="Play random track" type="image" src="random.png" width="50" ; height="50" ; onclick="pc(this.name);">
<select title="Playback order" onchange="pc('PlaybackOrder',this.value);">[PLAYBACK_ORDER_OPTION]</select><!--Boite de dialogue changer l'ordre de lecture-->
<select title="Volume level" onchange="pc('Volume',this.value);">[VOLUME_OPTION]</select>%<!--Changement de son-->
<p>
 
<select title="Playlist actions" id="Actions" style="background-color: #eeeeee;" onchange="act=this.selectedIndex;"><option>Start</option><option>Enqueue</option><option>Dequeue</option><option>Focus</option><option>Delete</option></select>
<input name="EmptyPlaylist" title="Empty playlist" type="button" value="—" onclick="if (confirm('Empty active playlist?')) pc(this.name); else return false;">
<select title="Playlists" onchange="pc('SwitchPlaylist',this.value);">[PLAYLISTS_OPTION]</select>
<a href="/?cmd=Browse">[&nbsp;...&nbsp;]</a>
</p>
<p><input type="text" size="9" style="width: auto" onkeypress="document.cmd_form.cmd.value='SearchMediaLibrary'; document.cmd_form.param1.value=this.value;" value="[SEARCH_REQUEST]">
<input name="QueryRetrace" title="Retrace/init query" type="button" value=" < " onclick="pc(this.name);">
<select title="Media library query" id="QueryAdvance" onchange="pc('QueryAdvance',this.value);">[QUERY_OPTION]</select>&nbsp;[QUERY_INFO]</p>
<br><p id="npstr"><span id="npd" style="white-space: nowrap;" onclick="np_onclick();"><span id="np" class="npc">&nbsp;</span><span id="track_title" class="track">[HELPER1]</span>&nbsp;<span id="t_time" class="track"></span></span>&nbsp;&nbsp;</p>
<p><span id="status"></span>&nbsp;<font size="-2" color="#ababab">[HELPER3]</font></p>
</div>
<input name="cmd" type="hidden" value=""><input name="param1" type="hidden" value="">
<p>[PLAYLIST_PAGES]</p>
<div id="playlist" style="border-top: 1px solid #000000; clear: both; z-index: +1; ">
<table id="pl">
[PLAYLIST]
<tr><td id="totals"></td><td class="playlist_time">[PLAYLIST_TOTAL_TIME]</td><td class="playlist_time">[QUEUE_TOTAL_TIME]</td></tr>
</table>
</div>
<!--[PGT]s-->
</body>
</html>

Code:

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
var mouseX = 0;
var p_key = 0;
var act = 0;
 
function KeyPress(e) { 
	p_key = e; 
	if (p_key == 16) // shift -- focus
		act = 3;
	else if (p_key == 17) // ctrl -- remove
		act = 4;
	else if (p_key == 81) // q -- enqueue
		act = 1;
	else if (p_key == 87) // w -- dequeue
		act = 2;
	else
		act = 0;
	document.getElementById('Actions').selectedIndex = act;
}
 
function pad(str, chr, count) {
	var str_out = str.toString();
	while (str_out.length < count)
		str_out = chr + str_out;
	return str_out;
}
 
function pc(c, p) {
	var com = c || ''; var par = p || '';
	with (document.cmd_form)
	{
		cmd.value = com;
		param1.value = par;
		submit();
	}
}
 
function format_time(time) {
	mins = Math.floor(time / 60);
	secs = pad(time % 60, '0', 2);
	return mins+":"+secs;
}
 
function set_t_pos(time) { 
	var str = format_time(time) + " / ";
	document.getElementById("t_time").innerHTML = str + ( [ITEM_PLAYING_LEN] > 0 ? format_time([ITEM_PLAYING_LEN]) : '?' );
}
 
function set_np_width(t_sec, t_length) {
	var np_width = document.getElementById("npd").offsetWidth;
	np_width = np_width < 100 ? 100: np_width;
	document.getElementById('np').style.width=Math.floor(np_width * t_sec / t_length) + "px";
}
 
function t_playback_timer(t_sec, t_length) {
	if (t_sec <= t_length && t_length != 0)
	{
		set_t_pos(t_sec);
		if (t_length != 0)
			set_np_width(t_sec, t_length);
		setTimeout('t_playback_timer('+(t_sec+1)+','+t_length+')',1000);
	}
}
 
function a(track) { // do a(ction) on clicked entry
	if (act == 0)		pc('Start', track);
	else if (act == 1)	pc('QueueItems', track);
	else if (act == 2)	pc('DequeueItems', track);
	else if (act == 3)	pc('MoveCursor', track);
	else if (act == 4)	pc('Del', track);
}
 
function np_onclick() {
	with (document)
		pc('Seek', Math.round((mouseX-getElementById("np").offsetLeft)*100 / (getElementById("npd").offsetWidth)) );
}
 
function mouse_capture_init() {
	if (document.layers? true : false)
		captureEvents(Event.MOUSEMOVE)
	document.onmousemove = handleMouseMove;
}
 
function handleMouseMove(evt) {
	if (evt)
		mouseX=evt.clientX;
	else
	if (event)
	    mouseX=event.x;	
	return false;
}
 
function fit() {
	with (document.getElementById('playlist'))
	{
		style.position = 'static'; // important for the onresize event
		style.overflowY = 'auto';
		style.top = offsetTop + 'px';
		style.left = offsetLeft + 'px';
		style.right = offsetLeft + 'px';
		style.bottom = '8px'; // fit this to your taste
		style.position = 'fixed';
 
		var npelem = document.getElementById("nowplaying");
		if (npelem)
		{
			scrolltop = npelem.offsetTop - offsetHeight/2;
 
			if (scrolltop > 0)
				scrollTop = scrolltop;
		}
	}
}
 
document.onkeydown = function(evt) { KeyPress(evt?evt.keyCode:event.keyCode); }
with (document)
{
	act = [LAST_ACTION];
	getElementById('Actions').selectedIndex = act;
    var i_p;
    if ('[PLAYLIST_ITEM_PLAYING]' != '?')
      i_p = parseInt('[PLAYLIST_ITEM_PLAYING]') + 1;
    else
      i_p = '?';
 
if ([IS_PLAYING]) { // start progressbar if playing
	t_playback_timer([ITEM_PLAYING_POS],[ITEM_PLAYING_LEN]);
 
 
    {
        if (([ITEM_PLAYING_LEN]>0) && ([ITEM_PLAYING_POS] < [ITEM_PLAYING_LEN]) )
            setTimeout('pc()',([ITEM_PLAYING_LEN]-[ITEM_PLAYING_POS])*1000 + 500);
        else
        if (([ITEM_PLAYING_POS] > [ITEM_PLAYING_LEN]) )
            setTimeout('pc("RefreshPlayingInfo")',15000);
        else
        if ('[ITEM_PLAYING_LEN]' == '[ITEM_PLAYING_POS]' && '[ITEM_PLAYING_LEN]' != '?' && '[ITEM_PLAYING_LEN]' != '0')
            setTimeout('pc()',500);
    }
 
	getElementById('status').innerHTML = '[ Playing ' + i_p +  ' / [PLAYLIST_PLAYING_ITEMS_COUNT] ]';
}
else if ([IS_PAUSED]) { // adjust progressbar width if paused
	set_np_width([ITEM_PLAYING_POS], [ITEM_PLAYING_LEN]);
	set_t_pos([ITEM_PLAYING_POS]);
	getElementById('status').innerHTML = '[ Paused ' + i_p + ' / [PLAYLIST_PLAYING_ITEMS_COUNT] ]';
} else { // hide unnecessary track info if stopped
	counter = getElementById("counter");
	if (counter)
		counter.innerHTML = "";
	getElementById("status").innerHTML = "[ Stopped ]";
	getElementById("npstr").style.visibility = "hidden";
}
 
if ([IS_ENQUEUEING] && ('[AUTO_REFRESH]' != '') ) {
	getElementById('status').innerHTML = '[ Enqueuement in progress ] ' + getElementById('status').innerHTML;
	setTimeout('pc()',5000);
}
 
track = getElementById("track_title");
 
if (track && track.innerHTML == '' && ([IS_PLAYING] || [IS_PAUSED]) && ('[AUTO_REFRESH]' != '')) // if playing but track info is not loaded yet, reload page
	setTimeout('pc()',500);
 
npp = getElementById("np");	// adjust progressbar width and height, and opacity hack for IE6
if (npp)
with (npp.style) {
	if (getElementById("np").offsetHeight >= 2 )
		height=getElementById("np").offsetHeight*2-2+"px";
	left=getElementById("npd").offsetLeft+"px";
	filter = "alpha(opacity=50)";
}
}

Je suis vraiment largué. L'auteur du projet est vraiment sympa, il répond vite, mais il parle anglais et même si je me débrouille pas mal j'ai mes limites.

Donc voilà le topo. J'espère que je ne passerais pas pour un gros boulet car j'aurais du apprendre le javascript à partir du début. J'ai un gros défaut, j'aime pas apprendre la théorie je préfère passer à la pratique, expérimenter, tester, etc... Mais comme je l'ai dit, j'ai mes limites.

Merci d'avance pour votre aide.

Cordialement.