Comment lier un gestionnaire d'événement Javascript à la combobox du Ajax Control Toolkit lorsque la zone de texte est modifiée ?

Question

J'ai besoin d'une combobox pour un projet ASP.NET, j'ai donc décidé d'utiliser la combobox du Ajax Control Toolkit ( http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ComboBox/ComboBox.aspx ).

Je ne veux pas utiliser le postback car je ne veux pas que la page soit rechargée, mais j'ai besoin de savoir quand le texte de la zone de texte est modifié afin de pouvoir appeler le serveur pour faire persister le nouvel élément de la liste.

Je suis curieux de savoir comment lier un onchange o onblur à la zone de saisie que cette combobox utilise.

Voici ma page asp.net :

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<cc1:ComboBox ID="PlantDropDown" runat="server" OnInit="PlantDropDown_Init" DropDownStyle="DropDown" 
             AutoCompleteMode="SuggestAppend" 
            ItemInsertLocation="OrdinalText" AutoPostBack="false">

                </cc1:ComboBox>

Mise à jour : J'ai essayé d'utiliser la suggestion et j'obtiens cette erreur :

$find("PlantDropDown") is null
[Pause sur cette erreur]
$find('PlantDropDown').add_propertyChanged(function(sender, e) { \r\n

J'utilise jQuery pour le côté Javascript, au cas où cela serait utile.

Mise à jour finale :
J'ai réussi à le faire fonctionner grâce à l'aide de crescentfresh, et à la fin j'ai ceci dans mon fichier .aspx :

<input type="hidden" id="PlantDropDownID" value="<%= PlantDropDown.ClientID %>" />

Et cela se trouve dans mon fichier javascript, puisque je ne pousse pas le javascript dans mon fichier .aspx :

elem = document.getElementById('PlantDropDownID');
$find(elem.value).add_propertyChanged(function(sender, e) {
    if (e.get_propertyName() == 'selectedIndex') {
        var newValue = sender.get_textBoxControl().value;
    }
})

Answer 1

Je crois que vous êtes censé vous lier à l' "propertyChanged" et vérifie les modifications apportées à l'événement "selectedIndex" propriété :

$find('PlantDropDown').add_propertyChanged(function(sender, e) {
    if (e.get_propertyName() == 'selectedIndex') {
        var newValue = sender.get_textBoxControl().value;

        // persist selected value here...
    }
})

avec l'avertissement habituel concernant Les identifiants des contrôles .NET dans le client .

L'api n'est pas facile, c'est sûr. Il n'y a pas de .get_value() par exemple, ce qui serait agréable au lieu de devoir passer par le contrôle de la zone de texte intégrée.

Modifier :

> $find("PlantDropDown") is null

Assurez-vous que vous utilisez le identifiant correct . Voir Les identifiants des contrôles .NET dans le client . Pour obtenir une référence, vous devrez peut-être faire :

$find('<%= PlantDropDown.ClientID %>')

> J'utilise jQuery pour le côté javascript.

Cela n'a aucune importance.

Answer 2

J'ai constaté que la réponse fournie ne fonctionnait pas si je ne l'intégrais pas dans une fonction comme indiqué ci-dessous. Je ne sais pas pourquoi, mais j'espère que cela évitera à quelqu'un d'autre de souffrir.

<script language="javascript" type="text/javascript">

    Sys.Application.add_load(initializePage);

    function initializePage() {
        $find('PlantDropDown').add_propertyChanged(function(sender, e) {    
        if (e.get_propertyName() == 'selectedIndex') {        
        var newValue = sender.get_textBoxControl().value;        
        // persist selected value here...    
        }})
    }

</script>