Topic: Aiuto per creazione search bar!

[ea1987]

Ciao ragazzi mi rivolgo a voi per un aiuto riguardante la creazione di una search bar che si collega alle api di youtube e preleva l' id video del primo video dei risultati della ricerca!
Ho creato una textbox con un comando cerca abbinato:

Codice: [Seleziona]

<label control="textbox" value="Inserisci:" />
<textbox id="cerca-testo" />
<button label="Cerca" oncommand="oggettoToolbar.Search();" />
scrivi nella textbox,premi il pulsante cerca e viene richiamata la funzione Search. Tutto semplice..Di seguito vi posto le 4 funzioni che uso:

Codice: [Seleziona]

function Search()
        {
var testoricerca = document.getElementById('cerca-testo');
            var script = document.createElement('script');
            script.setAttribute('id', 'jsonScript');
            script.setAttribute('type', 'text/javascript');
            script.setAttribute('src', 'http://gdata.youtube.com/feeds/' +
                   'videos?vq='+ testoricerca +'&max-results=20&' +
                   'alt=json-in-script&callback=caricavideo&' +
                   'orderby=relevance&sortorder=descending&format=5&fmt=18');
            
            document.documentElement.firstChild.appendChild(script);

        },

function caricavideo(data)
        {
            var feed = data.feed;

            var entries = feed.entry || [];
var id = (this.prendiVideoId(entries[0].link[0].href));
            var URL = "http://www.youtube.com/watch?v="+id;
this.LoadURL(URL);
      
  },

function prendiVideoId(url)
{
return url.substring(url.indexOf('=')+1,url.lastIndexOf('&'));
},

LoadURL: function(url)
{

window._content.document.location = url;
window.content.focus();
},
Spiegazione: chiamo la Search, essa si connette alle api di youtube passandogli il testo da ricercare, fa la ricerca scaricando dati json, fa una chiamata di callbak alla funzione caricavideo(data) che elabora e estrapola usando la funzione prendivideoid l' id del video e carica una nuova pagina di youtube con quel video.Però non funziona..riuscite a capire il perchè?grazie a tutti!ciao!

[klades]

In Strumenti --> Console degli errori,  trovi qualcosa?
Se non trovi niente, metti un try & catch nella funzione Search e vedi se ti viene fuori qualche errore.

[ea1987]

si mi dice che l' oggettoToolbar non è istanziato..però è stranissimo come errore soprattutto perchè è correttamente istanziato..di fatti non mi funzionan anche altri bottoni sulla toolbar che semplicemente premendoli mi caricano una pagina, sempre usando la funzione loadURL
Che tu sappia ci sono delle restrizioni per la sicurezza imposte da firefox sulle estensioni?Ti chiedo questo perchè su una pagina html che ho fatto, le funzioni cerca e caricavideo funzionan benissimo, mentre qua no..

[klades]

Qual è esattamente l'errore relativo all'oggetto oggettoToolbar?

Che tu sappia ci sono delle restrizioni per la sicurezza imposte da firefox sulle estensioni?

Sì, alcune ce ne sono.

[ea1987]

oggettoToolbar is not defined

[klades]

Beh allora mi sembra inequivocabile...
Bisognerebbe a questo punto vedere tutto il codice dell'estensione.
Puoi renderla disponibile in qualche modo?

[ea1987]

ti ho mandato un pm!!

[klades]

C'è un errore, sicuramente di distrazione, relativo alla sintassi di alcune funzioni, che, essendo definite come metodi di un oggetto, dovrebbe essere così:

Codice: [Seleziona]

Search : function()  
{
            var testoricerca = document.getElementById('cerca-testo');
            var script = document.createElement('script');
            script.setAttribute('id', 'jsonScript');
            script.setAttribute('type', 'text/javascript');
            script.setAttribute('src', 'http://gdata.youtube.com/feeds/' +
                   'videos?vq='+ testoricerca +'&max-results=20&' +
                   'alt=json-in-script&callback=caricavideo&' +
                   'orderby=relevance&sortorder=descending&format=5&fmt=18');
            
            document.documentElement.firstChild.appendChild(script);

        },

caricavideo : function(data)
        {
            var feed = data.feed;

            var entries = feed.entry || [];
var id = (this.prendiVideoId(entries[0].link[0].href));
            var URL = "http://www.youtube.com/watch?v="+id;
this.LoadURL(URL);
      
  },

prendiVideoId : function(url)
{
return url.substring(url.indexOf('=')+1,url.lastIndexOf('&'));
},


[ea1987]

Grazie mille!!!Ora, almeno i bottoni di collegamento a youtube e a lyrics funzionano!Hai invece un idea del perchè non funzioni la ricerca?Tramite console non dà errori..sembrerebbe tutto a posto, anche guardando all' html che ti ho mandato e che invece funziona regolarmente! Ho provato anche con un xmlhttprequest ma il problema di quella chiamata sono le misure di sicurezza imposte da firefox..Non c'è proprio possibilità di fare una chiamata ajax alle api o c'è un errore mio?Grazie mille per le tue celeri risposte!

