jQuery Autocomplete inside partially rendered user control?

Yesterday a very small issue put me into the hell for almost an hour. Finally I was able to figure out a workaround for me.

I am not claiming this is the best approach to solve this problem or stuff like that, but definitely it worked for me nice, and I did not find any downside of this yet.

Well, let’s get into the story, I was using the awesome jQuery Autocomplete plug-in inside my ASP.net MVC application. Initially I put this autocomplete textbox into the site.master page and it worked superb! I used the HtmlHelper extension model to accomplish my task. John Zablocki has written a wonderful post regarding this approach. I basically used his approach with subtle modifications. For those who has no idea what jQuery Autocomplete plugin is, it’s a regular html text input control that is registered by the jQuery autocomplete plugin library and when user tries to write something in it, it made an ajax request to the server to get the possible values for the given characters use has been typed. Again, please read the John’s blog for a good idea about this.

My problem begins when I moved this control from the master page and put inside a view user control in my ASP.net MVC application- that renders partially. To explain this more clearly, my user control has the following code

Now, from the Index.aspx (I am talking about the Home\Index.aspx -which generates for a hello world ASP.net MVC application), I am rendering this user control using AJAX. And I noticed that the jQuery is not working. Why??

Well, after spending few minutes I understood that, the script that used to register this control with jQuery is not executing when the DOM is modified using AJAX. Which means that if you write a simple ascx control, with only the following script code,

alert(“Hi”);>/script>

And render this ascx using Ajax. You will not see anything where I was expecting to see the message box saying “Hi” to me. Well, when you modify the DOM dynamically if there are any scripts that are not executed automatically, unless you do something to force this. This is the reason why my jQuery plugin was not working. So what I did is, forced the browser to load all the scripts that returned by the server during the AJAX call. And I loaded the javascript in window level- it actually depends on you-where it bests suit you.

So I was able to make this running-with a OnSuccess event handler for my AJAX call, and once it finished the AJAX invocation, I did a force load of all the scripts block resides into the ascx. Voila!