I've got a lil question.. I've been working on a JQuery auto-completion system, but I can't get to manage the box that comes up while writing to fade away.
HTML Code:
<div class="content">
<input type="text" class="search" id="searchid" placeholder="Search for items being sold.." />
<div id="result"></div>
</div>
JQuery Code:
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
});
jQuery("#result").live("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#result").fadeOut();
}
});
$('#searchid').click(function(){
jQuery("#result").fadeIn();
});
});
PHP Code:
<?php
require_once('includes/db_connect.php');
if($_POST) {
$q = $_POST['search'];
$sql_res = mysqli_query($conn, "SELECT * FROM entries WHERE item like '%$q%'");
while($row = mysqli_fetch_array($sql_res)) {
$item = $row['item'];
?>
<div class="show" align="left">
<span class="name"><?=$item;?></span>
</div>
<?php
}
}
?>
Print-screen when typed in: http://prntscr.com/7cqbgc
Print-screen when backspaced the input: http://prntscr.com/7cqbsa
I hope someone can helps me to make the item's retrieved from the database disappear.
Also, if someone has a clue. How would I make the text in the items bold if it matches to my text input?
Thank you.
Just try like this:-
if(searchid!='')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
if(html !=''){
$("#result").html(html).show();
}else{
$("#result").hide();
}
}
});
}else{
$("#result").hide();return false;
}
Related
I would like to get the 2 values separately in order to fill automatically the input in the first file from the PHP via AJAX, but when i console.log(data) I get all the data and I want to retrieve it separately in order to put it in different tags
<input id="regist" type="text" name="regist" onblur="passdata();">
<input id="atyp" type="text" name="atyp" >
<input id="mtow" type="text" name="mtow" >
<script>
$(document).ready(function(){})
function passdata() {
var regist = $('#regist').val();
$.ajax({
type: 'post',
url: 'checkdb.php',
data: 'regist='+regist,
success: function(data){
var atyp = $('#myvalue1').val();
var mtow = $('#myvalue1').val();
$('#atyp').text(atyp);
$('#mtow').text(mtow);
alert (aty+mtow);
console.log(data);
}
})
}
</script>
and PHP file.... of course with db connection
$regist = $_POST['regist'];
$conn = mysqli_connect($host,$user,$pwd,$db);
$sql= ("SELECT * FROM aircrafts where regist='$regist'");
$datas = mysqli_query($conn,$sql);
foreach ($datas as $row) {};
if(mysqli_num_rows($datas) == 0) {
echo 'non ce niente';
} else { ?>
<span id="myvalue1"><?php echo $atyp = $row['atyp'];?></span>
<span id="myvalue2"><?php echo $atyp = $row['mtow'];?></span>
<?php };
?>
Change your Ajax request to:
$.ajax({
type: 'post',
url: 'checkdb.php',
data: 'regist='+regist,
dataType: 'json', // NEW LINE
success: function(data) {
//var atyp = $('#myvalue1').val();
//var mtow = $('#myvalue1').val();
//$('#atyp').text(atyp);
//$('#mtow').text(mtow);
var atyp = data.atyp;
var mtow = data.mtow;
alert ('aty: ' + aty , 'mtow: ' + mtow);
console.log(data);
}
})
and in your PHP: change these lines
else{?>
<span id="myvalue1"><?php echo $atyp = $row['atyp'];?></span>
<span id="myvalue2"><?php echo $atyp = $row['mtow'];?></span>
<?php };
to this exactly lines
else {
echo json_encode( $row );
}
EDIT
Regarding your "DOM-event"-handling ("document onready" and "input#regist onblur") I recommend to do it like this.
HTML:
<!-- <input id="regist" type="text" name="regist" onblur="passdata();"> -->
<input id="regist" type="text" name="regist">
<input id="atyp" type="text" name="atyp">
<input id="mtow" type="text" name="mtow">
JavaScript:
function passdata(event) {
$.ajax({
type: 'post',
url: 'checkdb.php',
data: 'regist=' + $(event.target).val(),
dataType: 'json',
success: function(data){
console.log(data);
}
})
}
$(document).ready(function(){
// on blur event
$('#regist').on('blur', passdata)
// on input event | maybe this would be also an interesting option as it fires immidiately on input
// $('#regist').on('input', passdata)
})
This bootstrap seperates the logic from the markup which is a good practice in general.
This javascript dropdown list auto complete work on windows local server in PHP aplication, but when i try this funcionality when aplication is on linux server nothing happen. Maybe i should change live method into on? But how?
This is javascript
<script type="text/javascript">
$(function(){
$(".search_keyword").keyup(function()
{
var search_keyword_value = $(this).val();
var dataString = 'search_keyword='+ search_keyword_value;
if(search_keyword_value!='')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}
return false;
});
$("#result").on("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.country_name').html();
var decoded = $("<div/>").html($name).text();
$('#search_keyword_id').val(decoded);
});
$(document).o("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search_keyword")){
$("#result").fadeOut();
}
});
$('#search_keyword_id').click(function(){
$("#result").fadeIn();
});
});
</script>
And this is search.php
include('db.php');
if(isset($_POST['search_keyword']))
{
$search_keyword = $polaczenie->real_escape_string($_POST['search_keyword']);
$sqlCountries="SELECT name FROM shop WHERE name LIKE '%$search_keyword%'";
$resCountries=$polaczenie->query($sqlCountries);
if($resCountries === false) {
trigger_error('Error: ' . $polaczenie->error, E_USER_ERROR);
}else{
$rows_returned = $resCountries->num_rows;
}
$bold_search_keyword = '<strong>'.$search_keyword.'</strong>';
if($rows_returned > 0){
while($rowCountries = $resCountries->fetch_assoc())
{
echo '<div class="show" align="left"><span class="country_name">'.str_ireplace($search_keyword,$bold_search_keyword,$rowCountries['nazwa']).'</span></div>';
}
}else{
echo '<div class="show" align="left">Brak</div>';
}
}
AJAX works fine, but $_POST does not have a value.
What I have tried:
$data = json_decode(file_get_contents('php://input'), true); &
$post = json_decode($data); into storecart.php
Changing the data into 'jCart=' + jData'
removing datatype (Jaromanda X)
answer (Umakant Mane)
cart is an array of objects
Javascript:
$(document).ready(function(){
$("#showcart").click(function(event){
event.preventDefault();
showcart();
url = 'cart.php';
$(location).attr("href",url);
});
});
function showcart(){
var jData = JSON.stringify(cart);
$.ajax({
url:"storecart.php",
type:"post",
data: {jCart : jData},
datatype: "json",
success: function(data){
console.log("SUCCESS")
console.log(jData);
},
error: function(data){
console.log("REDO")
}
});
}
storecart.php:
<?php
if(isset($_POST['jCart'])){
echo "Right";
}else{
echo "Wrong";
}
?>
How do get the $_POST to accept the json.stringify?
SOLUTION:
SOLVED:
All i did was add a form that has a hidden value
<form id = "postform" action = "cart.php" method = "post">
<input type = "hidden" id="obj" name="obj" val="">
<input type = "submit" value = "Show Cart" id = "showcart">
</form>
In the Javascript:
$(document).ready(function(){
$("#showcart").click(function(){
var json = JSON.stringify(cart)
$('#obj').val(json);
$('#obj').submit();
});
});
Thank you for everyone that has answered but hope this helps.
$(document).ready(function(){
var data = {one:"one", two:"two", three:"three"};
var jsonData = JSON.stringify(data);
$("#clickme").click(function() {
$.ajax({
url:"demo.php",
type:"POST",
data:{cart:jsonData},
success:function(response){
console.log(response);
}, error:function(err) {
console.log(err);
}
})
});
});
PHP
<?php
if(isset($_POST['cart'])){
echo "Right";
}else{
echo "Wrong";
}
?>
I have multiple textbox and calling jquery keyup on each text box its working
fine on the mozilla firefox and chrome.In internet explorer
Its working fine for the first text box its working perfectly as it should be but other textbox are not working properly ,i mean for them keyup are not calling.
.Below are my code:-
I have multiple textbox and calling jquery keyup on each text box its working
fine on the mozilla firefox and chrome.In internet explorer
Its working fine for the first text box its working perfectly as it should be but other textbox are not working properly ,i mean for them keyup are not calling.
.Below are my code:-
<script type="text/javascript">
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var idloc=document.getElementById("state").value;
var type='p_school';
var dataString = 'locality='+ searchid+'&id='+ idloc+'&type='+ type;
if(searchid!='')
{
$.ajax({
type: "POST",
url: "loaddata.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
});
jQuery("#result").on("click", ".show", function() {
var $name = $(this).find(".name").text();
var $id = $(this).find(".pid").text();
var type='state';
var pid='pid='+$id+'&type='+ type;
$.ajax({
type: "POST",
url: "load_state.php",
data: pid,
cache: false,
success: function(html)
{
//alert (html);
$('#p_school').show();
$('#p_school').html(html);
$('#p_school_old').hide();
}
});
$("#searchid").val($name);
});
jQuery(document).on("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#result").fadeOut();
}
});
if(searchid=='')
{
$('#searchid').click(function(){
jQuery("#result").fadeIn();
}); }
});
$(function(){
$(".search1").keyup(function()
{
alert ("hello second textbox");
var searchid1 = $(this).val();
var idloc1=document.getElementById("state1").value;
var type1='s_school';
var dataString1 = 'locality1='+ searchid1+'&id1='+ idloc1+'&type1='+ type1;
if(searchid1!='')
{
$.ajax({
type: "POST",
url: "loaddata.php",
data: dataString1,
cache: false,
success: function(html)
{
$("#result1").html(html).show();
}
});
}return false;
});
jQuery("#result1").on("click", ".show1", function() {
var $name = $(this).find(".name1").text();
var $id = $(this).find(".sid").text();
//var pid='pid='+ $id.+'&type='+ type;
var type='s_state';
var pid='pid='+$id+'&type='+ type;
$.ajax({
type: "POST",
url: "load_state.php",
data: pid,
cache: false,
success: function(html)
{
//alert (html);
$('#s_school').show();
$('#s_school').html(html);
$('#s_school_old').hide();
}
});
$("#searchid1").val($name);
//alert ("Danstring");
});
jQuery(document).on("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search_ss")){
jQuery("#result1").fadeOut();
}
});
if(searchid1=='')
{
$('#searchid1').click(function(){
jQuery("#result1").fadeIn();
}); }
});
</script>
//HTML Code
HTML are below:-
<input type="text" placeholder="Primary School" name="primary[]" autocomplete="off" class="search" id="searchid" style="margin-top: 7px; border: 1px solid #7B9E94; min-height: 29px;">
<input type="text" placeholder="Secondary School" name="secondary[]" autocomplete="off" class="search1" id="searchid1" style="margin-top: 7px; border: 1px solid #7B9E94; min-height: 29px;">
Thanks
Since your input elements have different class names, try changing this line:
$(".search").keyup(function()
to this:
$(".search, .search_ss").keyup(function()
Any reason why this isn't running when clicked? I can't seem to figure it out.
<button id="button-container-like" onclick="rate($(this).attr(\'id\'))"><span class="thumbs-up"></span>Like</button>
<script>
function rate(rating){
var data = 'rating='+rating+'&id=<?php echo $eventId; ?>&userid56=<?PHP echo $userid55; ?>';
$.ajax({
type: 'POST',
url: 'includes/rate.php', //POSTS FORM TO THIS FILE
data: data,
success: function(e){
$(".ratings").html(e); //REPLACES THE TEXT OF view.php
}
});
}
</script>
here you go:
<button id="button-container-like" ><span class="thumbs-up"></span>Like</button>
<script>
jQuery(document).ready(function () {
$("#button-container-like").click(function() {
rate($(this).attr("id"));
});
function rate(rating) {
var data = 'rating=' + rating + '&id=<?php echo $eventId; ?>&userid56=<?PHP echo $userid55; ?>';
$.ajax({
type: 'POST',
url: 'includes/rate.php', //POSTS FORM TO THIS FILE
data: data,
success: function(e) {
$(".ratings").html(e); //REPLACES THE TEXT OF view.php
}
});
}
});
</script>
If there's nothing else going on in this code, then remove the slashes from your onclick code. They are unnecessary and cause an error.
onclick="rate($(this).attr('id'))"