I am trying to learn Ajax/JavaScript and I can not seem to get my search to work. It is meant to return partial names but returns nothing at all
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js></script>
<script type="text/javascript">
function getName(value) {
$.post("searchbar.php", {partialName:value},function(data))
$("#results").html(data);
}
</script>
</head>
<body>
<input type="text" onkeyup="getName(this.value)"/>
<br>
<div id="results"></div>
</body>
</html>
php file:
<?php
include "header.php";
$partialName = $_POST['partialName'];
$name = mysql_query("SELECT username FROM grpgusers WHERE username LIKE '%$partialName%'");
while($names = mysql_fetch_array($name)){
echo "<div>".$names['username']."</div>";
}
?>
could some one please help me out on where I am going wrong?
you are missing braces, change to:
function getName(value) {
$.post("searchbar.php", {partialName:value},function(data) {
$("#results").html(data);
});
}
Plus, missing a quote in
jquery.min.js ></script>
^ right there
change that to jquery.min.js"></script>
Missing closing double quote in <script> tag and closing brace for $.post() function :
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
function getName(value) {
$.post("searchbar.php", {partialName: value}, function (data) {
$("#results").html(data);
});
}
</script>
</head>
<body>
<input type="text" onkeyup="getName(this.value)"/>
<br>
<div id="results"></div>
</body>
</html>
Turns out I did not double quote the link to the js libary
thanks
Related
I am quite new to jquery, and i couldn't use .each function in a php foreach function.
I am trying to do a quantity, unit price, total price table.
I don't know how many table rows does user need, therefore used foreach function. Here is an example what i am trying to do:
my deneme2.php file :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width= <script type="text/javascript">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>deneme5.js</script>
</head>
<body>
<?php
$arr=[1,2];
foreach ($arr as $key=>$val){ ?>
<div>
<input id="tst1"; type="text"; >
<input id="tst2"; type="text"; >
<input id="tst3"; type="text"; > <br><br>
</div>
<?php } ?>
<input id="asd"; type="submit"; value="hesapla">
</body>
</html>
And my deneme5.js file:
$(function(){
$("#asd").click(function(){
$("div").each(function(index){
var a=$("#tst1").val();
var b=$("#tst2").val();
var c= parseInt(a)*parseInt(b);
$("#tst3").val(c);
});
});
});
Can you help me? what am i doing wrong?
You have many syntax errors in your code. I have revised it a bit. Please compare it with yours and see where you have your mistakes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- here i have added your javascript code directly. You can include it like that: <script src="deneme5.js"></script>-->
<script>
$(function(){
$("#asd").click(function() {
$(".row").each(function(index, element){
var a = $(element).find(".tst1").val();
var b = $(element).find(".tst2").val();
var c = parseInt(a) * parseInt(b);
$(element).find(".tst3").val(c);
});
});
});
</script>
</head>
<body>
<?php
$arr=[1,2];
foreach ($arr as $key=>$val){ ?>
<!-- in the following i have switched your ids into classes because ids have to be unique. Furthermore html attributes do not have to be separated by ';' -->
<div class="row">
<input class="tst1" type="text">
<input class="tst2" type="text">
<input class="tst3" type="text"><br><br>
</div>
<?php } ?>
<input id="asd" type="submit" value="hesapla">
</body>
</html>
One of the things done here was to convert the use of ID's to classes. ID's cannot be duplicated on a page because it will cause problems with JavaScript and CSS.
hi every body i was testing a code for checking name availability with ajax and i dont now why its doesnt work
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>index</title>
</head>
this is the body and the jquery function
check
<div id="answer" >
<script type="text/javascript">
//script
$(document).ready(function() {
$("#checkme").click(function(){
$("#answer").ajaxStart(function() {
$(this).text("loading .. .").show("slow");
});
var Userme = $("#username").val();
$.ajax({
type:GET,
url:"file.php",
data:"username=" + Userme,
success: function(msg){ $("#answer").text(msg).fadeIn("slow");}
});
});
});
</script>
</div></form>
</body>
</html>
and this is php code
<?php
$names = array (A,B,C,D);
$username = $_GET['username'];
if(in_array ($username , $names)){
echo "ok";
}else{
echo "doesnt exist ";
}
?>
plz help
im new with jquery and ajax and i cant guess the mistake i hope you can help me
It's unclear what exactly the problem is as I can see multiple errors.
In your javascript code:
type:GET should be type: "get"
data:"username=" + Userme should be data: {username: Userme}
In your PHP code:
$names = array (A,B,C,D); should be $names = array ("A", "B", "C", "D");
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
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 have looked at other questions and cannot find the answer to why this isn't working. I am following a tutorial online. Here is my code:
HTML file:
<!DOCTYPE HTML>
<html>
<head>
<title>AJAX Test</title>
</head>
<body>
<h4>Enter an Item</h4>
<input type="text" id="item" /><br />
<input type="button" id="button" value="Submit" /><br />
<div id="content"></div>
<script type="text/javascript" scr="ajax.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
</body>
</html>
JS file:
$('#button').click(function() {
var item = $('#item').val();
$('#content').text('Loading...');
$.post('ajax.php', { item: item }, function(data) {
$('#content').text(data);
});
});
PHP file:
<?php
include 'db.php';
if (isset($_POST['item'])) {
$item = $_POST['item'];
$sql = mysql_query("INSERT INTO items(item)VALUES('$item')");
if ($sql === true) {
echo "Inserted into database";
} elseif ($sql ==== false) {
echo "Error inserting into database";
}
}
?>
I don't see what I'm doing wrong. The tutorial has the same code. Thanks for your help.
moonwave99 is right (I'm not sure why the downvotes).. and also the scr="ajax" should be src="ajax" in your html and should be put in head or even before. Other reason may be the position of ajax.php to the site, maybe declaring whole URL will help :
$.post('http://wholeurl/ajax.php', {
item: item
}, function(data) {
$('#content').text(data);
});
Hope this helps, if not please specify error.
Well i dont know if i can help you:
You have some mistakes on your code
The elseif condition is not ====(4) just ===(3)
The ajax.js file should be after the jquery library
The src attribute is not scr.
And of course the URL of the jquery library should start with http:// because is an external resource.
The mysql_query() function should have the conection variable, Example:
mysql_query("[query here]", $connect);
Beside any other error you may get, you should import jQuery before your script:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="ajax.js"></script>