Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I need some help with this datepickerthat i'll be using in my school project.
<!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" name='cout' id="datepicker"></p>
</body>
</html>
I want to create another datepicker since my project is a hotel reservation. Check in and Check out dates. But in check out this happens.
You could use a class instead of an id to define the date inputs :
i.e. :
<!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">
<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" name='cout' class="datepicker" id="start_date"></p>
<p>Date: <input type="text" name='cout' class="datepicker" id="end_date"></p>
</body>
</html>
Hope it helps.
Try this :
<p>Date1: <input type="text" id="datepicker1"></p>
<p>Date2: <input type="text" id="datepicker2"></p>
<script>
$( function() {
$( "#datepicker1,#datepicker2" ).datepicker();
} );
</script>
I agree with Adrien Leber that a class could be easier once you have multiple datepickers. I think you need to use .each() though.
$(function() {
$(".datepicker").each(function(i, val) {
$(this).datepicker();
});
});
Related
Cannot run my select event without reloading entire page even though in php format.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel ="stylesheet" href = "style.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src = "home.js"></script>
<title>Javascript on Steroids</title>
</head>
<body>
<select id = "purchaseId" >
<option value="1" selected >1</option>
<option value="2">2</option>
</select>
</body>
</html>
Hello , Cannot run my select event without reloading entire page even though in php format.
$myobject = document.getElementById("purchaseType");
$myobject.addEventListener("change",function(){
alert("tt");
})
use this in script
myobject = document.getElementById("purchaseId");
myobject.addEventListener("change",function(){
alert("tt");
})
Your select id is not equal to the id you're calling in your script.
Furthermore you can change your code to this:
$("#purchaseId").change(function() {
alert('tt')
});
Here's a fiddle.
https://jsfiddle.net/Lnroksgz/
need to include this before the script only able to trigger
$(document).ready(function(){
// your code
});
I have a html file below, that I want to enter a date (eg. 25-07-1979). The input is readonly. I am wondering if I can include some javascript in the phpunit file that will make the field writable so I can enter a date.
Any help would be appreciated
<!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="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/datepicker/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({
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true
});
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" readonly="readonly"></p>
</body>
</html>
I am implementing calendar using JQuery. This is the pure html form I tested and it's working fine. But when I embed this in php, it's not working and the error shows up when I select inspect element is--> Object has no method datepicker.
PURE HTML:
<html lang="en">
<head>
<title>Date Thing</title>
<link href="jquery-ui-1.10.4.custom/css/start/jquery-ui-1.10.4.custom.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$( "#datepickerID" ).datepicker({
changeYear: true,
})
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepickerID"></p>
</body>
</html>
PHP Code:
<?php
include('sess.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>PAGE TITLE</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap.theme.css">
<link href="jquery-ui-1.10.4.custom/css/start/jquery-ui-1.10.4.custom.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$( "#datepickerID" ).datepicker({
changeYear: true,
})
});
</script>
</head>
<body>
<form name="form1" action="http://*****/******/redirect1.php" onsubmit="return validateForm();" method="get">
<p>Date: <input type="text" id="datepickerID"></p>
</form>
</body>
</html>
Can someone please let me know how to make that calendar work even in php code?
That generally means that you aren't loading the JQuery UI library. However, it looks like you are loading it twice. Perhaps try removing <script type="text/javascript" src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>. It may be causing a conflict.
Please Try This in ypur PHP file .
<?php
include('sess.php');
?>
<html lang="en">
<head>
<title>PAGE TITLE</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 type="text/javascript">
$(document).ready(function () {
$( "#datepickerID" ).datepicker({
changeYear: true,
})
});
</script>
</head>
<body>
<form name="form1" action="" onsubmit="return validateForm();" method="get">
<p>Date: <input type="text" id="datepickerID"></p>
</form>
</body>
</html>
My problem is that when I call a jquery function, nothing happens or I have an error.
I also saw with firebug that nothing is called when I press my button that calls it
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]">
<?php // Encodé en UTF-8 (sans BOM)
require('basedonnee.php');
$BD = new basedonnee();
session_start();
?>
<html xmlns="[http://www.w3.org/1999/xhtml]">
<head>
<title>un titre</title>
<meta http-equiv="cache-control" content="no-cache" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script type="text/javascript" src="whirlpool.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript">
function changeMonth(place,nomois)
{
$j=jQuery.noConflict();
document.getElementById("mois").value = nomois+place
$j(document).get("getCalendrier.php?mois=2", function(data){
document.getElementById("calen").innerHTML = data;
});
}
</script>
</head>
This is the beginning of my index.php
My changemonth function is called, I checked. But my .get doesn't work and my getCalendrier.php is never called.
Does someone have an idea to solve my problem?
thanks
Try changing $j(document) to just $j before .get:
$j.get("getCalendrier.php?mois=2", function(data){
document.getElementById("calen").innerHTML = data;
});
jQuery.get isn't a method of a jQuery collection, it's a (so-to-say) "static" function on the jQuery global (similar to jQuery.noConflict).
Also, Make sure the current page and getCalendrier.php are in the same directory since the URL given is relative to the current URL.
And, to help you with debugging Ajax in your project, most browsers have developer tools with "Network" watching included. Firefox has Firebug, Google Chrome and Safari have it built-in, etc.
function changeMonth(place,nomois)
{
$j=jQuery.noConflict();
document.getElementById("mois").value = nomois+place;
$j(document).get("getCalendrier.php?mois=2", function(data){
document.getElementById("calen").innerHTML = data;
});
}
You missed a ; after nomois+place
you' re missing a ; here:
document.getElementById("mois").value = nomois+place
should be
document.getElementById("#mois").value = nomois+place;
additionally you're missing # id tags when getting an element by id
I am having trouble to embed an autosuggest script into my existing php file (wordpress). Below is the code and here is the desired result http://www.emposha.com/demo/fcbkcomplete_2/
In addition, the tags system of stackoverflow is great, I am looking something like this one :D
Howvere, instead of the text field I get a select field. It might be something with javascript, I dont know...
The code:
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>FCBKcomplete Demo</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8">
</script>
<script src="jquery.fcbkcomplete.js" type="text/javascript" charset="utf-8">
</script>
</head>
<body id="test">
<h1>FCBKcomplete Demo</h1>
<div id="text">
</div>
<form action="submit.php" method="POST" accept-charset="utf-8">
<select id="select3" name="select3">
<option value="test1">sleep</option>
<option value="test3">sport</option>
<option value="test3">freestyle</option>
</select>
<br/>
<br/>
<input type="submit" value="Send">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#select3").fcbkcomplete({
json_url: "data.txt",
addontab: true,
height: 2
});
});
</script>
<div id="testme"></div>
</body>
Well, that's a select tag in your HTML there instead of input type="text". What did you expect to happen?