My jQuery codes doesn't work, and I can't find why. The code seems to be ok.
My html code
<html>
<head>
<title>Learning Jquery</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<input type="file">
<br />
<input type="submit" disabled="disabled">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="myjquery.js"></script>
</body>
</html>
The javascript code
$(document).ready(function (){
$('input[type=file]').change(function(){
$(this).next().removeAttr('disabled');
});
});
If you want to enable your submit button, then try this javascript code:
$(document).ready(function (){
$('input[type=file]').change(function(){
$(this).closest('form').find('[type=submit]').prop('disabled', false);
});
});
.next() selects the immediately following sibling of the element you chose, which in your case would be a break (<br />). Try instead:
$(this).siblings('input[type=submit]').removeAttr('disabled');
jsFiddle example
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().
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.
I am new in jQuery and need help to figure out why $.get does not reply.
Let me explain what I have: There is a main index.php as follows:
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="utf-8"> </head>
<body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/reqhan.js"> </script>
<input id="string" type="text" />
<input id="button" type= "button" value="Go" />
<div id="div"></div>
</body>
</html>
the js/reqhan.js contains
$(document).ready(function(e) {
alert('1');
$('#button').click(function() {
$.get('php/reverse.php',{input: string},function(data){alert('2');});
$('#div').text(data);
alert('3');
});
});
and reverse.php contains a simple code (I pasted here but does not preview it) that gets the text from reqhan.js file and returns an echo message.
when running the code on Google Chrome, the first alert is shown but not the rest and of course the `$('#div').text(data);' doesn't send back the data to the js file.
Please let me know if further info is required.
many thanks.
You're closing your callback function before you do anything with the data
Try this instead:
$(document).ready(function(e) {
alert('1');
$('#button').click(function() {
$.get('php/reverse.php',{input: string},function(data){
alert('2');
$('#div').text(data);
alert('3');
});
});
});
Try to format your code so that each pair of brackets gets its own indentation. It should help catch small things like this.
I'm trying to implement a timepickr element into my website, however it seems that the element will work ok in one section of a page, but not in another.
I reference the appropriate css files…
<link rel="Stylesheet" media="screen" href="ui.timepickr.css" />
<link rel="stylesheet" media="screen" href="jquery.timepickr.css" type="text/css" />
As well as the jQuery files…
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.all.js"></script>
<script type="text/javascript" src="js/jquery.timepickr.js"></script>
The route of these files are correct. I have the jQuery function written in the head of the page…
<script type="text/javascript">
$(function(){
$('#timestart').timepickr();
});
</script>
And then, in the main body of the page, I create the object, referencing the timepickr function…
<input id='timestart' type='text' value='09:00' />
It works fine. However, when I use this exact same code later on in the same page, the timepickr functionality does not kick in.
The area where I want the functionality to work is in another DIV section, the contents of which come from an Ajax call made in the page.
This is the only jQuery item I have in the page.
The page itelf only has this one timepickr reference.
Id's need to be unique. when you reference
$('#timestart').timepickr();
it looks at the id of the element this is denoted by use of the '#' Therefore if you use the same id more than 1x per page, it should take the first one, but this is invalid markup if you use the same id for more than 1 element. to fix it
$('#timestart1').timepickr();
$('#timestart2').timepickr();
<input id='timestart1' type='text' value='09:00' />
<input id='timestart2' type='text' value='09:00' />
an id is an unique identifier, so it have to be unique
you could use the class attribute instead
<script type="text/javascript">
$(function(){
$('.timestart')each(function(){
$(this).timepickr();
})
});
</script>
<input class='timestart' type='text' value='09:00' />
i've testet it (see code below) and it works. it seams the ajax cause the problem
<html>
<head>
<link title="theme" type="text/css" href="http://ui.jquery.com/applications/themeroller/css/jquery-ui-base.css.php?ctl=themeroller&=" media="screen" rel="Stylesheet" id="themeCSS" />
<link rel="Stylesheet" media="screen" href="css/jquery.utils.css" />
<link rel="Stylesheet" media="screen" href="css/ui.timepickr.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js" type="text/javascript"></script>
<script src="jquery.utils.js" type="text/javascript"></script>
<script src="ui.timepickr.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".timepickr").each(function(){
$(this).timepickr();
})
});
</script>
</head>
<body>
<input class='timepickr' type='text' value='09:00' />
<input class='timepickr' type='text' value='12:00' />
<input class='timepickr' type='text' value='07:00' />
</body>
</html>