[klades]

Devi tenere presente che in un'estensione, l'oggetto "window" è browser.xul, mentre la "window" della pagina html e "window.content".

Per "iniettare" uno script nella pagina web attualmente caricata devi quindi agire su "window.content"

Quindi l'equivalente in un'estensione della funzione Search dovrebbe essere questo:

Codice: [Seleziona]

var testoricerca = window.content.document.getElementById('cerca-testo');
            var script = window.content.document.createElement('script');
            script.setAttribute('id', 'jsonScript');
            script.setAttribute('type', 'text/javascript');
            script.setAttribute('src', 'http://gdata.youtube.com/feeds/' +
                   'videos?vq='+ testoricerca +'&max-results=20&' +
                   'alt=json-in-script&callback=caricavideo&' +
                   'orderby=relevance&sortorder=descending&format=5&fmt=18');
            window.content.document.documentElement.firstChild.appendChild(script);

Così c'è però il problema che non puoi riferirti alla funzione "caricavideo", che ovviamente appartiene all'oggetto "window" e non a "window.content".

Secondo me, la cosa pià semplice è che la funzione "Search" trovi, attraverso le API di youtube, l'url del video e poi tu lo passi alla funzione che lo carica.

Perché non usi xmlhttprequest? All'interno dell'estensione non avrai alcuna restrizione. E sarebbe molto più pulito come codice.

[ea1987]

Il problema è che ho già provato con xmlhttprequest ma dà problemi di cross-domain con firefox!Ho fatto questo script seguendo il manuale che ho di ajax (che consiglia di fare degli script invece che xmlhttprequest per evitare problemi appunto di cross-domain); su internet inoltre ho letto che l' unico modo per evitare questo problema era fare un trasferimento di dati json..leggendo quindi sulle api di youtube, per trasferire dati in forma json e usare gli script bisogna avere per forza una funzione di callback!
Ti linko la pagina con la spiegazione:
http://code.google.com/intl/it-IT/apis/youtube/2.0/developers_guide_protocol_api_query_parameters.html
quello di cui parlo è spiegato nella spiegazione del parametro "alt" della query!

[ea1987]

l' xmlhttprequest che ho provato a fare è questo:

Codice: [Seleziona]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>prova titolo</title>

<script type="text/javascript">

function testcollegamento(){

var oxhr = new XMLHttpRequest();
oxhr.open("get", "gdata.youtube.com/feeds/api/videos?q=acdc&orderby=published&start-index=11&max-results=10&v=2", true);
oxhr.onreadystatechange = function (){ // controllo la ricezione dei dati
if (oxhr.readyState == 4){
alert("4, ottenuta la risposta");
}

};
oxhr.send(null);  //invio la richiesta
//alert (oxhr.getAllResponseHeaders());
alert (oxhr.status);
if (oxhr.status == 200){ // se lo stato della risposta è 200
alert("stato 200 ok");
}
else{
alert ("dati non ritornati");
}


//var dati = oxhr.responseText; //responseTEXT restituisce i dati in formato di una stringa unica

//alert(dati);

/*var lunghezza = dati.length;
alert (lunghezza);
var tagliati = (lunghezza - 3);
alert (tagliati);
var stringa = dati.substring(2,3);
alert (stringa);

var sottostringa = dati.substring(10,tagliati) // taglio l' xml per sistemarlo correttamente
var salva = sottostringa.split(" ");
for (var i = 0; i < 5; i ++){
alert (salva[i]);
*/
}


</script>

</head>
<body>
<p>ajax esempio collegamento</p>

<div id="myDiv"></div>
<button type="button" onclick="testcollegamento()">prova</button>
</body>

</html>
Provo a lanciarlo su eclipse ma mi stampa soltanto "4,ottenuta la risposta". I commenti sono cosa a parte, eran delle prove!

Edit By Godai71: Quando inserite del codice, racchiudetelo tra i tag code. Grazie.

[klades]

Dall'interno di un'estensione non hai problemi e limitazioni per il cross-domain.
Fai chiamare dall'interno dell'estensione una cosa tipo questa:

Codice: [Seleziona]

    var testoricerca = content.document.getElementById('cerca-testo');
     var uri = "gdata.youtube.com/feeds/api/videos?q="+testoricerca+"&orderby=published&start-index=11&max-results=10&v=2"
     var req = new XMLHttpRequest();  
      req.open('GET', uri, true);  
   req.onreadystatechange = function (aEvt) {  
if (req.readyState == 4) {  
         if(req.status == 200)  
          alert(req.responseText);  
         else  
          alert("Error loading page\n");  
      }  
   };  
   req.send(null);  

Se la risposta è un file xml, puoi usare responseXML per caricaralo come oggetto document.

[ea1987]

Funziona!Grazie mille dell' aiuto Klades!Veramente, sei stato gentilissimo, veloce e preciso nelle risposte!Davvero, grazie mille!Probabilmente avrò bisogno di altro aiuto fra poco!Chiederò ancora qui invece di stare ad aprire altri post!Grazie mille e buona giornata!Ciao!
Andrea

[klades]

Prego