Geek Answers Handbook

Where should the jquery script block be placed on the ASP.NET MVC main page?

Getting started with jquery and having trouble getting greetings like world for asp.net mvc. When I try to load a page with this script, I get the error "expected object".

but. Where should script tags be placed on the main page? B. What can I do wrong? Are there certain elements on my page?

<script src="../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script> <script src="../Scripts/jquery.corner.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("a").click(function(event) { alert("Thanks for visiting!"); }); }); </script>
+6
jquery asp.net-mvc
source share
4 answers

B) I checked your built-in script on the quick test page and it works fine, so I recommend using Firefox with the FireBug plugin installed to find the problem:

  • In the Firebug "script" tab, use the "Watch" window on the right to insert and check parts of your script and see what they return.
  • I would start by placing $ in the clock window and checking if it is recognized as function() : maybe jQuery is not connected properly
  • Then put $("a") in the viewport and check if the installed set has the correct number of elements matching the selector "a" in the set
  • Keep working with the script until you encounter something wrong.
+1
source share

Hmmm ...

To answer your first question: they should be placed in the <head> element.

Also, I usually use the 'bind' method when sinking events in the DOM (for example, it looks like you're trying to do).

So, the code will look like this:

 $(document).ready(function() { // Bind each link to a handler: $("a").bind('click dblclick', function(event) { alert('click'); }) });

In addition, a few design tips (since you're working with something close to your heart (ASP.NET MVC with jQuery):

Add an additional "ContentPlaceHolder" at the bottom of the main <head> page. This will allow you to work with specific javascript on the page in the right place: in the "head" section of the page, and this will allow you to include page-specific javascript.

It will look something like this:

  <asp:ContentPlaceHolder ID="HeadContent" runat="server" /> </head>

Why is this useful? . I will tell you: this rounded jQuery plugin that you use can only be used on a few pages - why include it on every page?

+11
source share

I agree with Dan to add content placeholder for linking in scripts. However, the head is generally not the best place to host your JavaScript in terms of performance. The best place at the bottom of the page. This way, your HTML can load up to your JavaScript. See Yahoo YSlow . Your code should still work in the section of the chapter.

I like to put most of my site in one file and link it to all pages. If it gets very large, you can split it into several files. This uses browser caching.

Regarding the wrong jQuery code. I'm not sure. It looks pretty correct. The only thing that interests me is the event parameter. Try to pull it out completely. I know that function parameter is allowed, but I usually use "this". Also try renaming the parameter.

+2
source share

The main page is usually stored in /Views/Shared/Site.Master, while the scripts are in / Scripts, so they are:

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

it should be

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

but I would suggest using a helper:

  public static class Helper { private static string ScriptsRoot = "~/scripts/"; public static string ScriptUrl (string scriptFile) { return VirtualPathUtility.ToAbsolute (ScriptsRoot + scriptFile); } }

And then referring to your script as follows:

 <script type="text/javascript" src="<%= Helper.ScriptUrl("jquery-1.2.6.min.js") %>"></script> <script type="text/javascript" src="<%= Helper.ScriptUrl("jquery.corner.js") %>"></script>
+1
source share

More articles:


All Articles