Custom control's jquery loads before masterpage loads jQuery

Question

I'm creating a custom control which utilizes the jQuery.UI autocomplete function. My application has a standard Webform Masterpage which includes a ScriptManager tag.

I am embedding a javascript file which has the following code.

$(document).ready(function () {  
    var param;
    var p = '<%=this.PostbackURL%>';


    $('#<%=AutoCompleteTextBox.ClientID%>').autocomplete({
        source: function (request, response) {
            param = $('#<%=AutoCompleteTextBox.ClientID%>').val();
            console.log('Param: ' + param);
            $.ajax({
                type: "POST",
                url: p,
                data: '{term:"' + param + '"}',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                dataFilter: function (data) { return data; },
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            value: item
                        }
                    }))
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        },
        close: function (event, ui) {
            c();
        },
        minLength: 1
    })
        .autocomplete("instance")._renderItem = function (ul, item) {
            return $("<li>")
                .append(formatListItem(param, item.value))
                .appendTo(ul);
        };

});

In the class itself, I've tried various attempts as registering the js file trying to get the Jquery code to load after the ScriptManager in the MasterPage loads with no luck.

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

 Page.ClientScript.RegisterClientScriptResource(typeof(AutoCompleteTextboxServerControl), "AutoCompleteTextbox.Scripts.Custom.js");
        }

So in the page source of a test page the Webresource.axd loads before Jquery is loaded.

// WebResource contains the autocomplete js code ->
<script src="/WebResource.axd?d=zNH31OAcb5wrxPoggl5f_MlEhQbiGePLqOV1mx07OO6SSXqoLMXL1kQJWOtZYT8yi9_NYq5dkaLcyDlu5yOmTmJjGDY0XZ5-soxCdlMvlykrdyRRlogmLUOD8kflF3WtmwbAZvh6nWg3uAAwcpe0JQ2&amp;t=637070115488096556" type="text/javascript"></script>

<script src="/bundles/MsAjaxJs?v=D6VN0fHlwFSIWjbVzi6mZyE9Ls-4LNrSSYVGRU46XF81" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

// jQuery 3.3.1 loads here ->
<script src="Scripts/jquery-3.3.1.js" type="text/javascript"></script>

<script src="Scripts/bootstrap.js" type="text/javascript"></script>
<script src="/bundles/WebFormsJs?v=N8tymL9KraMLGAMFuPycfH3pXe6uUlRXdhtYv8A_jUU1" type="text/javascript"></script>
<div class="aspNetHidden">

    <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
</div>
        <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl08', 'ctl01', [], [], [], 90, 'ctl00');
//]]>
</script>

Can the order be changed?

Answer 1

So I figured out the load order issue. It's quite easy. You need a reference to the ScriptManager in the MasterPage and then add a ScriptReference.

protected override void OnInit(EventArgs e)
{
      var mgr = System.Web.UI.ScriptManager.GetCurrent(this.Page);
      mgr.Scripts.Add(new ScriptReference { Path = "Scripts/Custom.js" });
}