Comment trouver de zone de texte dans GridView à l'aide de Javascript
Je suis en train d'essayer d'obtenir l'accès et de trouver de zone de texte dans GridView à l'aide de javascript, mais j'obtiens une erreur: "Le nom txt_UID" n'existe pas dans le contexte actuel". Tout a bien fonctionné lors de ma zone de texte était à l'extérieur de la GridView. Voici ma zone de texte dans le contrôle gridview et mon gridview est appelé GridView1:
<asp:TemplateField ItemStyle-Width="150px" HeaderText="User Assigned">
<ItemTemplate>
<asp:TextBox ID="txt_UID" runat="server" Text='<%# Eval("UID")%>'
CssClass="AutoCompleteTextBox" Width="130px" BackColor="LightGoldenrodYellow"></asp:TextBox>
</ItemTemplate>
<ItemStyle Width="150px" />
</asp:TemplateField>
Voici mon code JavaScript:
<script type ="text/javascript">
function setAutoComplete() {
var textBoxes = document.getElementsByClassName("AutoCompleteTextBox");
for (var i = 0; i < textBoxes.length; i++) {
addAutoComplete(textBoxes[i].id);
}
}
</script>
<script type="text/javascript">
function addAutoComplete(textBoxId) {
$("#" + textBoxId).autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/Service.asmx/GetUserNames") %>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("#<%=hfUserId.ClientID %>").val(i.item.val);
},
minLength: 1
});
};
<script type ="text/javascript">
$(document).ready(function () { setAutoComplete(); });
</script>
OriginalL'auteur moe | 2014-02-09
Vous devez vous connecter pour publier un commentaire.
Le problème, c'est votre
GridView
crée unTextBox
sur chaque ligne. Il n'y a pas de "txt_UID" contrôle à l'extérieur de laGridView
. C'est ce que ce message d'erreur vous dit.Votre
JavaScript
fonction est conçue pour fonctionner avec unTextBox
. J'imagine que vous voulez que la saisie semi-automatique pour travailler sur TOUS lesTextBox
contrôles dans leGridView
.Ma suggestion serait de changer la
JavaScript
fonction prend un paramètre avec laTextBox
ID puis ajouter unCSS class
à chaqueTextBox
, et enfin faire un wrapperJavaScript
fonction qui va énumérer lesTextBox
contrôles à l'aide degetElementsByClassName
, et appeler cette fonction wrapper surDOM ready
.Voici à quoi ça ressemblera:
Ajouter classe CSS pour les zones de texte:
Nouveau
JavaScript
fonction:Ensuite, faire de votre autre
JavaScript
dans une fonction qui prend un paramètre (id):Enfin, votre prêt de changer de code il suffit d'appeler la fonction wrapper vous avez créé:
Bonus: Voici une façon de le faire avec jQuery seulement:
(nécessite juste la classe CSS sur les zones de texte)
Non, parce que de cette façon que mon code fonctionne, c'est que textBoxId est le nom réel de la zone de texte, la fonction wrapper, setAutoComplete, extrait à l'aide de l'intégré dans le code JavaScript document.getElementsByClassName() la méthode. Fondamentalement, mon code ne se soucie pas que l'ID de votre zone de texte - il utilise la nouvelle classe CSS j'ai ajouté pour obtenir une référence à toutes les zones de texte dans le contrôle GridView (tant que vous ne mettez pas que la classe css sur tous les autres contrôles ou les éléments).
Rappelez-vous que vous n'avez pas UNE zone de texte... vous avez une zone de texte dans CHAQUE ligne de la gridview. Il est généré par asp.net pour vous que les éléments HTML, chacun avec un ID unique. Le seul endroit que "txt_UID" a des sens est à l'intérieur de la GridView. Il y a des moyens pour y accéder .net (en utilisant la méthode FindControl) mais je l'ai fait, il est effectivement plus simple, je pense.
c'est bon, j'ai fais les modifications maintenant et de le tester. vous permettra de savoir rapidement. merci
Une chose de plus, j'ai eu un bug dans mon jQuery -- changé
$(textBoxId)
à$("#" + textBoxId)
, il va travailler maintenant.OriginalL'auteur Dmitriy Khaykin
Votre
Gridview
sera rendu commeTable
et votre commande sera contenue danscell
de table. Vous pouvez donner un essai à la suite.remplacer
<<Client ID of the GridView>>
avec l'id de votreGridView
Imad, je ne sais pas où mettre ce <body onload="findControl()"> </body>?? pourriez-vous préciser s'il vous plaît? merci
voir édité.. c'est simple maintenant? pas besoin de
<body>
et tous.OriginalL'auteur SMI
vous pouvez utiliser le nom de l'attribut et de la grille id pour le trouver:
la partie javascript:
OriginalL'auteur Mehran Hatami