1

I'm trying to load jQuery UI tooltips into a web page within an MVC4 view but I'm getting the error:

Uncaught TypeError: Object [object Object] has no method 'tooltip'

I'm using jQuery 1.9.1 and jQuery-UI 1.10.2 which as far as I know should allow me to use tooltips? Looking at the Sources tab in Chrome I can see the jQuery and jQuery-UI JavaScript files as well as the jQuery-UI css file.

Here's the markup I'm using:

<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.10.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/TableCreationScript.js"></script>

<script>
    $(function () {
        $(document).tooltip();
    });
</script>

Am I missing something?

Improve this question
7
  • 3
    console.log(window.jQuery.ui); what does it return Commented Apr 14, 2013 at 8:48
  • 1
    It's coming back as undefined. Commented Apr 14, 2013 at 8:50
  • 1
    there's your problem then Commented Apr 14, 2013 at 8:51
  • remove TableCreationScript.js temporaily and do what @Ohgodwhy says again Commented Apr 14, 2013 at 8:52
  • The scripts...they're within the web server? server has permision to access them? And what's in that TableCreationScript? Does it re-invoke jQuery? if it does, it will destroy the previous objects attachments, and thussly, the ui object. Commented Apr 14, 2013 at 8:52

3 Answers 3

Reset to default
1

My best guess is:

I'm pretty sure that ../../Scripts will fail if an url is just a little different from www.domain.com/app_path/controller/action

../ joined together with url rewrite is NOT your friend. ../ is handling the path relative to the current url.

Imagine this:

  • If your current url is http://www.example.com/app_path/home/index/, then ../../Scripts/jquery-ui-1.10.2.min.js will translate to: http://www.example.com/app_path/Scripts/jquery-ui-1.10.2.min.js which is good. But if your url is: http://www.example.com/app_path/home/ than the script will be http://www.example.com/Scripts/jquery-ui-1.10.2.min.js which is even outside your application.

ASP.NET has a way of handling application relative url-s:

<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.10.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/TableCreationScript.js")"></script>

<script>
    $(function () {
        $(document).tooltip();
    });
</script>

EDIT:

After reading the comments now I'm pretty sure the url to the script file is wrong in some way. You need to check if the javascript files are referenced and found correctly:

Do the following:

  • Open the html source of your document in a decent browser.
  • Check where the script URL is pointing to. (For example in firefox you can click on the urls in the source, and you can view the pointed site's source.
  • In your case clicking the script's url needs to take you to the source of the script file!
  • If it shows the source of a html file you are quite possibly looking at the source of a 404 Not Found

Or you can just:

  • Check the network tab in chrome developer tools. You should be able to see if everything loaded correctly.
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

That didn't fix it. But thanks for the advice, I've updated all my script tags to use @Url.Content.
Check my updated answer. If a recent version of jquery and jquery ui is properly loaded $(document).tooltip() will not fail.
0

Thanks for the help, OhgodWhy's console comment led me to this answer: MVC4 jQuery UI does not work

And it now works.

Improve this answer

2 Comments

Can you tell us what was the problem?
In the default layout for an MVC4 project, the body contains the line @Scripts.Render("~/bundles/jquery"). This replaced the jQuery file I loaded within my view with one that was loaded after the jQuery-UI file. Moving this to the head of the layout loads the jQuery script before scripts in my view, fixing the problem. This also means I don't need to add the jQuery script within the view.
0

OK, I found the resolution but without an understanding of why... 

        <asp:ScriptManager runat="server">
        <Scripts>
            <%--Framework Scripts--%>
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="bootstrap" />

            <%--Site Scripts--%>
        </Scripts>
    </asp:ScriptManager> makes things work while...

The following DOES Resolve/Load the scripts but does not work...

<link href="../Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/jquery-2.1.4.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.