Ok, this is strange. I would hope it's something I'm doing wrong and not that MS has two technologies that simply don't work together. (UPDATE: See bottom of post for Script tag order in HEAD section)
I'm trying to use the dataView template and client-side validation. If I include a reference to:
<script src="http://ajax.microsoft.com/ajax/beta/0911/Start.js" type="text/javascript"></script>
by itself, the dataview template works fine. but if I put in the following references:
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
then I get the following error:
> Error: Type._registerScript is not a
> function Source File:
> http://ajax.microsoft.com/ajax/beta/0911/MicrosoftAjaxTemplates.js
> Line: 1
and:
> Error: Sys.get("$listings") is null
> Source File:
> http://localhost:12370/Listings Line:
> 76
Here's the code calling the dataview:
$(document).ready(function () {
LoadMap();
Sys.require([Sys.components.dataView, Sys.scripts.jQuery], function() {
$("#listings").dataView();
Sys.get("$listings").set_data(listings.Data);
updateMap(listings.Data);
});
});
I would really appreciate any help with this one.
Thanks!
UPDATE:
I've tried moving around the order of the last 4 script tags, but to no avail.
You need to ensure that your reference to "jquery.validate.min.js" is AFTER your reference to "jquery.min.js" (or whatever version of the jQuery library you are using). You haven't listed that in your code sample.
Well, I ended up getting jquery validation to work and it doesn't have any conflicts with Start.js. So my script tags end up looking like such:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/beta/0911/Start.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcJQueryValidation.js" type="text/javascript"></script>
The strange thing is, I had to go find the MicrosoftMvcJQueryValidation.js file on the web in someone's example, as it wasn't included in the Scripts folder when I created the solution. Strange.
Related
I am trying to implement the urlrouting for asp.net webforms. My problem is all the js file and the css files not loaded on the page because it cannot refer to the correct path.
I've refer the js on the my master page as shown below.
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js" charset="utf-8"></script>
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js" charset="utf-8"></script>
Could you please help me for a solution.
you can use the Page.ResolveUrl(String relativeUrl)
Page.ResolveUrl("...") will generate an absolute path out of an relative one:
<script type="text/javascript" src='#Page.ResolveUrl("~/Scripts/jquery-1.7.1.min.js")' charset="utf-8"></script>
or
<script type="text/javascript" src='<%= Page.ResolveUrl("~/Scripts/jquery-1.7.1.min.js")%>' charset="utf-8"></script>
depending on if you're using razor markup or not.
This is the correct format to call your JQuery script with. The '~' refers to the root directory. So assuming your script is in this location, it should work.
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js" charset="utf-8"></script>
However, the line above it attempts to load the same script, but does not include the '~' character.
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js" charset="utf-8"></script>
...and you aren't attempting loading any CSS files. So delete the first line, and then add the correct tags to load your CSS files.
<link rel="stylesheet" type="text/css" href="~/Content/mystyle.css">
Only use / Because it means root of the site. (if Scripts dir under your root)
<script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js" charset="utf-8"></script>
I have 3 java-script files in my project, I use ajax minifier to concate them with command,
copy bootstrap.js+space.txt+jquery-1.8.2.js + space.txt + one.js + space.txt many.txt
ren many.txt many.js
"C:\Program Files (x86)\Microsoft\Microsoft Ajax Minifier\AjaxMin" many.js -o common.js
It creates common.js file, but when I add it in my page, it gives javascript error says,
$ is not defined, but I have already include jquery-1.8.2.js in common.js...
in my page I include it in head section with code,
<script src="js/common.js" type="text/javascript"></script>
when I do same for css file, it works...
can anyone give me good solution...?
You should include jquery before including common.js like,
<script src="js/jquery-1.8.2.js" type="text/javascript"></script>
<script src="js/common.js" type="text/javascript"></script>
Or in yours javascripts files do something like :
;(function(window, $, undefined) {
// your code and functions here
})(window, window.jQuery);
I'm deploying some code to a website and when I do the JavaScript does not run. I get the error:
SCRIPT5007: The value of the property '$' is null or undefined, not a Function object.
The code it is using is
#model MVCMasterDetail.DataAccess.cwwoLoadCurrentWorkOrderActualsResult[]
<script type="text/javascript">
$(document).ready(function () {
$(".grid-toggle").click(function () {
$(this).closest("table").find("tbody").show();
});
$(".hide-rows").click(function () {
$(this).closest("table").find("tbody").hide();
});
});
</script>
#Html.Partial("MasterDetailMasterPartial")
And what calls uses it is:
<td colspan="4"> Details<br/>Show- Hide</td>
Any help is appreciated.
Based off your comment in Ashley Ross's answer, it looks like your trying to add jQuery using a relative path. it also looks like you're using MVC. In MVC, the way you want to reference a file in html is:
<script src="#Url.Content("~/Scripts/jquery-1.7.1.js")"></script>
Also, it doesn't matter if your script tag goes in the head tag or not. The only difference it makes is loading. By putting it in the head tag, you're telling the browser to download the js file before it begins to load the body, which can be nice, but can also increase page load times. For faster page download, you actually want to put your script tags towards the bottom of your body tag, which defers downloading the js file until after the rest of the page has loaded. This results in faster page load times, but can cause some funky behaviors if you aren't anticipating it.
You need to include jQuery before any other scripts. It sounds like you have something like
<script type="text/javascript" src="customScriptThatUsesjQuery.js"></script>
<script type="text/javascript" src="jquery-x.y.z.min.js"></script>
instead of
<script type="text/javascript" src="jquery-x.y.z.min.js"></script>
<script type="text/javascript" src="customScriptThatUsesjQuery.js"></script>
Check that it appears in your HTML source before any other scripts that use it.
you have to add reference to jquery lib in <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
Trying to get my head around how to integrate fancyBox with an aspx c# website.
For example where does this code go:
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
the Site.master page? or each individual .aspx file?
How about this one:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
I assume this goes in the html part:
<a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>
Put this between the <head> tags on the master page.
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
I'd put this on your page
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
and then your link and images etc, where you need them.
You can place it on Master page one time, and there is no problem if you do not have any fancybox class on the page.
All the script code, go on master page, the html code can be anywhere (master or other pages that use the master).
When you have downloaded the fancybox it comes with a bunch of samples right click on the .html page and view the source that makes you easier how to use them.
Here is the demo for you
I try to use timepickr plugin, from http://haineault.com/media/jquery/ui-timepickr/page/
my headers:
<script src="<%=ResolveUrl("~/Scripts/jquery-1.4.2.min.js")%>" type="text/javascript"></script>
<script src="<%=ResolveUrl("~/Scripts/jquery-ui-1.8.2.custom.min.js")%>" type="text/javascript"></script>
<script src="<%=ResolveUrl("~/Scripts/jquery.utils.js")%>" type="text/javascript"></script>
<script src="<%=ResolveUrl("~/Scripts/jquery.strings.js")%>" type="text/javascript"></script>
<script src="<%=ResolveUrl("~/Scripts/ui.timepickr.js")%>" type="text/javascript"></script>
my view:
<input type="text" id="hourstime" style=" font-family:Arial;width: 47px; vertical-align:inherit;margin:1;"/>
and jquery:
$(document).ready(function () {
$('#hourstime').timepickr();
});
So, it fails with error:
Uncaught TypeError: Cannot call method 'call' of undefined
Any ideas?
You also need to include jquery.timepickr.js. Since this plugin has 3 files,
2 JS [jquery.timepickr.js, ui.timepickr.js] and
1 CSS [jquery.timepickr.css]
This plugin didn't support jQueryUI >= 1.8
Use updated plugin for jQueryUI 1.8: http://bililite.nfshost.com/blog/2009/07/09/updating-timepickr/