JQuery Plugins Not Working Correctly With ASP.NET AJAX's ScriptManager

Question

I am trying to use a jQuery plugin in a control. The pages that the control can be on use partial postbacks via an UpdatePanel. I include jQuery and the plugin during the control's PreRender event like this:

ScriptManager.RegisterClientScriptInclude(
    this,
    this.GetType(),
    "jquery",
    "/_infrastructure/javascript/jquery.js"));

ScriptManager.RegisterClientScriptInclude(
    this,
    this.GetType(),
    "jquery.customPlugin",
    "/_infrastructure/javascript/jquery.customPlugin.js");

The customPlugin jQuery plugin sets up a new function called "executeCustomPlugin". Later in the PreRender event of the control, I use the plugin on an element on the control:

ScriptManager.RegisterStartupScript(
    this,
    this.GetType(),
    "customPlugin init script",
    @"$(document).ready(function() {
        $('#elementId').executeCustomPlugin();
    });",
    true);

However, when it executes, I get the JavaScript error:

$('#elementId').executeCustomPlugin is not a function

It would seem as if the jQuery plugin is never executed at all, but I set up window.alerts in the jQuery.customPlugin.js file, and it is indeed being executed.

Is there a way to fix this problem?

Answer 1

A possible explanation is that your plugin doesn't exist in the DOM prior to the execution of the ScriptManager code.

View the source of the page after it is rendered to the browser and ensure that your custom plugin's script tag is rendered before the javascript that is registered with your script manager.

Answer 2

It turns out that my problem was caused by including jQuery twice. The first jQuery instance was getting the plugin applied, but the second jQuery instance was receiving the call.