Envoyer une commande sans rafraichir la page...

PlanetSmasher Messages postés 1 Date d'inscription samedi 24 octobre 2009 Statut Membre Dernière intervention 24 octobre 2009 - 24 oct. 2009 à 18:08
jdmcreator Messages postés 647 Date d'inscription samedi 30 décembre 2000 Statut Membre Dernière intervention 20 juillet 2012 - 8 nov. 2009 à 23:42
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/index.php?showtopic=62218" http://www.hydrogenaudio.org/forums/index.php?showtopic=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:

<!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>
<form action="/" method="get" name="cmd_form" target="_self" class="frm">



<!--Ces 6 lignes sont les icones-->






<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-->


<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>

<select title="Playlists" onchange="pc('SwitchPlaylist',this.value);">[PLAYLISTS_OPTION]</select>
[/?cmd=Browse [ ... ]]




<select title="Media library query" id="QueryAdvance" onchange="pc('QueryAdvance',this.value);">[QUERY_OPTION]</select> [QUERY_INFO]



 [HELPER1]   


 [HELPER3]





[PLAYLIST_PAGES]




[PLAYLIST]
----
, [PLAYLIST_TOTAL_TIME], [QUEUE_TOTAL_TIME]



<!--[PGT]s-->

</html>


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.

A noter qu'il existe un projet "ngRC" qui controle Media Center via un navigateur internet. Le problème c'est que c'est tout en jvs avec des renvois vers une page qui renvois vers une autre et plein de code javascript, je n'arrive pas à m'y retrouver.

Ce dernier fonctionne par contre correctement. L'auteur à mis les boutons sur une image, j'affiche cette image avec les contrôles 'play', 'next', etc... Et lorsque je presse une touche, la commande s'execute mais la page reste fixe. Que c'est bon

J'ai fait mes propres icones, j'aimerais trouvé une solution qui me permette de les garder.

Merci d'avance pour votre aide. Vous êtes comme Luke, mon dernier espoir.

Cordialement.


"Ce qui ne nous tue pas nous rend plus .... bizard."

"Ceux qui n'ont rien se contentent de peu, ceux qui ont tout ne se contentent de rien..."

1 réponse

jdmcreator Messages postés 647 Date d'inscription samedi 30 décembre 2000 Statut Membre Dernière intervention 20 juillet 2012 7
8 nov. 2009 à 23:42
Bon, j'avoue que je n'ai pas lu au complet et que je n'ai pas regardé le code. Mais je peux faire un essai

Pour faire un appel de page sans rafraîchir la page, il existe xmlHttpRequest

Sinon, si la commande est dans un lien, tu peux rajouter "return false" à la fin

ex :

TEST

N'oublie pas que tu peux passer une commande dans un lien en commençant par "javascript:commande()"

JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
fr.jsinfo.wikia.com
0
Rejoignez-nous