I have tried to figure this out for 2 days now reading every post on 10 or 12 sites including this one. Can someone tell me what i did wrong here? I am calling the first jQuery library and implimenting noconflict and still the first jquery plugin will not load.
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type='text/javascript'>
var $jq170 = jQuery.noconflict();
</script>
<script src="assets/js/jquery.knob.js"></script>
<script src="assets/js/jquery.ccountdown.js"></script>
<script src="assets/js/init.js"></script>
<!--[if lte IE 7]><script src="assets/css/lte-ie7.js"></script><![endif]-->
<!-- Main Jquery & Hover Effects. Should load first -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="assets/js/hover_pack.js"></script>
<!-- Bootstrap core CSS --> \
<link href="assets/css/bootstrap.css" rel="stylesheet">
You are trying to use $ after assigning the first version to $jq170.
In order to continue using $ you would need to do:
$jq170(function($){
/* can use "$" here and it will be the same as "$jq170" */
});
It is most likely that you could use the newer version only and replace the first version so you only include jQuery once in the page.
If plugins are failing in 1.7 when switching to 1.10 it is possible that the migrate plugin may help also. See jQuery downloads
Related
I have these codes in my webpage:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
It is working perfectly fine with my textbox. But since I have a dropdown function with my header:
I need these lines to make them work:
<%--<script type="text/javascript" src='<%= Page.ResolveUrl("~/js/jquery-1.11.3.min.js") %>'></script>
<script type="text/javascript" src='<%= Page.ResolveUrl("~/js/bootstrap.min.js") %>'></script>--%>
When I try to paste them, the header dropdown is working but the problem now is my datepicker. Any tricks on this please?
ANSWER: made it work by pasting the pageresolve url to the top .
UPDATE QUESTION: what may cause this problem?
You are including jQuery.js twice. The second version is loading after the datepicker plugin has extended the original jQuery object and wipes it out .
You likely are seeing error datepicker is not a function or similar. You made no mention of errors thrown which is always the first thing to look for
Only include jQuery.js once and before all dependent plugins and code.
I have a single line code that displays JS alert right now. I am trying to replace it with the jQuery alert so that I can theme it. Below is the code that I wrote for jQuery alert:
ScriptManager.RegisterStartupScript(this, GetType(), "onload",
"window.onload = function () {jAlert('This is a custom alert box', 'Alert Dialog');}", true);
This code used to be like this:
ScriptManager.RegisterStartupScript(this, GetType(), "showalert",
"alert('This is a custom alert box');", true);
The existing code works fine. But my code gives me an error saying,
value of property jalert is null
I am unsure, what I am missing here.
You're running an external plugin to JQuery.
Make sure that on your page you have valid references to the jquery library and jalert plugin.
The $.browser property is considered obsolete and should not be used anymore. This is because there are a lot of browsers that misidentify about whom they are. IE12, for instance, identifies itself as a Mozilla browser.
You can find more information about the $.browser property here.
If your version is JQuery 1.8 and under use this:
<!-- Dependencies -->
<script src="jquery.js" type="text/javascript"></script>
<!-- Core files -->
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
If your version is JQuery 1.9 and over, you'll need to reference the jquery-migrate.js file so that you can use the $.browser property:
<!-- Dependencies -->
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-migrate.js" type="text/javascript"></script>
<!-- Core files -->
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
Does someone know how to make this plugin "omnigrid" work in IE 9 and up.
http://www.omnisdata.com/omnigrid/
<link rel="stylesheet" media="screen" href="omnigrid.css" type="text/css" />
<script type="text/javascript" src="mootools/mootools-1.2.4-nc.js"></script>
<script type="text/javascript" src="mootools/mootools-1.2.4-more.js"></script>
<script type="text/javascript" src="omnigrid.js"></script>
There is literally no need to try to get that to work when you can use SlickGrid - https://github.com/mleibman/SlickGrid - which is framework agnostic and tested to work well with 1 million rows.
Aside from that, you can fix it and upgrade the code to MooTools 1.4.5 but that's broken in IE11 - really need to wait for 1.5 release (soon!) before getting started.
I am trying to use jScrollPane, the original scrollbar disappearing and it is not working!
I already used it in another site about a month ago, and it worked well. The single problam was: The mouse wheel was not worked(Thats my second problem).
Code:
<link type="text/css" href="jScrollPane/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jScrollPane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="jScrollPane/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="jScrollPane/mwheelIntent.js"></script>
<script type="text/javascript">
$(function(){ $("#body").jScrollPane(); });
</script>
</head>
<body id="body">
I'm working on this same issue and have discovered a couple of things. I agree that you should use a newer version of jQuery. If you use 1.8.2, it will work. However, if you use 1.9.1, you will need to get rid of mWheelIntent.js as there is some issue with it and 1.9.1. Hope this helps someone!
The plugin needs to interact with the css file which contains basic styling of the scroll pane elements. The window.load method, loads all the assets of the page before of running the initialization script. I have used jQuery 1.9.1 for this case.
$(window).load(function(){
$(".scroll-pane").jScrollPane();
});
I hope this helps. Best regards
How can I replace following lines with links to the Google jQuery API?
1st line is already done.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/tab.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.cookie.js"></script>
and maybe even this line:
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.1.css" media="screen" />
You can't...google doesn't host these plugins like they do jQuery Core and jQuery UI.
You can see what they host here: http://code.google.com/apis/libraries/devguide.html
The plugins are not a part of the CDN as of yet. Plugins are mostly user built, so I doubt if there will be a CDN for that.