Cant make live ajax search work - javascript

I'm new to web development sorry but i just don't get problem
I just created this and its not working. please help i don't know whats the problem. i'm not getting any results.
but if i go to search.php it displays all names.
HTML
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<input type="text" onKeyup="getName(this.value)"/><br>
<div id="result"></div>
<script type="text/javascript">
function getName(value){
$.post("search.php", {partialName:value}, function(data){
$("#result").html(data);
});
}
</script>
php(search.php)
<?php
require 'includes/connection.php';
$partialName = $_POST['partialName'];
$query = "SELECT Name FROM Members WHERE Name LIKE '%$partialName%'";
$names = mysqli_query($dbc, $query);
while($namesArray = mysqli_fetch_array($names)){
echo "<div>".$namesArray['Name']."</div>";
}
?>

HTML:
<input type="text" id="search"/><br>
JS:
$("#search").on("keyup", function()
{
var value = $(this).val();
$.ajax({
url: "search.php",
type: "POST",
data: "partialName="+value,
success: function(data)
{
$("#result").html(data);
}
});
});
EDIT: Just as a note, it might be worth escaping the input into your MySQL query:
$partialName = mysqli_real_escape_string( $_POST['partialName'] );

<input type="text" id="search" /><br>
<div id="result"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#search').keyup(function(){
var name = $('#search').val();
var datastring = "partialName="+name;
$.ajax({
url: "search.php",
type: "POST",
data: datastring,
success: function(data)
{
$("#result").html(data);
}
});
});
});
</script>
<?php
require 'includes/connection.php';
$partialName = $_POST['partialName'];
$query = "SELECT Name FROM Members WHERE Name LIKE '%".$partialName."%' ";
$names = mysqli_query($dbc, $query);
while($namesArray = mysqli_fetch_array($names)){
echo "<div>".$namesArray['Name']."</div>";
}
?>

Related

Update data function is not updating value in database

I have created get_data(id) and update_data() function in item.js file and corresponding get_data.php and update_data.php files. In my code get_data(id) function is working perfectly but update_data()is not updating the value in database. It seems like function is not calling update_data.php. I've tried implementing ajax and php for the first time, Please help me to figure out the exact problem in my code. Here is my code
function loadItem(id) {
console.log(id);
$.ajax({
url: "get_data.php",
type: "POST",
data: {'id': id},
success: function (result) {
console.log(result);
var d = JSON.parse(result);
document.getElementById("ib_id").value = d.category[0].ic_id;
document.getElementById("ib_name").value = d.category[0].ic_name;
}
});
}
function updateItem() {
var id = document.getElementById("ib_id").value;
var name = document.getElementById("ib_name").value;
$.ajax({
url: "update_data.php",
type: "POST",
data: {'id': id, 'name': name},
success: function (result) {
console.log(result);
}
});
}
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
</head>
<body>
<h1>Test Page</h1>
<button onclick="loadItem(2);">Load Data</button>
<br/>
<br/>
<br/>
<br/>
<form method="post">
<input type="text" name="ib_id" id="ib_id" class="form-control"
placeholder="id etc." required/>
<input type="text" name="ib_name" id="ib_name" value="" class="form-control"
placeholder="i.e HP, Dell, Sony etc." required/>
<br/> <button onclick="updateItem();">Update Data </button>
</form>
<script type="text/javascript" src="assets/js/jquery.min.js">
</script>
<script type="text/javascript" src="assets/js/item.js"></script>
</body>
</html>
get_data.php
<?php
include 'connection.php';
$id=$_POST["id"];
$category = array();
$temp = array();
$query = mysqli_query($link, "SELECT * FROM item_category WHERE ic_id = ".$id);
//$query = mysqli_query($link, "SELECT * FROM item_category");
while ($row = mysqli_fetch_array($query)) {
$temp['ic_id'] = $row['ic_id'];
$temp['ic_name'] = $row['ic_name'];
array_push($category, $temp);
}
$response['category'] = $category;
echo json_encode($response);
?>
update_data.php
<?php
include 'connection.php';
$id=$_POST['id'];
echo "id is".$id;
$name=$_POST['name'];
$query = mysqli_query($link, "UPDATE item_category SET ic_name = '$name' WHERE ic_id = ".$id);
echo "updated";
?>

