When I insert this script link in my index.php
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
It turns into this..
This is what it normaly look like and supposed to be look like
Here's the whole code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
<?php include ('title.php');?>
</title>
<link rel="icon" href="assets/img/LOGO.png">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
<link href="assets/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/resources/demos/style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<div id="wrapper">
<?php
session_start();
include ("checkSession.php");
include ("nav.php");
include ("pagecontent.php");
?>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/plugins/metisMenu/metisMenu.min.js"></script>
<script src="assets/js/custom.js"></script>
<script src="assets/js/jquery.dataTables.min.js"></script>
<script src="assets/js/jquery-1.3.2.min"></script>
<script>
$(document).ready(function(){
$('#listTable').DataTable();
});
</script>
<script>
$(document).ready(function(){
$('#print').DataTable({
"paging": false,
"filter": false,
"info": false
} );
});
</script>
<script language="javascript">
function Clickheretoprint()
{
var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=1000, height=400, left=100, top=25";
var content_vlue = document.getElementById("content").innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('</head><body onLoad="self.print()" style="width: 1500px; font-size:11px; font-family:arial; font-weight:normal;">');
docprint.document.write(content_vlue);
docprint.document.close();
docprint.focus();
}
</script>
<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>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
</script>
</body>
</html>
Well If I remove the script link and put in the other source code, It doesn't work so I really need that script link to run the function :(
You've double (actually, triple) included jQuery.
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery-1.3.2.min"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
It's likely some stuff in your jQuery 1.3.2-compatible code doesn't work in jQuery 1.10.2 (which as the last version loaded, overrides the others). Check your console for script errors.
You can use multiple versions of jQuery on a page using jQuery.noConflict but you'd really be better off solving the more fundamental issue.
I got it now, I just need to edit it into
<script src="assets/js/jquery-1.10.2.js"></script>
<script src="assets/js/jquery-ui.js"></script>
I believe it's because of the protocol used to access the CDN of jquery. Try this instead:
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
if that doesn't work, try with HTTPS:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Related
I am working on a site your can see the demo here https://masborn.com/theretreatpalmdubai/
The data picker is calendar is not working here.
jQuery(function () {
jQuery("#bookdate").daterange({
showButtonPanel: true,
closeText: "X",
onClose: function () {
jQuery(".bookinginputs").css("display", "block");
},
onSelect: function (){
jQuery("#demodate").css("display", "none");
jQuery(".ui-datepicker-close").css("display", "none");
}
});
});
I have spend many time on it and not find what is the issue here. Can any one give some input?
From the jquery ui documentation, its called "datepicker" not "daterange".
Also, consider using the $ shortcut instead of jQuery, it makes it easier to read.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
i'm using jquery date rangepicker. while i select date from daterange picker i don't want to close the calendar. so i use this code. but it's not working. can any one help. please. here is my code
<div class="form">
<input id="d" class="form__daterange">
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="src/jquery-ui.js"></script>
<script src="src/jquery.daterange.js"></script>
<script>
$(function () {
$("#d").daterange({
numberOfMonths: 12,
minView: 2,
autoclose: false,
});
});
</script>
you need autoClose: false
<script>
$(function () {
$("#d").daterange({
numberOfMonths: 12,
minView: 2,
autoClose: false,
});
});
Try this code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
or modify yours like
<script>
$(function () {
$("#d").datepicker({
});
});
</script>
My autocomplete and datetimepicker scripts conflicts. It is, therefore, datepicker not work. I try noConflict() method but, it's not work for me. I must use these two script codes.
My script codes
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
$("#projeadi").autocomplete("projeler.php", {
selectFirst: true
});
});
</script>
<script src="jquery-ui.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
<link rel="stylesheet" href="jquery-ui.min.css">
<link rel="stylesheet" href="jquery-ui.structure.css">
<link rel="stylesheet" href="jquery-ui.structure.min.css">
<link rel="stylesheet" href="jquery-ui.theme.css">
<link rel="stylesheet" href="jquery-ui.theme.min.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({dateFormat: "yy-mm-dd"});
$.datepicker.regional['tr'] = {
closeText: 'kapat',
prevText: '<geri',
nextText: 'ileri>',
currentText: 'bugün',
monthNames: ['Ocak','Şubat','Mart','Nisan','Mayıs','Haziran',
'Temmuz','Ağustos','Eylül','Ekim','Kasım','Aralık'],
monthNamesShort: ['Oca','Şub','Mar','Nis','May','Haz',
'Tem','Ağu','Eyl','Eki','Kas','Ara'],
dayNames: ['Pazar','Pazartesi','Salı','Çarşamba','Perşembe','Cuma','Cumartesi'],
dayNamesShort: ['Pz','Pt','Sa','Ça','Pe','Cu','Ct'],
dayNamesMin: ['Pz','Pt','Sa','Ça','Pe','Cu','Ct'],
weekHeader: 'Hf',
dateFormat: 'dd.mm.yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['tr']);
});
</script>
<script>
$(function() {
$( "#datepicker2" ).datepicker({dateFormat: "yy-mm-dd"});
});
</script>
How I solve this problem. Sorry for my bad English.
OK I solved my problem. I edited jquery.js and autocomplete.js, I changed "$" to "jQuery" in the these jquery.js and autocomplete.js . After these I change my script code to
<script>
var $cakisma = jQuery.noConflict();
$cakisma(document).ready(function(){
$cakisma("#projeadi").autocomplete("projeler.php", {
selectFirst: true
});
});
</script>
and it's worked like a charm. Thanks for help everyone.
Try this:
Navigate to: http://jqueryui.com/datepicker/
Cut/Paste the code in "view source" to your own new HTML page and see if it actually works.
Tried this in Chrome and Firefox.
One thing I noticed is that they don't wrap the function in '$(document).ready(function ()'
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Try to replace
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
by
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
As saied Jason Aller in the comment :
The reason they are using // at the beginning rather than http:// is
so that it will be protocol agnostic and work with https connections.
It avoids mixed content security warnings, but breaks when the
protocol is file:// – Jason Aller
So just add http: before //code.jquery.com
Here is my solution:
$(document).ready(function () {
var userLang = navigator.language || navigator.userLanguage;
var options = $.extend({},
$.datepicker.regional["ja"], {
dateFormat: "yy/mm/dd",
changeMonth: true,
changeYear: true,
highlightWeek: true
}
);
$("#japaneseCalendar").datepicker(options);
});
#ui-datepicker-div {
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
</head>
<body>
<h3>Japanese JQuery UI Datepicker</h3>
<input type="text" id="japaneseCalendar"/>
</body>
</html>
How can the two will run?.If I put first the datepicker the bxslider will not run and if the bxslider I put first the datepicker wil not run..thanks..
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function(){
$( "#datepicker" ).datepicker();
$("#icon").click(function() {
$("#datepicker").datepicker( "show" );
})
});
</script>
<!-- bxslider -->
<link href="bxslider/jquery.bxslider.css" rel="stylesheet" />
<script src="bxslider/jquery.js"></script>
<!-- bxSlider Javascript file -->
<script src="bxslider/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
});
});
</script>
How can the two will run?.If I put first the datepicker the bxslider will not run and if the bxslider I put first the datepicker wil not run..thanks..
You're including jQuery twice. Don't do that; including jQuery a second time will overwrite the jQuery object and any plugins that have been attached to it. Include jQuery only once and then include your plugins.
<head>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/ui-lightness/jquery-ui.css" />
</head>
<body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
$('.datepicker').datepicker({
showOn: 'button',
buttonImage: 'images/dp.png',
buttonImageOnly: true,
});
});
</script>
</body>