'jQuery' is undefined, using meiomask

Question

-- 7/1/2014 -- I have a VS Web Site I'm working on in VS 2012. I get this same error whether I bring up the site using IE or using F5 in VS: "'jQuery' is undefined". Here is the code the debugger highlights from SearchPosition.aspx, indicating the exception:

(function($) {
    // call setMask function on the document.ready event
    $(function() {
        $('input:text').setMask();
    }); 
})(jQuery);

There is also a master page in the project containing SearchPosition.aspx, and as I understand it the contents of the master page should be inherited by SearchPosition.

The master page has this code:

<script language='javascript' type='text/javascript' src='<%# ResolveUrl("~/includes/js/meiomask.js") %>' charset="utf-8"></script>

I have seen this error reported to be thrown due to jQuery version conflicts with IE, but this happens when I use IE8, IE11 and Chrome. Supposedly that error only happened with IE8 and earlier.

I'm not sure how to evaluate ResolveUrl, but there is a file named meiomask.js in the "Includes" folder of this project.

Any help is greatly appreciated. Thanks.

-- 7/2/2014 -- Thank you for the suggestions.

I tried adding the recommended line to the master page:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

This resulted in a new error:

Unhandled exception at line 20, column 8 in http://localhost:52629/Budget/

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'setMask'

The debugger highlighted this line:

 $('input:text').setMask();

I also tried changing the script tag as suggested in SearchPosition.aspx to this:

<!-- <script language='javascript' type='text/javascript' src="~/includes/js/meiomask.js" charset="utf-8"></script> -->

...and the original error was thrown. The old version of the script tag re-appeared in the debugger on a page labelled either "SearchPosition.aspx [dynamic]" or "blank [dynamic]" (I tried this test a few times and the page name alternated).

I should mention I work at a university and this VS Solution was donated to us by another cooperating institution where the Web Site is up and running. Probably the code works as it was delivered to me in their environment.

Also, I may have caused more trouble for myself by re-installing the jQuery NuGet package v 2.1.1 yesterday after I first got this error. I did this before I realized there was already an included set of .js files in the project which I suspect are an older version. Among other included .js files I see jquery-1.2.6.min.js.

The master page also contains this line:

<!-- <script language='javascript' type='text/javascript' src='<%# ResolveUrl("~/includes/js/jquery-1.2.6.min.js") %>'></script> -->

Thanks again.

-- 7/1/2014 10:25 AM --

I'm relatively new to VS and .NET (can you tell?) but after looking at it I think the problem may be the way the master page is being rendered. Here are the lines 5-22 of SearchPosition.aspx as they appear in the debugger at the time of the error. Notice that scr=''. Shouldn't there be something between the single quotes?

</title><link href="includes/css/LSUStyle.css" rel="stylesheet" type="text/css" />
    <script language='javascript' type='text/javascript' src=''></script>
    <script language='javascript' type='text/javascript' src='' charset="utf-8"></script>
    <script language='javascript' type='text/javascript' src=''></script>

    <script language='javascript' type='text/javascript'>
    // meioMask options 
    (function($) {
        // call setMask function on the document.ready event
        $(
        function() {
            $('input:text').setMask();
        }
    ); })(jQuery);

    $.ajaxSetup({ cache: false }); 
    </script>

...and here is how the code appears in the master page before rendering:

    <head runat="server">
    <title>Budget System (<%=GetCurrentInstance() %>)</title>
    <link href="~/includes/css/LSUStyle.css" rel="stylesheet" type="text/css" />
    <script language='javascript' type='text/javascript' src='<%# ResolveUrl("~/includes/js/jquery-1.2.6.min.js") %>'></script>
    <script language='javascript' type='text/javascript' src='<%# ResolveUrl("~/includes/js/meiomask.js") %>' charset="utf-8"></script>
    <script language='javascript' type='text/javascript' src='<%# ResolveUrl("~/includes/js/script.js") %>'></script>

    <script language='javascript' type='text/javascript'>
    // meioMask options 
    (function($) {
        // call setMask function on the document.ready event
        $(
        function() {
            $('input:text').setMask();
        }
    ); })(jQuery);

    $.ajaxSetup({ cache: false }); 
    </script>

Does it not work when you directly reference the src file without ResolveUrl `` — Dennis R, Jul 01 '14 at 21:50
Looks like you are not including the jQuery library itself. You need to include it in the page before any plugins. — jmoerdyk, Jul 01 '14 at 21:51
jquery reference must be added before adding any plugin or in this case meiomask — Carlos487, Jul 01 '14 at 21:59
To me it looks like the way reference the js files in your master page or the version of jquery `jquery-1.2.6.min.js` is not compatible with `meiomask.js` is the issue. — Dennis R, Jul 02 '14 at 17:45
What happens if you comment all three js files reference in your maste page and just drag the required js files from solution explorer and drop them into your masterpage? let visual studio generate the relative path to the files instead of you resolving the url through code. — Dennis R, Jul 02 '14 at 17:49

Dennis R · Answer 1 · 2014-07-01T22:01:59.243

0

Make sure you have jquery referenced in your master page. Include it from CDN like the below

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

or refer the jquery file from your local application folder.

edited Jul 01 '14 at 22:01

answered Jul 01 '14 at 21:54

Dennis R

3,195
1
19
24

OP stated they did this. – Popnoodles Jul 02 '14 at 14:42
Well, the OP didn't earlier have the jquery reference or didn't state he has one in his original post (the current one is edited). The answer was based on his original issue `'jquery' is undefined`. May be I'll delete this answer if it's not going to be useful. – Dennis R Jul 02 '14 at 17:40
@mason I think we can leave off the protocol. The browser will use the page's protocol to try to obtain the file. On non-secure pages, http. On secure pages, https. Please refer [here](http://stackoverflow.com/questions/3622598/https-and-external-cdn-hosted-files). The other reason I left the protocol blank was because I recently had an issue in my secured application trying to access the jquery file from non-secured CDN (I had the source tag starting with `http`) resulting IE in throwing the prompt `do you want to view only the webpage content that was delivered securely` – Dennis R Jul 03 '14 at 20:52

Chris · Answer 2 · 2014-07-03T20:04:29.927

There were two problems. The first turned out to be that the code I mentioned in my initial post:

        <script language='javascript' type='text/javascript'  src="~/includes/js/meiomask.js" charset="utf-8">      
    // meioMask options 
    (function($) {
        // call setMask function on the document.ready event
        $(
        function() {
            $('input:text').setMask();
        }
    ); })(jQuery);

    $.ajaxSetup({ cache: false }); 
    </script>

... was duplicated. It appeared in both Budget.Master.aspx and in SearchPosition.aspx. I commented out the one in SearchPosition. The second problem is that ResolveURL is not working. As suggested, I added the "src=" into the script tag containing the function call. jQuery ran without error. I still don't know why ResolveUrl isn't working.

Thanks again for taking the time.

'jQuery' is undefined, using meiomask

2 Answers2