I have two forms I named it main.php and sample.php.... For main.php I have a calendar/datepicker and its working. But then when I proceed to the next page or to the sample.php the calendar/datepicker its not displaying anymore... I just copy the codes from main.php to sample.php
Here's my code for main.php:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepickerfrom" ).datepicker();
});
$(function() {
$( "#datepickerto" ).datepicker();
});
</script>
From: <input type="text" id="datepickerfrom"name="from"> To: <input type="text" id="datepickerto"name="to">
And For sample.php:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function () {
$('.checkall').on('click', function () {
$(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
});
});
$(function() {
$( "#datepickerfrom" ).datepicker();
});
$(function() {
$( "#datepickerto" ).datepicker();
});
</script>
From: <input type="text" id="datepickerfrom"name="from"> To: <input type="text" id="datepickerto"name="to">
<?php
echo "<div><input type='checkbox' class='checkall'> Check all</div>";
?>
But in the sample.php I added a code for checkbox all where I also use a script...
Thanks/.
Thats because you are calling jquery two times in sample.php. Either remove
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
or
<script src="http://code.jquery.com/jquery-latest.js"></script>
P.S jquery-ui.js should come after jquery
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
You need those lines on sample.php, tried it, it worked.
Related
I want to fetch the json data from function and not file.
How can i change the autocomplete.php to a PHPfunction?
My code:
<html>
<head>
<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>
<script>
$(function() {
$( "#skills" ).autocomplete({
source: 'autocomplete.php'
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="skills">Skills: </label>
<input id="skills">
</div>
</body>
</html>
Add get or post parameter to your ajax, for example action=func1 and in your php file make a switch and in the case of action is "func1" just call func1().
$('#datetimepicker1').datetimepicker();
I am using this code, and have defined all the css and js. Even though this error comes..
What am i doing wrong ?
First of all you should have the following links to the jquery-ui , jquery-css and the jquery-api :
<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>
Your HTML could be :
<p>Date: <input type="text" id="datepicker"></p>
Your script should be if you are calling the datepicker() function via id :
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
OR if you want to invoke it via the class name , it should be :
<script>
$(function() {
$(".yourClassName").datepicker();
});
</script>
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>
I'm working in twitter Bootstrap with PHP. I make a search form and apply autocomplete to search field but its not working, though its working fine when I test it outside the my working directory.
Here are my jquery files:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.autocomplete.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#term").autocomplete({
source:'action.php',
minLength:1
});
});
</script>
<script src="assets/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$("#datepicker").datepicker();
</script>
<script type="text/javascript">
$("#datepicker1").datepicker();
</script>
<script type="text/javascript">
$("#datepicker2").datepicker();
</script>
<script type="text/javascript">
$("#datepicker3").datepicker();
</script>
<script type="text/javascript">
$("#datepicker4").datepicker();
</script>
and here is my search field in the form:
<input type="text" class="span3 search-query" id="term" name="term" placeholder="search by customer-name, company-name and location" autocomplete="off">
Here is the css for autocomplete:
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
Here is my action.php file:
<?php
include("config.php");
$term=$_GET["term"];
$query=mysql_query("SELECT * FROM customers where name like '%".$term."%'");
$json=array();
while($customer=mysql_fetch_array($query)){
$json[]=array(
'value'=> $customer["name"],
'label'=>$customer["name"],
);
}
echo json_encode($json);
?>
On Google chrome press F12 before loading the page and see in the 'Network' tab if the jquery.autocomplete.js is loading. If its not, Please use the correct relative path for it.
link provides
<link rel="stylesheet" href="http://localhost/assetbox/resources/themes/Charcoal/css/jquery-ui.css" />
<script type="text/javascript" src="http://localhost/assetbox/resources/javascript/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://localhost/assetbox/resources/javascript/jquery/jquery-ui.js"></script>
html tag
<div class="box col-6 formfield">
<input type="text" maxlength="50" name="cal" value="" class="" id="datepicker" >
</div>
<script type="text/javascript">
{literal}
jQuery(function($){
$( "#datepicker" ).datepicker();
});
{/literal}
</script>
link where i download: http://jqueryui.com/datepicker/
note:-it work fine on localhost but when i use in pixaria(www.pixaria.com)using smarty it dosen't work.
<script type="text/javascript">
{literal}
$(function(){
$( "#ds" ).datepicker({ dateFormat: "dd-mm-yy" });
});
{/literal}
</script>
correction: