Using jQuery in ASP.NET MVC Content PlaceHolder

Question

I have included jQuery as well as colorize plugin reference in my master page and I want to use it in my Content pages. My scripts are located in Scripts folder in MVCApplication. I am referencing it in my master pages as :

<script language="javascript" type="text/javascript" src="<%= Url.Content ("~/Scripts/jquery-1.3.2.min.js")%> " />

and same for colorize.js.

In my Content page, I am using colorize plugin for my table.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
    <script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $('#mytable').colorize();
        // put all your jQuery goodness in here.
    });                    
    </script>

    <table id="mytable">
     ...
     ...
    </table>
</asp:Content>

But whenever I run this application, neither jQuery works nor the colorize function work.

Solutions I tried :

1. Viewed the source in IE 7 and jQuery.js & colorize.js are references properly.

2. Viewed the source in FF 3.5.6 and Google Chrome, and I saw that jquery.js is referenced properly but colorize.js reference is not at all included in HTML.

3. Later in FF, I jQuerified my mvc app, and all worked properly(references as well as colorize fn ).

So I want to know where I am doing wrong, in referencing script files in master pages or using colorize plugin in Content page?

Also other suggestions are welcome.

Answer 1

Your script tag needs to have a closing tag :

<script language="javascript" 
        type="text/javascript" 
        src="<%= Url.Content ("~/Scripts/jquery-1.3.2.min.js")%>" >
</script>

Answer 2

<script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jquery-1.3.2.min.js " />

first is standard working of me, second is yours. Can't see much differences, besides the language and the /> in stead of

You placed it in the header?

Answer 3

I have to agree with adriaanp, when putting the script, although is a bummer to remember,is standard procedure to put the closing tag even though you dont put a thing inside of it.
Sometimes as well, you can have problems with the temp files, if that's so, try to put the code of this colorize plugin in a file that already works, such as jquery's, as you told that this one's reference works.
I am trying to figure it out as well, it happened to me with the corner plugin. I added the new file into the solution, and still it not worked. When i did this steps i told you, just to make up my mind, it worked.
Of course i just tested it and then put it back to its right file.

Answer 4

Closing the script tag, solved the reference problem of both the .js files. Now jQuery is functioning properly. However colorize() is still not working

Now getting following error :

$("#mytable").colorize is not a function