Variabile di passaggio Javascript nella richiesta href onclick

Question

So che questo è javascript di base, ma per qualche motivo, non riesco a far funzionare la funzione onclick del mio link quando si passa un parametro.

Ho tentato di sfuggire alle virgolette, aggiungendo diversi tipi di virgolette e aggiungendo la variabile grezza come una stringa.

l'ho lavorare con il seguito, ma si dice che "XYZ non è definito"

function renderLink(value, meta, record) 
     { 
      var type = record.data['name']; //value is XYZ 


      return '<a href="javascript:void(0);" onclick="getReport('+type+'); return false;"></a>'; 
     } 

function getReport(type){ 

    alert(type); 
} 

Answer 1

return '<a href="javascript:void(0);" onclick="getReport('+type+'); return false;"></a>'; 

avete bisogno di sfuggire la stringa:

return '<a href="javascript:void(0);" onclick="getReport(\''+type+'\'); return false;"></a>'; 

Answer 2

Se si guarda il rendering HTML, vedrete il problema: Il tuo getReport chiamata simile a questo:

getReport(XYZ); 

sto indovinando si vuole virgolette che, così:

return '<a href="javascript:void(0);" onclick="getReport(\''+type+'\'); return false;"></a>'; 

... che rend ERS:

getReport('XYZ'); 

Live example

Un po 'più esoterico, ma quando l'uscita di un attributo onclick come parte di codice HTML, è ovviamente un attributo HTML, il che significa che è possibile utilizzare le entità carattere. Così si potrebbe utilizzare il " entità:

return '<a href="javascript:void(0);" onclick="getReport(&quot;'+type+'&quot;); return false;"></a>'; 

Live example

faccio notare questo fuori non perché mi raccomando (io non), ma perché è utile ricordare ciò che sta realmente accadendo in un Attributo onclick. Questo è uno dei motivi per cui consiglio vivamente di utilizzare un gestore di eventi appropriato (ad esempio, tramite addEventListener/attachEvent o anche solo assegnare alla proprietà onclick dell'elemento dell'elemento una volta che è stata creata un'istanza).

---

E 'importante notare che questo modo di fare è anche molto sensibile al contenuti di record.data['name']. Ad esempio, considera cosa succede se invece di XYZ è Tom's. L'output della prima opzione sopra sarebbe

getReport('Tom's'); 

... che è ovviamente un problema. Allo stesso modo, se c'è una barra rovesciata nel testo, sarà trattata come un carattere di escape sul risultato, ecc., Ecc.   — un po 'di un campo minato.

Se si può eventualmente modificare la renderLink quindi restituisce un vero e proprio istanziato a elemento piuttosto che una stringa, questo è quello che farei:

function createLink(value, meta, record) 
{ 
    var type = record.data['name'];   // Grab value as of when we were called 
    var link = document.createElement('a'); 

    link.href = "javascript:void(0);"; 
    link.onclick = function() {    // Or even better, addEventListener/attachEvent 
     getReport(type); 
     return false; 
    }; 

    return link; 
} 

che crea il link e una chiusura che accede type senza trasformarlo in testo e viceversa. (Non preoccuparti se non conosci le chiusure, closures are not complicated.)

Live example

Answer 3

getReport riceve XYZ come una variabile non come una stringa, è necessario mettere che le citazioni interne:

return '<a href="javascript:void(0);" onclick="getReport(\''+type+'\'); return false;"></a>';