I am using jquery auto complete to get current data from database in php. But, I am not getting result.
Here is the code sample:
<label class="col-md-4">Referrer</label>
<div class="col-md-6">
<input type="text" name="referrer" id='referrer' placeholder="Type keyword..." autocomplete="off" value="" class="form-control" />
</div>
<script>
var path = $( "#referrer" ).data('path');
$("#referrer").autocomplete({
source: function(request, response) {
$.ajax({
url: "/ajax/ir_populate_referrer",
dataType: "json",
type: "POST",
data: {
keyword: request.term,
path: path
},
success: function(data) {
response($.map(data, function(item) {
return {
label: item.label
}
}));
}
})
}
});
</script>
As in my search.php file:
<?php
echo json_encode(array('label'=> $link, 'value' => $keyword));
?>
html
<html>
<head>
<title>test jquery autocomplete</title>
<script type="text/javascript" src="jquery/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#zipsearch").autocomplete({
source: function(req,res) {
$.ajax({
url: "json.php",
dataType: "json",
type: "GET",
data: {
term: req.term
},
success: function(data) {
res($.map(data, function(item) {
return {
label: item.label,
value: item.value
};
}));
},
error: function(xhr) {
alert(xhr.status + ' : ' + xhr.statusText);
}
});
}
});
});
</script>
<link rel="stylesheet" href="jquery/css/smoothness/jquery-ui-1.8.2.custom.css" />
<style type="text/css">
</style>
</head>
<body>
<form onsubmit="return false;">
Ejemplo<br/>
Enter a Zipcode:
<input id="zipsearch" type="text" />
</form>
</body>
</html>
PHP
<?php
$response = array();
$response[0]=array('label'=>'test','value'=>'test');
$response[1]=array('label'=>'test2','value'=>'test2');
echo json_encode($response);
?>
Related
i am new in ajax. i want to display the text entered inside the input to another div element.here is the image given below:
here is my code :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<label for="bar">Enter Text</label>
<input id="bar" name="bar" type="text" value="" />
<!-- The result of the search will be rendered inside this div -->
<div id="result">Text Output: </div>
<script >
/* Get from elements values */
var values = $(this).serialize();
$.ajax({
url: "testajax.php",
type: "post",
async:true,
data: values ,
success: function (response) {
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
</script>
</body>
</html>
here is php code:
<?php
$bar = $_POST['bar']
?>
please help me to fix the problem & also minimize the code if possible.thanks
Client-side
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<form>
<label for="bar">Enter Text</label>
<input id="bar" name="bar" type="text" value="" />
<input type="submit" value="Go">
</form>
<!-- The result of the search will be rendered inside this div -->
<div id="result">Text Output: </div>
<!-- For testing purposes comes here the JSON object (stringified) -->
<div id="jsonstring" style="font-family:monospace;">Json object</div>
<script type="text/javascript">
var values = $("form").serialize();
$("form").on("submit", function( event ) {
event.preventDefault();
var values = $( this ).serialize();
$.ajax({
url: "testajax.php",
type: "post",
async: true,
data: values,
dataType: 'json',
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
success: function(json) {
$('#result').html((json.content) ? (json.content) : '???');
$('#result').prop('title', json.title);
$('#jsonstring').html('Json object: '+JSON.stringify(json));
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
});
</script>
</body>
</html>
Server-side
<?php
$bar = (isset($_POST['bar'])) ? $_POST['bar'] : '';
$result = array(
'title' => 'This is the result from an AJAX call',
'content' => 'This is the result: <span style="color:red;">' . $bar . '</span>',
);
echo json_encode($result);
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<form name="form">
<label for="bar">Enter Text</label>
<input id="bar" name="bar" type="text" value="" />
<input type="submit" id="submit" value="click" >
</form>
<!-- The result of the search will be rendered inside this div -->
<div id="result">Text Output: </div>
<script >
/* Get from elements values */
$("#submit").on("click", function(){
var values = $(this).serialize();
$.ajax({
url: "testajax.php",
type: "post",
async:true,
data: values ,
success: function (response) {
$('#result').html((response);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
});
</script>
</body>
</html>
I'm doing a autocomplete but when I write anything in the Input me appear all elements, I want items that contain the typed characters in the Input.
My code is:
var searchRequest = null;
$("#buscar").autocomplete({
maxLength: 5,
source: function (request, response) {
if (searchRequest !== null) {
searchRequest.abort();
}
searchRequest = $.ajax({
url: 'search.php',
method: 'post',
dataType: "json",
success: function (data) {
searchRequest = null;
response($.map(data.items, function (item) {
return {
value: item.name1,
label: item.name1
};
}));
}
}).fail(function () {
searchRequest = null;
});
}
});
Try this:
source: function(request, response) {
response($.map(data.items, function(item) {
var term = request.term.toLowerCase(),
name = item.name.toLowerCase();
if (name.search(term) == 0 || item.code.indexOf(term.toUpperCase()) == 0) {
return {
label: item.name,
value: item.name
};
}
}).slice(0, 15)
);
},
try this code*
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {
$("#txtSearch").autocomplete({
source: function(request,response) {
$.ajax({
url: "results.php",
type: "POST",
dataType: "json",
data: { term: request.term },
success: function (data) {
response($.map(data, function (item) {
return { value:item.name, district:item.district , id: item.id
};
}))
}
})
},focus: function (event, ui) {
$("#txthid").val(ui.item.id);
$("#txtid").val(ui.item.district);
elements.autocompleteSearch.val(ui.item.name);
return false;
},
messages: {noResults: "", results: ""}
});
})
</script>
</head>
<body>
<form id="form1" runat="server" >
<div class="demo">
<div class="ui-widget">
<label for="txtSearch">Enter UserName: </label>
<input type="search" id="txtSearch" />
<label for="txtid">ID is: </label>
<input type="id" id="txtid" />
</div>
</form>
<form action="file2.html" method="LINK">
<input type="hidden" id="txthid" name="id">
<input type="submit" value="Home page" >
</form>
</body>
</html>
For some reason I'm not getting the callback from post.php
Here is my index.php:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<form action="#" method="post" enctype="multipart/form-data">
<input type="file" name="file_upload">
<button type="submit" name="upload">Upload</button>
</form>
<div id=callbackEcho></div>
<script src="js/jquery.js"></script>
<script>
$("button").on("click",uploading);
function uploading(e)
{
e.preventDefault();
var postData=new FormData($("form")[0]);
$.ajax
(
{
type:'POST',
url:"post.php",
data:postData,
contentType:false,
processData:false,
success:function(data)
{
$("#callbackEcho").html('success : '+data);
},
fail:function(data)
{
$("#callbackEcho").html('fail : '+data);
},
done:function(data)
{
$("#callbackEcho").html('done : '+data);
}
}
);
}
</script>
</body>
</html>
and for testing only this is my post.php:
<?php
echo 'I\'m a callback!';
exit;
Change your ajax call to the following
$.ajax({
type:'POST',
url:"post.php",
data:postData,
contentType:false,
processData:false,
success:function(data) {
$("#callbackEcho").html('success : '+data);
},
error:function(data) {
$("#callbackEcho").html('fail : '+data);
},
complete: function(data) {
$("#callbackEcho").html('done : '+data);
}
});
I'm not able to get typeahead to work on my website, here what I have tried.
My html and code
<html>
<head>
<title>typeahead</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script>
</head>
<body>
<input id="typeahead" type="text" data-provide="typeahead" autocomplete="off">
<script type="text/javascript">
$(document).ready(function() {
$('#typeahead').typeahead({
source: function (query, process) {
$.ajax({
url: 'data.php',
type: 'get',
dataType: 'JSON',
async: true,
data: 'query=' + query,
success: function(data) {
console.log(data);
process(data);
}
});
}
});
});
</script>
</body>
</html>
when I query data.php in my browser, I get the following
http://localhost/data.php?query=a
output
["admin","admin2"]
Yet, I'm not sure why its not working, backend works, I have checked my code many times, I wonder what I'm missing.
Your help is highly appreciated.
$.ajax({
url: 'data.php', // Just try url:'data.php?query=a'
type: 'get',
dataType: 'JSON',
async: true,
data: {'query' : query}, // changed
success: function(data) {
console.log(data);
process(data);
}
});
Typically typeahead uses handlebar.js as well so I included that here. I updated your code to match the remote example here (though I didn't actually test the code). Hopefully that will get you pointed in the right direction.
<html>
<head>
<title>typeahead</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
</head>
<body>
<input id="typeahead" type="text" data-provide="typeahead" autocomplete="off">
<script type="text/javascript">
$(document).ready(function() {
var mySearch = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'data.php',
remote: 'data.php?query=' + query
});
mySearch.initialize();
$('#typeahead').typeahead(null, {
name: 'best-pictures',
displayKey: 'value',
source: mySearch.ttAdapter()
});
});
</script>
</body>
</html>
You can write you ajax call like this with Bootstrap 2.1.0 up to 2.3.2:
$(document).ready(function(){
$('#typeahead').typeahead({
source: function (typeahead, query) {
return $.get('data.php', { 'query': a }, function (data) {
return typeahead.process(data);
});
}
});
});
with Bootstrap 3.0 type is no longer bundled with it, So you can use Ajax Type-ahead
its very easy to use:
$("#ajax-typeahead").typeahead({
ajax: "/path/to/source"
});
I'm using jQuery's .ajax() to post to a PHP file called process.php. Process.php has a lot of code in it, but for simplicity's sake, let's just say it contains <?php echo 'hello'; ?>.
Is this the proper jQuery to insert process.php's results into div.results? :
$.get('process.php', function(data) {
$('.results').html(data);
});
So far it doesn't seem to be working.
Here's the HTML/Javascript file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("form#form").submit(function() {
var username = $('#username').attr('value');
$.ajax({
type: 'POST',
url: 'process.php',
data: 'username=' + username,
success: function() {
$('form#form').hide(function() {
$.get('process.php', function(data) {
$('.results').html(data);
});
});
}
});
return false;
});
});
</script>
</head>
<body id="body">
<form id="form" method="post">
<p>Your username: <input type="text" value="" name="username" id="username" /></p>
<input type="submit" id="submit" value="Submit" />
</form>
<div class="results"></div>
</body>
</html>
Here's process.php (greatly simplified):
<?php
/* get info from ajax post */
$username = htmlspecialchars(trim($_POST['username']));
echo $username;
?>
If you simply want to place the resulting string back into an element, use load().
$('.results').load('process.php');
However, looking at your code...
$.ajax({
type: 'POST',
url: 'process.php',
data: 'username=' + username,
success: function() {
$('form#form').hide(function() {
$.get('process.php', function(data) {
$('.results').html(data);
});
});
}
});
...shows you have misunderstood something. The correct anonymous function to assign to the success callback would be...
function(data) {
$('form#form').hide()
$('.results').html(data);
}
You could try something like this.
function ajax_login() {
if ($("#username").val()) {
$.post("/process.php", { username : $("#username").val() }, function(data) {
if (data.length) {
$("#login_form").hide();
$("#login_result").html(data);
}
})
} else {
$("#login_result").hide();
}
Then in process.php just echo out some text if the post sucesses.
process.php =>
if (isset($_POST['username'])
{
echo 'hello '.$_POST['username'];
}