I call the js files for bootstrap twitter library but I get the error that indicates
$("a[rel=popover]").popover is not a function
.
<script src="../../jq/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="../../bootstrap/js/bootstrap-tooltip.js" type="text/javascript"></script>
<script src="../../bootstrap/js/bootstrap-popover.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
// second supervisor popover
$('a[rel=popover]').popover({
placement: 'below',
offset: 20,
trigger: 'manual'
});
});
</script>
This happened to me in ASP.NET MVC 4. In my project I had a
#Scripts.Render("~/bundles/jquery")
both at the top of my page in the <head> and then again one of these little #Scripts.Render("~/bundles/jquery") suckers snuck in towards the end of the page just before the </body>. I removed the redundant line at the end of the page and the problem went away.
Note that the browser rendered the <head> in the correct order:
<script src="/Scripts/jquery-1.9.1.js">
<script src="/twitterBootstrap/js/bootstrap.js">
<script src="/Scripts/modernizr-2.5.3.js">
However, I ended up with another
<script src="/Scripts/jquery-1.9.1.js">
at the bottom of the page. This confused the browser and it confused the heck outta me too.
This works:
http://jsfiddle.net/9W53Q/7/
Edit: http://jsfiddle.net/9W53Q/272/
Make sure the resoures are being added in the right order (tooltip first).
Or like Richard Dalton suggested (and I recommend), just use the compiled bootstrap.js file.
$(document).ready(function() {
$('a[rel=popover]').popover();
});
Related
I've asked why the below doesn't work and got a very clear answer.
<head>
...
<script src="Stuff.js" type="text/javascript"></script>
</head>
<body>
...
#Scripts.Render("~/bundles/jquery")
</body>
So I've changed that into this.
<head></head>
<body>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/Stuff.js")
</body>
However, I get the same misbehavior. Based on the diagnostics from the linked answer, I'm guessing that the scripts still don't render in the right order. How do I control it? Should I move both to header instead?
The generated markup ends like this.
</form>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="Stuff.js"></script>
</body>
</html>
As asked - I'm adding a screenshot of the network tab showing scripts. There are other resources as well (images and stuff) but none of them is 4xx, no weird messages and I've turned them each off, still hitting the same problem.
Working in Default.js (formerly Stuff.js).
window.onload = function() {
console.log($(this));
};
Producing error in Default.js (any of the lines).
//$(document).ready(function () { alert("ready"); });
$(window).onload(function () { alert("onload"); });
You should use
$(window).load(function () { alert("onload"); });
onload is JavaScript native event, but in JQuery is load
Please refer to the following post for more details :
difference between $(window).load(function() { and $(document).ready(function() {
The second point and most importantly is you have the following
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/Stuff.js")
If there any JQuery call in your views, let say you needed to call something in your home page, then JQuery library is not defined yet. Because Jquery renders after RenderBody
What you need to do is put a Section and and render the section after Jquery is loaded
You should have the following in your layout
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/Stuff.js")
#RenderSection("Scripts", required: false)
And in your views put the javascripts calls in the section
#section Scripts {
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() { alert ('Hi'); });
//]]>
</script>
}
I hope this helps
I am having an issue getting a dialog to work as basic functionality. Here is my jQuery source imports:
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.11.1.js"></script>
<script type="text/javascript" src="scripts/json.debug.js"></script>
Html:
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
<script type="text/javascript">
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
</script>
From the posts around seems like as a library import issue. I downloaded the JQuery UI Core, Widget, Mouse and Position dependencies.
Any Ideas?
Be sure to insert full version of jQuery UI. Also you should init the dialog first:
$(function () {
$( "#dialog1" ).dialog({
autoOpen: false
});
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
if some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict(true) from the second version will return the globally scoped jQuery variables to those of the first version.
Some times it could be issue with older version (or not stable version) of JQuery files
Solution use $.noConflict();
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
// Code that uses other library's $ can follow here.
</script>
If you comment out the following code from the _Layout.cshtml page, the modal popup will start working:
</footer>
#*#Scripts.Render("~/bundles/jquery")*#
#RenderSection("scripts", required: false)
</body>
</html>
Change jQueryUI to version 1.11.4 and make sure jQuery is not added twice.
I just experienced this with the line:
$('<div id="editor" />').dialogelfinder({
I got the error "dialogelfinder is not a function" because another component was inserting a call to load an older version of JQuery (1.7.2) after the newer version was loaded.
As soon as I commented out the second load, the error went away.
Here are the complete list of scripts required to get rid of this problem.
(Make sure the file exists at the given file path)
<script src="#Url.Content("~/Scripts/jquery-1.8.2.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript">
</script>
and also include the below css link in _Layout.cshtml for a stylish popup.
<link rel="stylesheet" type="text/css" href="../../Content/themes/base/jquery-ui.css" />
I had a similar problem and in my case, the issue was different (I am using Django templates).
The order of JS was incorrect (I know that's the first thing you check but I was almost sure that that was not the case, but it was). The js calling the dialog was called before jqueryUI library was called.
I am using Django, so was inheriting a template and using {{super.block}} to inherit code from the block as well to the template. I had to move {{super.block}} at the end of the block which solved the issue. The js calling the dialog was declared in the Media class in Django's admin.py. I spent more than an hour to figure it out. Hope this helps someone.
I'm having some issues with prettyPhoto on one of my clients website. Here is the link for reference: http://www.browardmicrofilm.com/pages/kodak-vizit-essential.html
I've used prettyPhoto on multiple other websites without issue. However for some reason, this website just doesn't want to perform the script properly. Instead of opening an image in the lightbox clone, it simply opens it in a new page. Perhaps it has something to do with the hosting but either way, wanted to see what professionals like you think!
I'm using Firefox 26 (Mac version) and I used Firebug to determine the error:
TypeError: $ is not a function
$(document).ready(function(){
I've tried numerous solutions, including one that made me change "$" to "window.jQuery and then for some reason the next line in the code creates the same error.
Here's the my code for those of you that wish to skip the entire page source code:
In my header:
<link href="../prettyPhoto.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
The final script just before the closing body tag:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'light_rounded',
});
});
</script>
I know my links are good, which is why I'm not including them.
Vanilla jquery needs to be declared before any library built on top of it
<!--first, jquery-->
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
<!--then the rest-->
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
Error below is saying that jQuery is not loaded.
TypeError: $ is not a function
$(document).ready(function(){
Check your resources, my guess is that your paths are case sensitive and libraries are not being properly loaded.
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
Check your resources.
Make sure that jQuery is loaded before the plugin is loaded.
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
Ultimately I abandoned the prettyPhoto javascript and went with an alternative. Lightbox 2.0:
http://lokeshdhakar.com/projects/lightbox2/
It works just as I'd like and no problems.
Hello I'm looking for someone proficient in Javascript. The site I'm using uses a javascript file to initialize the plugins and load settings and what not. So after reading some of
http://benoit.pointet.info/stuff/jquery-scrollsnap-plugin/
I decided to use it to snap to my divs(all with the class "slide")...
However placing this
$(window).scrollsnap({
snaps: '.slide',
proximity: 100
});
in my js.js file accomplished nothing
Any help is appreciated!
The code I used with that was this and it worked, give it a try:
$(document).ready(function() {
$(document).scrollsnap({
snaps: '.slide',
proximity: 100
});
});
Not sure about $(window), where did you get that from?
Also, are you linking to the appropriate javascript files and to the jquery library? Make sure to put it at the end of your html like this:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.scrollstop.js"></script>
<script src="js/jquery.scrollsnap.js"></script>
<script src="js/jquery.fitvids.js"></script>
</body>
</html>
Let me first say I am very unfamiliar with javascript, but I am trying use twitter's twipsy (http://twitter.github.com/bootstrap/javascript.html), their take on jQuery's tipsy.
Here are all the scripts that are getting loaded:
<script src="/javascripts/effects.js?1314051118" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1314051118" type="text/javascript"></script>
<script src="/javascripts/controls.js?1314051118" type="text/javascript"></script>
<script src="/javascripts/rails.js?1314051118" type="text/javascript"></script>
<script src="/javascripts/bootstrap-twipsy.js?1326303918" type="text/javascript"></script>
<script src="/javascripts/application.js?1314051118" type="text/javascript"></script>
As you can see, bootstrap-twipsy.js is getting loaded.
Then on an index.html.erb page I am trying the following code:
<a href="#" id="example" rel='twipsy' title='Some title text'>text</a>
<script>
$(function() {
$('#example').twipsy();
$("a[rel=twipsy]").twipsy({
live: true
});
})
</script>
I get nothing. The reason I have the ('#example').twipsy in there is that I was just trying to call it two different ways, but neither worked. Does anyone see what I'm doing wrong?
In a similar question (http://stackoverflow.com/questions/4916501/where-to-put-my-js-for-tipsy-jquery-tooltip) someone found that their prototype.js was causing conflicts, but I've removed that and I still got nothing.
Installing jquery-rails did the trick