2012-10-14 5 views
3

J'ai un script ajax travail qui remplit un div sur une page avec des résultats de recherche renvoyés par le serveur. Chaque résultat de recherche a un lien hypertexte avec la deuxième fonction javascript qui définit la valeur d'entrée cachée sur la page pour la publication sur le serveur, en fonction du résultat sur lequel l'utilisateur clique. Tout cela fonctionne bien.javascript remplacer le contenu dans div

Cependant, dans la deuxième fonction javascript, je souhaite également définir le contenu du div d'origine sur la valeur sélectionnée et je n'arrive pas à faire fonctionner ceci.

html à la page de départ

<input type="text" onkeyup="getResults(this.value)"><div id="results"></div> 
<input type="hidden" name="result" value="<div id='chosenresult'></div>"> 

balisage retourné par ajax:

<a href="javascript:void(0);" onclick ="setResult(1)">Result1</a><br> 
<a href="javascript:void(0);" onclick ="setResult(2)">Result2</a><br> 

Javascript pour setResult

function setResult(varname) { 
document.getElementById('chosenresult').value = varname; //WORKS FINE 
document.getElementById('results').value = varname; //DOES NOT WORK 
document.getElementById('results').innerHTML = varname; //ALTERNATIVE ALSO DOES NOT WORK 
return false; 
} 

En d'autres termes, je peux définir la valeur dans l'entrée cachée champ, mais ne peut pas remplacer le contenu de la div "résultats".

Merci pour vos suggestions!

EDIT:

Je TROUVE LA FAUTE. Mettre un div dans la valeur de l'onglet d'entrée caché a fonctionné comme un hack pour définir la valeur mais n'était pas nécessaire et semble avoir brisé le code de sorte que le résultat div n'était pas défini. Au lieu d'une div, il suffit de donner un identifiant à l'onglet d'entrée cachée et en définissant sa valeur en javascript fonctionne comme suit:

html

<div id="results"></div> 
<input type="hidden" name = "result" id="chosenresult"> 

javascript

document.getElementById('chosenresult').value = varname; //WORKS FINE 
document.getElementById('results').innerHTML = varname; //NOW WORKS 
+0

EDIT: hé, désolé à ce sujet. Peut-être que vous avez besoin d'échapper le code HTML qui va dans la valeur de la deuxième entrée? –

+4

N'utilisez pas 'var' comme nom de variable/argument. –

+0

'document.getElementById ('chosenresult'). Value = var; // WORKS FINE' - Il ne devrait pas faire. Vous n'avez pas de div avec cet ID dans le code. – Quentin

Répondre

2

Première - Comme @Muthu Kumaran vous l'a dit, n'utilisez pas "var" comme identifiant.

Deuxième - Pourquoi avez-vous un div à l'intérieur de la valeur d'entrée?

<input type="hidden" name="result" value="<div id='chosenresult'></div>" 

Si vous avez ce balisage:

<input type="text" onkeyup="getResults(this.value)"> 
<div id="results"></div> 
<input type="hidden" name="result" value="<div id='chosenresult'></div>"> 

Vous créez une entrée sans id. Ensuite, vous créez au même niveau un div appelé « résultats » et vous créer une autre entrée sans nom que ce qui a une valeur que ressemble le balisage HTML.

Alors quand vous faites

document.getElementById('chosenresult').value = var; 

Vous êtes il n'y a aucun élément avec id « chosenresult » il doit tomber en panne si aucune autre ligne sur cette fonction sera exécutée.permet en tout cas lire les:

document.getElementById('results').value = var; 

Divs ont pas de propriété callled « valeur », utilisez innerHTML à la place

document.getElementById('results').innerHTML = var; 

Cela doit fonctionner, mais il modifiera le innerHTML d'un div entre les deux entrées, pas la les valeurs d'entrée

donc, si vous essayez de modifier la valeur d'entrée, vous devez nommer l'entrée elle-même:

<input id="results" type="text" onkeyup="getResults(this.value)"> 
<input id="chosenresult" type="hidden" name="result" value=""> 

Et puis modifiez sa propriété "value":

document.getElementById('chosenresult').value = var; 
document.getElementById('results').value = var; 
+0

Mettre le div selectedresult à l'intérieur de la propriété value fonctionne correctement. Il définit correctement la valeur à l'intérieur de la balise. Cependant, je vais essayer de déplacer la balise hiddent entière au javascript pour voir si cela aide. – user1260310

+1

Mais il n'y a pas de div "chosenresult" alors, quand vous essayez d'accéder 'document.getElementById ('chosenresult'). Value = varname;' il va planter. –

Questions connexes