locked
autocomplete textChanged event not firing RRS feed

  • Question

  • User1830091657 posted

    Hey all-

    I have a series of 4 textboxes. The autocomplete for each one depends on the values in the boxes before it. So the second box sends the value of the first box, and the value of the second, third sends 1st, 2nd and 3rd. I'm doing this by using the TextChanged event to append the values into the context key then the webservice splits them and grabs the data that is needed to fill the dropdown.

    The first box works perfectly. The second box, the TextChanged event will not fire UNLESS the first box has done its work. In this particular case, this is an edit form, not a new, so the textboxes will all have values already. So it should be no problem to go straight to the 2nd box and start typing and get results. Instead it seems to require the first to perform the functionality before it will work in the 2nd.

    Here is the code:

     

     

    1        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    2        <ContentTemplate>
    3        <div id="updatewrap">
    4                 <div class="leftsize">
    5                        System
    6                    </div>
    7                    <div class="right">
    8                        <asp:TextBox ID="itSystem" runat="server" 
    9                            MaxLength="50" AutoCompleteType="Search" 
    10                           AutoPostBack="True" EnableViewState="False"></asp:TextBox><br />
    11                       <div id="itsysac" runat="server" class="float" visible="true"></div>
    12                       <cc1:autocompleteextender 
    13                           ID="testthis" 
    14                           Enabled="true" 
    15                           TargetControlID="itSystem"
    16                           ServiceMethod="GetSystem"
    17                           runat="server"
    18                           ServicePath="autocomplete.asmx"
    19                           CompletionInterval="5"
    20                           MinimumPrefixLength="1"
    21                           CompletionListElementID="itsysac"
    22                           CompletionSetCount="4"></cc1:autocompleteextender>  
    23                       <asp:RequiredFieldValidator 
    24                           ID="reqitsystem" runat="server"
    25                           ErrorMessage="Please enter a valid SCIM System" 
    26                           ControlToValidate="itSystem" Display="None"></asp:RequiredFieldValidator> 
    27                   </div>
    28                   
    29                   <div class="clear"></div>
    30                   
    31                   <div class="leftsize">
    32                       Component
    33                   </div>
    34                   <div class="right">
    35                         <asp:TextBox ID="itComponent" runat="server" 
    36                           MaxLength="50" AutoCompleteType="Search" 
    37                             AutoPostBack="True" EnableViewState="False"></asp:TextBox><br />
    38                       <div id="itcomac" runat="server" class="float" visible="true"></div>
    39                       <cc1:autocompleteextender 
    40                           ID="accomponent" 
    41                           Enabled="true" 
    42                           TargetControlID="itComponent"
    43                           ServiceMethod="GetComponent"
    44                           runat="server"
    45                           ServicePath="autocomplete.asmx"
    46                           CompletionInterval="5"
    47                           MinimumPrefixLength="1"
    48                           CompletionListElementID="itcomac"
    49                           CompletionSetCount="4" ContextKey="component" 
    50                           UseContextKey="True"></cc1:autocompleteextender>   
    51                       <asp:RequiredFieldValidator 
    52                           ID="reqitcomponent" runat="server"
    53                           ErrorMessage="Please enter a valid SCIM Component" 
    54                           ControlToValidate="itComponent" Display="None"></asp:RequiredFieldValidator>                
    55                   </div>
    56                   
    57                   <div class="clear"></div>
    58                   
    59                   <div class="leftsize">
    60                       Item
    61                   </div>
    62                   <div class="right">
    63                         <asp:TextBox ID="itItem" runat="server" 
    64                           MaxLength="50" AutoCompleteType="Search" 
    65                             AutoPostBack="True" EnableViewState="False"></asp:TextBox><br />
    66                       <div id="itite" runat="server" class="float" visible="true"></div>
    67                       <cc1:autocompleteextender 
    68                           ID="acititem" 
    69                           Enabled="true" 
    70                           TargetControlID="itItem"
    71                           ServiceMethod="GetItem"
    72                           runat="server"
    73                           ServicePath="autocomplete.asmx"
    74                           CompletionInterval="5"
    75                           MinimumPrefixLength="1"
    76                           CompletionListElementID="itite"
    77                           CompletionSetCount="4" ContextKey="item" 
    78                           UseContextKey="True"></cc1:autocompleteextender> 
    79                       <asp:RequiredFieldValidator 
    80                           ID="reqititem" runat="server"
    81                           ErrorMessage="Please enter a valid SCIM Item" 
    82                           ControlToValidate="itItem" Display="None"></asp:RequiredFieldValidator>                                
    83                   </div>
    84                   
    85                   <div class="clear"></div>
    86       
    87                   <div class="leftsize">
    88                       Module
    89                   </div>
    90                   <div class="right">
    91                         <asp:TextBox ID="itModule" runat="server" 
    92                           MaxLength="50" AutoCompleteType="Search" 
    93                             AutoPostBack="True" EnableViewState="False"></asp:TextBox><br />
    94                       <div id="itmod" runat="server" class="float" visible="true"></div>
    95                       <cc1:autocompleteextender 
    96                           ID="acmodule" 
    97                           Enabled="true" 
    98                           TargetControlID="itModule"
    99                           ServiceMethod="GetModule"
    100                          runat="server"
    101                          ServicePath="autocomplete.asmx"
    102                          CompletionInterval="5"
    103                          MinimumPrefixLength="1"
    104                          CompletionListElementID="itmod"
    105                          CompletionSetCount="4" ContextKey="module" 
    106                          UseContextKey="True"></cc1:autocompleteextender>   
    107                      <asp:RequiredFieldValidator 
    108                          ID="reqitmodule" runat="server"
    109                          ErrorMessage="Please enter a valid SCIM Module" 
    110                          ControlToValidate="itModule" Display="None"></asp:RequiredFieldValidator> 
    111                  </div>    
    112                  <div class="clear"></div>   
    113      </div>
    114              <div style="float: right;">
    115                  <asp:LinkButton ID="btnperegrinedet" runat="server">Update Peregrine Details</asp:LinkButton><br />
    116                  <asp:Label ID="perelbl" runat="server" Text="" ForeColor="Red" Visible="false"></asp:Label>
    117              </div>
    118              <div class="clear"></div>
    119  
    120      </ContentTemplate>
    121  <Triggers>
    122      <asp:AsyncPostBackTrigger ControlID="itSystem" 
    123          EventName="TextChanged" />
    124      <asp:AsyncPostBackTrigger ControlID="itItem" 
    125          EventName="TextChanged" />
    126      <asp:AsyncPostBackTrigger ControlID="btnperegrinedet" 
    127          EventName="Click" />
    128      <asp:AsyncPostBackTrigger ControlID="itComponent" 
    129          EventName="TextChanged" />
    130      <asp:AsyncPostBackTrigger ControlID="itModule" 
    131          EventName="TextChanged" />
    132  </Triggers>
    133  </asp:UpdatePanel>
    

      

    1        Protected Sub itSystem_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles itSystem.TextChanged
    2            accomponent.ContextKey = itSystem.Text
    3        End Sub
    4        Protected Sub itItem_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles itItem.TextChanged
    5            acmodule.ContextKey = itSystem.Text & ":" & itComponent.Text & ":" & itItem.Text
    6        End Sub
    7        Protected Sub itComponent_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles itComponent.TextChanged
    8            acititem.ContextKey = itSystem.Text & ":" & itComponent.Text
    9       End Sub
    
     

    I've tested this and confirmed that the only time the itComponent_TextChanged is only being called in two ways:

    1. if the first box (itSystem) has already had something typed into it (not including the preloaded database values)

    2. if i type in the itComponent box and then click outside of it. At which point the entire page flashes.

    And of course the sub must be hit to return values, otherwise its searching on an empty string and returns nothing.

    I appreciate any help!

     

    Thursday, July 24, 2008 2:14 PM

