[ajax] inviare script javascript da server php a client

[Ndr]

ciao a tutti
Uso prototype come framework
Vorrei fare una richiesta da client a server.
Il server risponde con un pulsante e uno script js
il client deve poter utilizzare il nuovo pulsante con la relativa funzione

Ho questa funzione js

function trovaCitta(){
   if ($('selezionaCitta').value == ''){
       $('msgCitta').update("{$ricercaErrore['empty']}");
       $('msgRif').update('');
   }
   else{
    var url = '{$mainurl2}/ricerca/ricercaCitta.php';
    var mainBox = $('mainBox'); 
    var pars = 'citta='+$('selezionaCitta').value+'&Submit=Search';
    clean();
    new Ajax.Request(url, { 
        method: 'post',
        parameters:  pars,
        onSuccess: function(transport) {
         
          new Effect.Fade('load',{duration:0.3});  
          new Effect.Appear('mainBox',{duration:0.1,queue: 'end'});
          $('ricercaButtonRif').enable();
          $('ricercaButtonCitta').enable();
        },
        onComplete: function (transport){
             var json = transport.responseText.evalJSON(true);
          //alert(json[0].pulsante);
          
          //mainBox.update();
          mainBox.innerHTML=json[0].pulsante;
        }
     });
   } 

quindi viene chiamato ricercaCitta.php

 $scriptino[] = array('status'=>"<script language=JavaScript type=text/javascript>
<!--
function trova(){
  alert();
} --> </script>
",'pulsante'=>'
<input type="button" onclick="trova()" name="test" value="test" />');
    header('Content-type: application/x-json'); 
    echo json_encode($scriptino); 

perche' mi visualizza il pulsante e nel codice html vedo la funzione trova, ma premendo il pulsante non accade nulla??
FireBug su firefox dice che non trova la funzione.
Come mai?
spero mi possiate aiutare.
ciao andrea

[artorius]

perché non importi la funzione con gli altri script JS? Secondo me, è molto meglio caricare i JS che varranno utilizzati già nella pagina che effettuare una chiamata AJAX.

Comunque, il motivo per cui non hai la funzione è che la risposta del server non deve essere solo inserita nella pagina, ma anche valutata dall'interpreta Javascript. Per farlo ti conviene usare il metodo di inseriemento di testo di prototype: http://www.prototypejs.org/api/element/insert

[Ndr]

Non funziona.
Appena vede il tag <script> lo cancella e non viene visualizzato neanche nella pagina html.
Ma firebug dice che la risposta dal server e' corretta e che il tag script esiste.

[{"status":"<script>\nfunction trova(){\n  alert();\n}\n<\/script>aa\n","pulsante":"\n<input type=\"button

\" onclick=\"trova()\" name=\"xxxx\" value=\"pulluo\" \/>"}]

ho scritto

onComplete: function (transport){
           var json = transport.responseText.evalJSON(true);
      Element.insert(mainBox,{top: json[0].status + json[0].pulsante});
} 

[artorius]

ma, seriamente, io non la farei così:

Se ho capito bene, tu generi il codice che deve essere eseguito con il click del button lato server, e lo passi in un JSON. Io, allora, la farei, visto che usi prototypejs:

[{"status":"<script>
$('xxxx').observe('click',
function (){
    //Qui ci metti le istruzioni che verranno eseguite
    alert();
});
</script>","pulsante":"
<input type=\"button\" id=\"xxxx\" name=\"xxxx\" value=\"pulluo\" />"}]

Poi fai così

onComplete: function (transport){
      var json = transport.responseText.evalJSON(true);
      Element.insert(mainBox,{top: json[0].pulsante});
      json[0].status.evalScript();
} 

Così di setta l'evento onClick in maniera più pulita di una notazione DOM0 (che tra l'altro farlo tramite AJAX non funziona in IE)

P.S. Ma perché torni un Array di JSON?

[Ndr]

non funziona

php

$scriptino[] = array('status'=>"<script>
$('xxxx').observe('onclick',
//Qui ci metti le istruzioni che verranno eseguite
alert('ho premuto test');
</script>"
        ,
'pulsante'=>'
<input type="button" id="xxxx" name="xxxx" value="test" />');
    header('Content-type: application/x-json'); 
 echo json_encode($scriptino); 

JS

onComplete: function (transport){
            var json = transport.responseText.evalJSON(true);
      Element.insert(mainBox,{top: json[0].pulsante});
      json[0].status.evalScript();

risposta
[{"status":"<script>\n$('xxxx').observe('onclick',\ n\/\/Qui ci metti le istruzioni che verranno eseguite

\nalert('ho premuto test');\n<\/script>","pulsante":"\n<input type=\"button\" id=\"xxxx\" name=\"xxxx

\" value=\"test\" \/>"}]

Il testo viene aggiunto,
ma alla pressione del tasto non accade nulla

[Ndr]

Originariamente inviato da artorius
ma, seriamente, io non la farei così:
P.S. Ma perché torni un Array di JSON?

Come risolveresti la questione?

[artorius]

pensavo sapessi di cosa stavo parlando...

$scriptino = array(
   'status' => "
   <script> 
      $('xxxx').observe('click', function(){
         //Qui ci metti le istruzioni che verranno eseguite 
         alert('ho premuto test'); 
      });
   </script>", 
   'pulsante'=>'<input type="button" id="xxxx" name="xxxx" value="test" />'
); 

header('Content-type: application/x-json'); 
echo json_encode($scriptino); 

[Ndr]

Originariamente inviato da artorius
pensavo sapessi di cosa stavo parlando...

Scusami ma hai visto il mio posto delle 22:43 del 25/10 ?
Ho provato a fare come dici ma continua a non funzionare. E' come se observe non osservasse nulla e non assegnasse l'evento onclick al pulsante.

[artorius]

allora, il problema è che non leggi:

Tuo post:

<script>
$('xxxx').observe('onclick',
//Qui ci metti le istruzioni che verranno eseguite
alert('ho premuto test');
</script>

è sintatticamente scorretto, non funzionerà mai.

Mio post:

<script>
$('xxxx').observe('click', function(){
//Qui ci metti le istruzioni che verranno eseguite
alert('ho premuto test');
});
</script>

All'evento tu devi associare una funzione non un'istruzione

[Ndr]

1000 GRAZIE
ora funziona

ho risolto senza JSON

php (server side)
echo
<script type="text/javascript">
$('searchButton').observe('click',
function search(){
alert('works!!!');
}
);
</script>
<input type="button" name="Submit" value="Search" id="searchButton"/>

------
nel client

function findCity(){
if ($('selectCity').value == ''){
$('msgCity').update("{$findError['empty']}");
$('msgRif').update('');
}
else{
var url = '{$mainurl2}/search/findCity.php';
var mainBox = $('mainBox');
var pars = 'city='+$('selectCity').value+'&Submit=Search';
clean();
new Ajax.Request(url, {
method: 'post',
parameters: pars,
evalScripts: false,
onSuccess: function(transport) {
new Effect.Fade('load',{duration:0.3});
new Effect.Appear('mainBox',{duration:0.1,queue: 'end'});
$('searchButtonRif').enable();
$('searchButtonCity').enable();
},
onComplete: function (transport){
Element.insert(mainBox,{top: transport.responseText});
}
});
}