How can I insert an Ajax result into an input value?

How can I insert an Ajax result into an input value?
HTML/PHP
<select id="getcategory" name='categoryname' ><option>SELECT---</option>
<?php
$getcat = mysqli_query($con,"SELECT * FROM category ORDER BY categoryname ASC");
while($rec = mysqli_fetch_assoc($getcat)) { ?>
<option><?php echo $rec['categoryname']; ?></option><?php } ?>
</select><br>
<input class='categoryprefix' type='text' name='subcatprefix' />
Ajax
<script type="text/javascript">
$(document).ready(function(){
$("#getcategory").change(function(){
var cprefix = $(this).val();
$.ajax({
url: 'getCategory.php',
type: 'post',
data: {categoryname: cprefix},
success: function(data) {
$(".categoryprefix").append(data);
}
});
});
});
</script>
Note:
File getCategory.php is good

Jquery ajax Post is not working?

I have used ajax post without form. When I click submit button it should get the values of other fields. Post request is not being sent and neither output is being shown. It is returning this error Unexpected identifier
Here are the input fields
<input type="text" name="name" id="name" class="center-block Ename" placeholder="Enter you name">
<textarea class="center-block" name="message" id="message" rows="1" placeholder="Enter your message"></textarea>
<input class="center-block sendBtn" type="submit" id="submit" name="submit" value="Submit">
This is the ajax request.
$(document).ready(function(){
var interval = setInterval($('#submit').click(function(){
var values = {
'name': document.getElementById('name').value,
'message': document.getElementById('message').value
};
$.ajax({
type: "POST",
url: "chat.php",
data: values,
success: function(data){
$("#chat").html(data);
}
});
}),1000);
});
It is sending request to this php page
<?php
include 'db.php';
//Here post data is being assigned to variables
$name = $_POST['name'];
$message = $_POST['message'];
$queryInsert = "INSERT INTO chat(`name`, `message`) VALUES('$name', '$message')";
$queryInsertRun = mysqli_query($con, $queryInsert);
if(!$queryInsertRun){
echo mysqli_error($con);
}
//Here is the output which should be shown
$query = "SELECT * FROM `chat` ORDER BY `name` AND `message` DESC ";
$queryRun = mysqli_query($con, $query);
while($row = mysqli_fetch_assoc($queryRun)){
$name = $row['name'];
$message = $row['message'];
?>
<span class="name" style="font-weight: bold"><?php echo $name?>:</span>
<span class="message"><?php echo $message.'<br>'?></span>
<hr>
<?php
}
?>
I want to know that why is this not working.
try this code
function ajaxcall()
{
console.log('i am called');
var values = {
'name': document.getElementById('name').value,
'message': document.getElementById('message').value
};
$.ajax({
type: "POST",
url: "chat.php",
data: values,
success: function(data){
$("#chat").html(data);
}
});
}
$(document).ready(function(){
var id = setInterval(function() {
ajaxcall();
}, 1000);
});
http://jsfiddle.net/cod7ceho/116/
You want to display data if you clicked submit button , use simple click function . Using setInterval can't help you for clicking submit .
JS
$(document).ready(function(){
$('#submit').click(function(){
var values = {
'name': document.getElementById('name').value,
'message': document.getElementById('message').value
};
$.ajax({
type: "POST",
url: "chat.php",
data: values,
success: function(data){
$("#chat").html(data);
}
});
});
});
It sounds like your JSON Data is not valid.
var data = JSON.stringify(values);
var request = $.ajax({
url: "script.php",
method: "POST",
data: data,
dataType: "html" // read about dataType
});

basic Dynamic Select list PHP & AJAX Jquery