Answers

  • User-1588608018 posted

    You could make your autocompletes function via page methods which call a webservice.

     That way you can just concatenate the prefixText with the previous textbox as needed.

     Tim

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 24, 2008 2:42 PM

All replies

  • User-1588608018 posted

    You could make your autocompletes function via page methods which call a webservice.

     That way you can just concatenate the prefixText with the previous textbox as needed.

     Tim

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 24, 2008 2:42 PM
  • User1830091657 posted

     I don't really know how to do what you suggested. but its something I can try to look into. Doesn't explain why this problem is occurring for me. Its just very odd.

    Thursday, July 24, 2008 4:57 PM
  • User1830091657 posted

    I was on vacation for a while.. and now I'm back at this.

     

    I have converted to page method. It works if I do Public Shared Function GetComponent, but not as Public Function GetComponent.

    So of course I kept it as shared. But having it as shared gets me the following error message when I try to reference a textbox value in the form:

    "Cannot refer to an instance member of a class from within a shared method or shared member initializer without an explicit instance of the class"

     
    So now I'm looking for a way around this that makes sense. Having the function as public only and not public shared - it does nothing at all. If I set it to shared, hardcode the value instead of referencing the textbox, it works perfectly.
     

    Wednesday, August 13, 2008 1:01 PM
  • User-1588608018 posted

    See if this post helps.

    Tim

    Wednesday, August 13, 2008 2:03 PM
  • User-1588608018 posted

    Or you can modify the TextChanged events of the textboxes that determine the values for the autocompleteextender. Make sure you have autopostback = true for your textboxes for this to work correctly.

    Protected Sub yourTextBox_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles yourTextBox.TextChanged

    acComponent.ContextKey = yourTextBox.Text  ' You can combine text box fields here if needed.

    End Sub

     

    Tim

    Wednesday, August 13, 2008 2:28 PM
  • User1830091657 posted

    Or you can modify the TextChanged events of the textboxes that determine the values for the autocompleteextender. Make sure you have autopostback = true for your textboxes for this to work correctly.

    Protected Sub yourTextBox_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles yourTextBox.TextChanged

    acComponent.ContextKey = yourTextBox.Text  ' You can combine text box fields here if needed.

    End Sub

     

    Tim

     

     

    The problem with that is what I described in my initial post. It refuses to call the TextChanged sub unless I click outside the box, unless I type in the first box before the second. I don't know if its a bug on my end somehow or an .net 2.0/ajax issue, but TextChanged will not call properly on this box unless TextChanged has been called on the previous box.  

    Wednesday, August 13, 2008 3:37 PM
  • User-1588608018 posted

    Add an OnClientItemSelected tag to your autocompleteextender. Have it point to a javascript function setContext()

    function setContext(source, eventArgs)
    {
      acComponent.set_contextKey(eventArgs.get_value); // or use eventArgs.get_text
    }

    This will set the context for the next autocomplete extender, in this example when selecting a value in itSystem, it will take the value and set the contextKey for acComponent. Not sure if you'll need to do a $get("acComponent").set_contextKey or leave it as in the example above. You would either create duplicate functions for each one or pass in the appropriate fields as parameters.

    Not sure if this will work but it seems like it should.

     

    Tim

     

    Wednesday, August 13, 2008 4:27 PM
  • User-1588608018 posted

    Minor change to my last post. I've tested it to verify I can get the eventArgs.get_value into the other contextKey. You need to set a variable to the behaviorID of the autocompleteextender. Then use that variable to set the context key as shown below. This event was tied to my OnClientItemSelected of my first autocompleteextender.

     function setContext(source, eventArgs)
    {
    var nextAutoComplete= $find('AutoCompleteEx1');

    nextAutoComplete.set_contextKey(eventArgs.get_value());
    }

    <ajaxToolkit:AutoCompleteExtender 
    	ID="myFirstACE"  									
    	BehaviorID="AutoCompleteEx"
    	runat="server" 
            CompletionInterval="2"
    	OnClientItemSelected="setContext" 
    	TargetControlID="myFirstTextBox" 
      ... />
    
    <ajaxToolkit:AutoCompleteExtender 
    	ID="mySecondACE"  									
    	BehaviorID="AutoCompleteEx1"
            UseContextKey="true" ContextKey="Test"
    	runat="server" 
      ... />

     

    Any questions, let me know.

    Tim

    Thursday, August 14, 2008 8:16 AM
  • User-1844302025 posted

    TCavins, I have no idea of how did you find this, but this js method set_contextKey just saved my day! I was looking for a way to change the context without postbacking all the page. Thanks!


    Felipe

    Friday, July 24, 2009 8:35 AM