Following the link:
http://www.asp.net/ajaxlibrary/jquery_introduction.ashx
& then:
http://jquery.com/download/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DDownloading_jQuery%26redirect%3Dno
I have included the script files at the top of my page:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Then I have included the code for the datepicker:
<input type="text" id="simple-date" />
<script type="text/javascript" language="javascript">
// the jQuery ready shortcut
$(function () {
// set up our datepicker
$("#simple-date").datepicker();
});
</script>
but nothing happens when I click the text field....shouldnt a datepicker load?
Please advise.....thanks
I think you missed the jquery ui inclusion.
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
You forgot to add the jquery-ui plugin on your document
<script src="http//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
And have a look on themes too on the official site,I linked
Demo Fiddle
You should add both the CSS:
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="Stylesheet" />
and the JS for jQuery UI
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Related
I beginner in mvc Going to create application.I want to display datepicker in my application on textbox.I have written code in view .cshtml
<link href="~/Content/themes/base/minified/jquery.ui.datepicker.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"/>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(document).ready(function () {
$("#date").datepicker();
});
</script>
<h2>Index</h2>
<input type="text" id="date" />
When I click on textbox it is not working Please help if anyone have any idea about this.
In you bundleConfig.cs file first write **bundleTable.bundles.Usecdn = true**
after this add you CDN links into head section of layout.cshtml and after that
write this code in your head section of layout.cshtml
<script>
$(document).ready(function () {
$("#datepicker").datepicker();
});
</script>
here asign id = datepicker to the input where you want to show
Include jQuery UI in your script, add class="datepicker" where you want your datepicker to apear, and add this function:
$(function() {
$( ".datepicker" ).datepicker();
});
I am new to JQuery stuff ,but this is ridiculous ,i cant do drag and drop work
.php file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP Test</title>
</head>
<body>
<span id="drag">Drag me</span>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
</body>
</html>
my drag js file
$(document).ready(function() {
$('#drag').draggable();
});
By the way, do i need to have JQuery UI to make drag and drop stuff?
Thank you
You should include the libraries in the correct order:
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
Your custom code (drag.js) should be last, after jquery and jquery-ui have been loaded.
The draggable() function requires jQueryUI to work. After including jQueryUI your code works fine.
$('#drag').draggable();
http://codepen.io/tejzpr/pen/raXqKz
I would use cdn to save on speed and resources, and also be sure that you have a working copy. The order was probably your issue, however, as people mentioned above.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
You should first load UI script and use it after.
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
Important: don't forget jQuery 2.* browser compatibility:
https://jquery.com/download/#jquery-2-x
It doesn't support IE 8 or earlier!
I'm using <script src="js/jquery.min.js"></script>FOR THE SLIDER and many other functionalities.
I'm also using <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> FOR THE GALLERY.
Everything seems to work perfectly but when I add 1.6.2 jquery.min.js from googleapis it stops everything, including the sliders and the smooth scrolling. The only thing that is working is the gallery.
Here's my code:
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" media="all" />
<script src="js/jquery.min.js"></script>
<link href="css/style.css" rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
In the body I have this code:
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.contentcarousel.js"></script>
<script type="text/javascript">
$('#ca-container').contentcarousel();
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
This is the one that's causing conflict, I have tried to put it in the head but it did not make any difference:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
Thank you for your assistance!
In general you should avoid using 2 different versions of jQuery on the same page. Most of the time you won't need to - they are largely backwards compatible. Try putting the newer of the 2 versions of jQuery first, then removing the other one. As js/jquery.min.js is the newer version, try removing the google ajax apis one completely.
If you are using something that is broken by a new version of jQuery, check that there hasn't been a new version of that thing released. If there hasn't, try to fix it yourself to work with the new jQuery.
The next option is to check if there is an older version of the thing that requires a new jQuery that might work with the older jQuery version.
If none of those options work, you can try to use 2 versions of jQuery on your page using jQuery.noConflict(), but this is not recommended. After you load the first version and before you load the second, do something like:
j = jQuery.noConflict();
Then use j instead of $ whenever you want to use that version of jQuery, and $ for the second version.
enter code here <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script>
$j = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="vendor/jquery/jquery.min_multi_select.js"></script>
Works well, then you can use $j.ajax({
})
I am using jquery 1.10.2 to include a slider on my website, but for some reason it is not showing up. Please help!
Here is my code:
<head>
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script src="js/jquery-1.10.2.js"></script>
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'>
<script>
$(document).ready(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
Why is it not showing up? Code seems to be correct.
The JQUERY UI library also requires the standard JQUERY Library.
I have a fiddle which displays date picker. same code i have written below but nothing happens, what wrong i am doing? When i click on that green colour then no date picker is generated, but in fiddle it is coming fine, where i am doing wrong?
http://jsfiddle.net/cBwEK/10/
<html>
<head>
<script type="text/javascript" src="mootools-yui-compressed.js"></script>//mootools script
<script type="text/javascript" src="datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="datepicker.css" />
</head>
<body>
<input name='date_allow_empty' type='text' value='' class='date picker' />
<div id="invokeDP"></div>
<script type="text/javascript">
var dp = new DatePicker('.picker', {
pickerClass: 'datepicker ',
allowEmpty: true,
toggleElements: ['invokeDP']
});
</script>
</body>
</html>
EDIT: I have taken all scripts inside head section, previously these scripts were in body section
I think you miss a mootools core library.
<script src="http://fiddle.jshell.net/js/lib/mootools-core-1.4.5-nocompat.js"></script>
Here is my working solution http://jsbin.com/unosar/4/edit#source (click at Render button to preview)
Your CSS isn't being detected because you have your link in the body. If I remove the CSS from your fiddle, it doesn't display at all:
http://jsfiddle.net/cBwEK/11/
Try moving this to the head tag along with your script elements. I've also changed your comment block to the correct HTML syntax:
<head>
<script type="text/javascript" src="mootools-yui-compressed.js"></script><!-- mootools script -->
<script type="text/javascript" src="datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="datepicker.css" />
</head>
<body>
.......
Also, your class for the input is date picker. Looking at your mootools script, this should be datepicker.