jQuery undefined after $(function() {

Question

I can't seem to pinpoint why this is failing - any ideas? -> See within .aspx

custom.master references / and script

<link rel="stylesheet" href="/admin/css/custom.css" />
<script src="/admin/js/jquery-1.9.1.min.js"></script>
<script src="/admin/js/jquery-1.10.2-ui.min.js"></script>
<link href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet"/>
<asp:ContentPlaceHolder ID="HeadPlaceHolder" runat="server"></asp:ContentPlaceHolder>

<script>
    $(function () {
        var $ = jQuery.noConflict(); <-- This here is the culprit

Within rPage.aspx (MasterPageFile="~/admin/custom.master")

<asp:Content ID="Content1" ContentPlaceHolderID="HeadPlaceHolder" runat="server">
    <link href="css/bootstrap-3.3.5.min.css" rel="stylesheet" />
</asp:Content>

<script>
    $(function () {
        var $ = jQuery.noConflict(); //**Without this line the next line fails**
        $("#<%= txtStartDate.ClientID %>").datepicker();

Error:

from console: TypeError: $ is not a function rPage:380:13

from debugger firefox dev edition:

378 $(function () {
379        //var $ = jQuery.noConflict();
380        $("#ContentPlaceHolder_txtStartDate").datepicker();

In your first example, it works because you've assigned jQuery to a local variable, i.e., not a global. So your second example would need the same thing unless you redefined $ to be jQuery in the global scope. — Mike Cluck
– Mike Cluck, Commented Mar 17, 2016 at 16:32
Presumably $ is being overwritten at some point between line 378 being executed and the DOM Ready event triggering the function that includes line 380. You haven't provided enough code to tell where. — Quentin
– Quentin, Commented Mar 17, 2016 at 16:34
Seeing as $(function() { works, and jQ passes a reference to itself as the first argument to the callback, you can write $(function($) { or jQuery(function($) {, which is the more common approach when you have conflicts. It's likely that the $ name in your $(function() { isn't the jQ object to begin with (prototype uses $, too I think) — Elias Van Ootegem
– Elias Van Ootegem, Commented Mar 17, 2016 at 16:35

Prisoner ZERO · Accepted Answer · 2016-03-17 17:18:18Z

2

Looking at the (currently) posted example, I see no reason for the NoConflict call. I am assuming it is because maybe the other library isn't (yet) shown in your sample code.

That said...

Try moving your NoConflict declaration outside of your Immediately-Invoked Function Expression (IIFE) & right BEFORE you bring-in your other library..

Like so...

<script>
$.noConflict();
// Code that uses other library's $ can follow here.

$(function () {
     // Do awesome stuff here...
})();
</script>

I also suggest...

Aliasing jQuery into your IIFE's like so...

<script>
    $(function ($) {
         // Do awesome stuff here...
    })(jQuery);
</script>

edited Mar 17, 2016 at 17:18

answered Mar 17, 2016 at 17:15

Prisoner ZERO

14.2k21 gold badges103 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pakk Over a year ago

One quick question - what with the extra })(); before ending the script?

Prisoner ZERO Over a year ago

See my update. You can alias arguments passed into your IIFE (if you like) - Cheers!

Collectives™ on Stack Overflow

jQuery undefined after $(function() {

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related