views:

24

answers:

1

I have an AjaxControlToolkit.AutoCompleteExtender control attached to a textbox, and three radio buttons. When the user selects a radio button, the service method used to retrieve the values listed in the AutoCompleteExtender is changed, as follows:

$("#radioButtonList input").click(function() {

    var selectedValue = $(this).val();

    if (selectedValue == 0) {
        $find('autoCompleteExtender').set_serviceMethod('AutoCompleteExtenderMethod1');
    }
    else if (selectedValue == 1) {
        $find('autoCompleteExtender').set_serviceMethod('AutoCompleteExtenderMethod2');
    }
    else if (selectedValue == 2) {
        $find('autoCompleteExtender').set_serviceMethod('AutoCompleteExtenderMethod3');
    }

    $('#textbox').focus();
}

I want to ensure that, if the user selects a radio button when text is already present in the textbox, the list of autocomplete values based on the new service method is displayed (just as it would be if the user clicked the radio button and then typed into the textbox).

I have tried various event-firing mechanisms, such as this:

var press = jQuery.Event("keypress");
press.ctrlKey = false;
press.which = 77;
$('#textbox').trigger(press);

...each of these...

$('#textbox').keydown();
$('#textbox').keypress();
$('#textbox').keyup();

and even:

$('#textbox').get(0).value += 'm';

but nothing seems force the correct events to fire in order to make the autocomplete list re-display with the results of the new service method. How can I make this happen using Javascript?

EDIT: I should note: the jQuery events are firing correctly in each of the above cases, they're just not causing the autocomplete list to reappear when they do. I figure I haven't yet struck the right combination of events that the autocompleteextender is expecting to force the list to appear.

A: 

Make sure that you bind your events in the $(document).ready() function. The following works correctly

      <html>
       <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
            </script>
            <script>
             $(document).ready(function(){
    $("#radioButtonList input").change(function() {

        var selectedValue = $(this).val();

        if (selectedValue == 0) {
           $find('autoCompleteExtender').set_serviceMethod('AutoCompleteExtenderMethod1');

        }
        else if (selectedValue == 1) {
          $find('autoCompleteExtender').set_serviceMethod('AutoCompleteExtenderMethod2');

        }
        else if (selectedValue == 2) {
          $find('autoCompleteExtender').set_serviceMethod('AutoCompleteExtenderMethod3');

        }
//force click on text box
     $('#textbox').click()
      $('#textbox').focus();
    });
//handle click event
    $("#textbox").click(function(){
     alert("textbox clicked")
     //handle your refresh action for the textbox here
    })
    })

    </script>
    </head>
    <body>
    <input id="textbox" type="text" value="test">
    <div id="radioButtonList">
    <input type="radio" value="0">
    <input type="radio" value="1">
    <input type="radio" value="2">
    </div>
    </body>
    </html>
Michal
Absolutely true, and something that I was already doing - sorry, I should have been clearer. The jQuery events _are_ firing correctly in each of the above cases, they're just not causing the autocomplete list to reappear when they do. I haven't struck the right combination of events that the autocompleteextender is expecting to force the list to appear yet. Will edit accordingly.
Bambi
Try executing showPopup() on your autocomplete object e.g. YourAutoCompleteObject.showPopup() or $find('autoCompleteExtender').showPopup in the click handler for the textbox.
Michal
Ahhhhh, that's done it. It wasn't actually showPopup() that did it, but further investigation in that area led me to _onTimerTick(), which wasn't getting called after the radio buttons were clicked. Thanks!
Bambi