Categories
Development jQuery

Custom control’s jquery loads before masterpage loads jQuery

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?

Leave a Reply

Your email address will not be published. Required fields are marked *