CustomControl for Team WebAccess --> jQuery doesnt work

I recently ran into some similar issue I think. I am developing a custom control for Team WebAccess 2010: The MultiValueControl for the browser. To achieve the very same experience as the MultiValueControl of the witcontrolsuite. (http://witcustomcontrols.codeplex.com/wikipage?title=Multivalue%20control&referringTitle=Home)

Therefore I am using an asp.net server control with a listbox (which is rendered as a html ) along with the following jquery drowdownchecklist (http://code.google.com/p/dropdown-check-list/)

the servercontrol looks like the following

   using System.Linq;
    using System.Text;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;

    namespace CodePlex.WitCustomControls.WebAccess.MultiValueControl
    {
        [DefaultProperty("Text")]
        [ToolboxData("<{0}:MultiValueControl runat=server></{0}:MultiValueControl>")]
        public class MultiValueControl : WebControl
        {
            public ListBox MyListBox { get; set; }

            protected override void CreateChildControls()
            {
                base.CreateChildControls();

                MyListBox = new ListBox();
                MyListBox.SelectionMode = ListSelectionMode.Multiple;
                MyListBox.Items.Add(new ListItem("abcd 1"));
                MyListBox.Items.Add(new ListItem("abcd 2"));
                MyListBox.Items.Add(new ListItem("abcd 3"));
                MyListBox.Items.Add(new ListItem("abcd 4"));
                MyListBox.Items.Add(new ListItem("abcd 5"));

                this.Controls.Clear();
                this.Controls.Add(MyListBox);
            }

            [Bindable(true)]
            [Category("Appearance")]
            [DefaultValue("")]
            [Localizable(true)]
            public string Text
            {
                get
                {
                    String s = (String)ViewState["Text"];
                    return ((s == null) ? String.Empty : s);
                }

                set
                {
                    ViewState["Text"] = value;
                }
            }

   protected override void OnPreRender(EventArgs e)
            {
                base.OnPreRender(e);

                string resourceName1 = "WebApplication1.embedded.jquery-1.4.2.min.js";
                string resourceName2 = "WebApplication1.embedded.jquery-ui-1.8.4.custom.min.js";
                string resourceName3 = "WebApplication1.embedded.ui.dropdownchecklist.js";

                ClientScriptManager cs = this.Page.ClientScript;
                var t = typeof(MultiValueControl);

                cs.RegisterClientScriptResource(t, resourceName1);
                cs.RegisterClientScriptResource(t, resourceName2);
                cs.RegisterClientScriptResource(t, resourceName3);

                string csslink = "<link href='"
                    + Page.ClientScript.GetWebResourceUrl(t, "WebApplication1.embedded.ui.dropdownchecklist.standalone.css")
                    + "' rel='stylesheet' type='text/css' />";
                var include = new LiteralControl(csslink);
                this.Page.Header.Controls.Add(include);

                string csslink2 = "<link href='"
                    + Page.ClientScript.GetWebResourceUrl(t, "WebApplication1.embedded.ui.dropdownchecklist.themeroller.css")
                    + "' rel='stylesheet' type='text/css' />";
                var include2 = new LiteralControl(csslink2);
                this.Page.Header.Controls.Add(include);

                var csType = typeof(MultiValueControl);
                var csName = "MultiValueControl" + MyListBox.ClientID;
                // Check to see if the client script is already registered.
                if (!cs.IsClientScriptBlockRegistered(csType, csName))
                {
                    StringBuilder csText = new StringBuilder();
                    csText.Append("<script type=\"text/javascript\">");
                    //we need to write the code the following way
                    csText.Append("(function($) { $(document).ready(function() {$(\"#" + this.MyListBox.ClientID + "\").dropdownchecklist();}); })(jQuery);");
                    //does not work as $ sign is not associated with jQuery in Team WebAccess!
                    //csText.Append(" $(document).ready(function() {$(\"#" + this.MyListBox.ClientID + "\").dropdownchecklist();});");
                    csText.Append("</script>");
                    cs.RegisterClientScriptBlock(csType, csName, csText.ToString());

                }
            }
        }
    }

As you can see, I inject the scripts (which are embedded in the controls assembly) into the output page in the pre-render step.

When I run all this on an asp.net application on my local computer (I created it to prototype my solution) it works perfectly...

However that control does not work with Team WebAccess 2010, as I get the error message 'jQuery' is undefined

However when I look at my page, I can definetly see, that the three scripts I inject are just perfectly well added just before the script that throws the error:

    <script src="/tfs/web/WebResource.axd?d=yGr4pF28N1gYPBSvcQ65PxwkQdtFV1bc0SJjY2M7nTK9BloSmvQxu8btRw7YDdXsjbAwSZPJBiIDI-3FSC7yFCXHjuvhkhaTAlTv2uOnOhR_y_2fLK1ahIdVYiXjEjDT2ZEI9_ozHhoJqICZykZo_rBCIDp5h7Y8v6-zWJJDJoqIIHI47YpQDhsE4-_UcYV6b6G-Cgr8MWH9AEP7CtK7Ie6wWCU1&amp;t=634306043180265615" type="text/javascript"></script>
        <script src="/tfs/web/WebResource.axd?d=9iAfN71_Hpv7igrtbh4h9pBAMBHXqUC1cX5cjkAEr1PglPvi4Uo5KLOC6tuHzMyGkpHEeBXbVeIX_NGIiKlHPSNlOjw75DksE2F-2NMVlIXoEB4uVTvyTwvt1TM3S2AGLY13hLPmM-SW12g3ZGU28PC23Vx_aYAFWSco6hgPTcCBOPuw4nSNSI72kgVuMwBjhzjxVbbzhdGLxrSAodBH5g7PATsuAN7CHE8vmi_pk9f8mW-50&amp;t=634306043180265615" type="text/javascript"></script>
        <script src="/tfs/web/WebResource.axd?d=c_BidQPb2wjtuw09st9ilCtRhA4VEjgNgJgr0VlFIRdKYP2UK1AqWS8Mo3AEiDU_MMCZkwjMVa1tTKg9UlpFoCqxCzKUhCK7Moou4ywZ74S0FJvdrcJ1cGbqtZnxrfUBLbN8_iahrG2A9Fq55up3o6R2_SlFU4d_gb_4fBXnticOG8Bl4JCbq7F2PnG-rw0fTiNwGDMwZFv1RvNJerUGYo_0Wuw1&amp;t=634306043180265615" type="text/javascript"></script>
        <script type="text/javascript">(function($) { $(document).ready(function() {$("#ctl00_c_we_ctl47_ctl00").dropdownchecklist();}); })(jQuery);</Script>

    The following is the source of the page (up to my injected scripts) that does not work. (of course I dummied the fqdn name of the server ;-))



    <html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
    New Change Request: - Team Web Access
</title>
    <base target="_self" />

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>
<script src="/tfs/web/WebResource.axd?d=fLgM8VwLkwzQwVHlt0I3zfY4k-15sHec44H9BY54wjS_v_rJDRkLrbhLIvED-zHvir1koHstEWBv_Erm3BGVmScM6OA1&amp;t=634210436612724343" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[var JSConfig ={"showBrowserToolbar":true};//]]></script>
<script src="/tfs/web/Resources/Scripts/WindowHelpers.js" type="text/javascript"></script>
<script src="/tfs/web/Resources/Scripts/DocumentService.js" type="text/javascript"></script>
<script src="/tfs/web/ScriptResource.axd?d=DUMMYVALUE"></script>
<script type="text/javascript">
//<![CDATA[
$jslimg("imga8521f38",["/tfs/web/App_Themes/Default/Images/h-progress.gif","/tfs/web/App_Themes/Default/Images/spinner.gif","/tfs/web/App_Themes/Default/Images/tmih.gif"]);//]]>
</script>
<script src="/tfs/web/Resources/Scripts/WindowToolbar.js" type="text/javascript"></script>
<script src="/tfs/web/Resources/Scripts/SearchHelper.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$new(windowToolbar,"ctl00_wtb",["ctl00$wtb",{"pguid":"e591d5c5-c3bd-4431-81cc-62b4fc5a6b81"}]);
//]]>
</script>
<script src="/tfs/web/Resources/Scripts/EditWorkItem.js" type="text/javascript"></script>

....

<script type="text/javascript">
//<![CDATA[
$jsreg("cd326c372",{"changeCallbackEventName":"FieldChanged","numberFormat":"None"});
$jsreg("c384acf1b",{"dropCount":8,"minDropPanelWidth":0,"maxDropPanelWidth":0,"notAllowedBGColor":"#FFFFCC","allowedBGColor":"","textBoxClass":"tswa-text-box","textBoxDisabledClass":"tswa-text-box-disabled","dropPanelClass":"tswa-font tswa-dropdowncanvas","listItemClass":"tswa-listitem","listItemHoverClass":"tswa-listitemhover","listItemSelectedClass":"tswa-listitemselected","listItemDisabledClass":"tswa-listitemdisabled","decimalChar":","});
$jsreg("c569d08c7",[]);
$new(editableDropDown,"ctl00_c_we_ctl04_wc_val",[5,cd326c372,null,c384acf1b,null,c569d08c7,c569d08c7,c569d08c7,null,"",null,""]);
//]]>
</script>
<script src="/tfs/web/WebResource.axd?d=yGr4pF28N1gYPBSvcQ65PxwkQdtFV1bc0SJjY2M7nTK9BloSmvQxu8btRw7YDdXsjbAwSZPJBiIDI-3FSC7yFCXHjuvhkhaTAlTv2uOnOhR_y_2fLK1ahIdVYiXjEjDT2ZEI9_ozHhoJqICZykZo_rBCIDp5h7Y8v6-zWJJDJoqIIHI47YpQDhsE4-_UcYV6b6G-Cgr8MWH9AEP7CtK7Ie6wWCU1&amp;t=634306043180265615" type="text/javascript"></script>
<script src="/tfs/web/WebResource.axd?d=9iAfN71_Hpv7igrtbh4h9pBAMBHXqUC1cX5cjkAEr1PglPvi4Uo5KLOC6tuHzMyGkpHEeBXbVeIX_NGIiKlHPSNlOjw75DksE2F-2NMVlIXoEB4uVTvyTwvt1TM3S2AGLY13hLPmM-SW12g3ZGU28PC23Vx_aYAFWSco6hgPTcCBOPuw4nSNSI72kgVuMwBjhzjxVbbzhdGLxrSAodBH5g7PATsuAN7CHE8vmi_pk9f8mW-50&amp;t=634306开发者_如何学运维043180265615" type="text/javascript"></script>
<script src="/tfs/web/WebResource.axd?d=c_BidQPb2wjtuw09st9ilCtRhA4VEjgNgJgr0VlFIRdKYP2UK1AqWS8Mo3AEiDU_MMCZkwjMVa1tTKg9UlpFoCqxCzKUhCK7Moou4ywZ74S0FJvdrcJ1cGbqtZnxrfUBLbN8_iahrG2A9Fq55up3o6R2_SlFU4d_gb_4fBXnticOG8Bl4JCbq7F2PnG-rw0fTiNwGDMwZFv1RvNJerUGYo_0Wuw1&amp;t=634306043180265615" type="text/javascript"></script><script type="text/javascript">(function($) { $(document).ready(function() {$("#ctl00_c_we_ctl49_ctl00").dropdownchecklist();}); })(jQuery);</script>
<script type="text/javascript">(function($) { $(document).ready(function() {$("#ctl00_c_we_ctl52_ctl00").dropdownchecklist();}); })(jQuery);</script>

I just have no more clues what I can do! Please HELP!!

Try putting the script registrations in the page init(). This worked for me.

Ok... as noone seemed to be able to help me, I finally could solve the problem on my own. However I am not sure if this is a sober approach. Well at least it works, right? :)

What I did was changing the "prerender" logic to not register the jQuery libs as web resource but writing them out like my own client side script.

Its rather hard to explain - so just look at the code.

base.OnPreRender(e);

        // jquery control only works together with listbox
        if (!(this.CheckboxList is ListBox))
            return;

        string resourceName1 = "CodePlex.WitCustomControls.WebAccess.embedded.jquery-1.4.2.min.js";
        string resourceName2 = "CodePlex.WitCustomControls.WebAccess.embedded.jquery-ui-1.8.4.custom.min.js";
        string resourceName3 = "CodePlex.WitCustomControls.WebAccess.embedded.ui.dropdownchecklist.js";

        ClientScriptManager cs = this.Page.ClientScript;
        var t = typeof(MultiValueControl);

        WriteEmbeddedScript(cs, resourceName1, t);
        WriteEmbeddedScript(cs, resourceName2, t);
        WriteEmbeddedScript(cs, resourceName3, t);             
        //cs.RegisterClientScriptResource(t, resourceName1);
        //cs.RegisterClientScriptResource(t, resourceName2);
        //cs.RegisterClientScriptResource(t, resourceName3);

        string csslink = "<link href='"
            + Page.ClientScript.GetWebResourceUrl(t, "CodePlex.WitCustomControls.WebAccess.embedded.ui.dropdownchecklist.standalone.css")
            + "' rel='stylesheet' type='text/css' />";
        var include = new LiteralControl(csslink);
        this.Page.Header.Controls.Add(include);

        string csslink2 = "<link href='"
            + Page.ClientScript.GetWebResourceUrl(t, "CodePlex.WitCustomControls.WebAccess.embedded.ui.dropdownchecklist.themeroller.css")
            + "' rel='stylesheet' type='text/css' />";
        var include2 = new LiteralControl(csslink2);
        this.Page.Header.Controls.Add(include);

        var csType = typeof(MultiValueControl);
        var csName = "MultiValueControl" + CheckboxList.ClientID; // we need to add a script for each separate MultiValueControl on a page

        var script = "(function($) { $(document).ready(function() {$(\"#" + this.CheckboxList.ClientID + "\").dropdownchecklist();}); })(jQuery);";
        WriteScript(cs, script, csType, csName);
    }

    private static void WriteEmbeddedScript(ClientScriptManager cs, string resourceName1, Type t)
    {
        using (var reader = new StreamReader(Assembly.GetAssembly(t).GetManifestResourceStream(resourceName1)))
        {
            var script = reader.ReadToEnd();
            WriteScript(cs, script, t, resourceName1);
        }
    }

    private static void WriteScript(ClientScriptManager cs, string script, Type csType, string csName)
    {
        // Check to see if the client script is already registered.
        if (!cs.IsClientScriptBlockRegistered(csType, csName))
        {
            StringBuilder csText = new StringBuilder();
            csText.Append("<script type=\"text/javascript\">");
            //we need to write the code the following way
            csText.Append(script);
            //does not work as $ sign is not associated with jQuery in Team WebAccess!
            //csText.Append("$(document).ready(function() {$(\"#" + this.CheckboxList.ClientID + "\").dropdownchecklist();});");
            csText.Append("</script>");
            cs.RegisterClientScriptBlock(csType, csName, csText.ToString());

        }
    }