I was trying to get a dynamic dependent select list using AJAX, but unable to get the second list. Here is my code. gethint.php is working fine. I don't know where I am doing wrong.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"</script>
<script>
$(document).ready(function()
{
$('#brand').change(function()
{
var cid=$('#brand').val();
if(cid !=0)
{
$.ajax({
type:'post',
url: 'gethint.php',
data: {id:cid},
cache:false,
success: function(returndata)
{
$('#model').html(returndata);
}
});
}
})
})
</script>
</head>
<body>
<header>
<h1>Car Comparision </h1>
</header>
<form method="post" action="">
Brand 1:
<select id="brand" class="brand">
<?php
include "connect.php";
$query=$con->query("SELECT * FROM car");
while($brand=$query->fetch_assoc())
{
$brand_sel='<option value="'.$brand['id'].'"'.">".$brand['brand'].'</option>'."\n";
echo $brand_sel;
}
?>
</select>
Model 1:
<select id="model" class="model">
<option value="0">Please select a city</option>
<option></option>
</select>
<input type="submit" value="submit">
</form>
</body>
</html>
code for my gethint.php file
<?php
require ("connect.php");
$Query='SELECT * FROM model WHERE id='.$_POST['id'];
$sql=$con->query($Query) or die(mysql_error());
//print_r($Query);
while($row=$sql->fetch_array(MYSQLI_ASSOC)) {
?>
<option value="<?php echo $row["id"];?>"><?php echo $row['model_name'];?></option>
<?php
}
?>
Pls try this code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$('#brand').on('change', function() {
var cid=$('#brand').val();
if(cid !=0)
{
$.ajax({
type:'post',
url: 'gethint.php',
data: {id:cid},
cache:false,
success: function(returndata)
{
$('#model').html(returndata);
}
});
}
})
})
</script>
I would do it of a different a way:
<?php
require ("connect.php");
$Query='SELECT * FROM model WHERE id='.$_POST['id'];
$sql=$con->query($Query) or die(mysql_error());
//print_r($Query);
$elements = [];
while($row=$sql->fetch_array(MYSQLI_ASSOC)) {
$item = ["id" => $row['id'], "model_name" => $row['model_name']]
array_push($elements , $item)
}
echo $elements;
?>
I would send a associative array which contains all the items of your select. I would also modify your script to:
<script>
$(document).ready(function()
{
$('#brand').change(function()
{
var cid=$('#brand').val();
if(cid !=0)
{
$.ajax({
type:'post',
url: 'gethint.php',
data: {id:cid},
cache:false,
success: function(returndata)
{
returndata.each(data,function(){
$('#model').append("<option value="+data.id+">"+data.model_name+"</option>")
})
}
});
}
})
})
</script>
I worried about really you are passing the right value to the ajax.
See the data render for first select is:
$brand_sel='<option value="'.$brand['id'].'"'.">".$brand['brand'].'</option>'."\n";
It should be like this:
$brand_sel='<option value="'.$brand['id'].'">'.$brand['brand'].'</option>\n';
As per my above comment please let us know if any error showing related to jQuery or PHP.
Also, check the passing data to ajax is in correct format.

Deletinq record from database using ajax

I have problem with deleting records from database, using ajax and jquery. If i click to button nothing happens. there is my css:
<button class='delete_p' id_p='<?php echo $post_id; ?>'>x</button>"
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script src="delete_post.js"></script>
and there is ajax that i'm using:
$(document).ready(function(){
$('.delete_p').click(function(){
var del_id = $(this).attr('id_p');
$.ajax({
type:'POST',
url:'delete_post.php',
data:'delete_id='+del_id,
});
});
});
and there is delete_post.php that i'm using:
<?php
include 'esas/core/database/connect.php';
$id = $_POST['delete_id'];
$query = "DELETE FROM `status` WHERE `id` = '$id'";
?>
data shouldn't be a string but a JavaScript object:
$.ajax({
type: 'POST',
url: 'delete_post.php',
data: {
delete_id: del_id
}
});

Categories