How to reapply .css file after UpdatePanel asynchronous call completed

Question

I have a nested gridview that is within an UpdatePanel control. After I select row editing, I need create controls in a couple of the columns to chosen dropdown lists. I need to reapply the chosen plugin AND .css file. I cannot find a resource that will work. This is the javascript function call to add the chosen dropdown list:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest);  function onEndRequest(sender, args) {
    if (sender._postBackSettings.panelsToUpdate != null) {
       $.load
        $.getScript("~/Scripts/chosen.jquery.min.js");
        $.getScript("~/Scripts/chosen.jquery.js");
        //This append function is not working.
        $('head').append('<link href="~/Styles/chosen.css" rel="stylesheet" type="text/css" />');
        (".chosen-single").chosen({
            search_contains: true,
            width: "200px",
            no_results_text: "Sorry, no match!"
        });
    }
};

With this append function, I am still getting the error of: .chosen-single not a function.

I am using ASP.NET MasterPages so the head in on the Site.Master page. Maybe the problem is that I need to specify where the head is?

Thanks.

Answer 1

This should be enough:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest); 

function onEndRequest(sender, args) {
    if (sender._postBackSettings.panelsToUpdate != null) {
        $("select:not(.chosen-single, .no-chosen)").chosen({
            search_contains: true,
            width: "200px",
            no_results_text: "Sorry, no match!"
        });
    }
};

You don't need to load CSS and JS files again given that you load the files before.