i have a problem with the auto complete script,
the result required is when i type eg BG or BRIGHT GREEN to get result "BG"
<?php
$colours =
[
'LG'=>'LIGHT GREEN',
'BG'=>'BRIGHT GREEN',
'DR'=>'DARK RED',
];
?>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<form id="frm" method="post">
<input id="color" type="text" >
</form>
<script>
var colorObj = <?php echo json_encode($colours); ?>;
$("#color").autocomplete({
source:colorObj,
minLength: 2,
select: function(event, ui) {
event.preventDefault();
$("#color").val(ui.item.label);
}
});
</script>
Related
I'm trying to load a slick-slide-carousel with ajax so that when one of the radiobuttons is pressed, the new images are loaded via ajax.
But I have a problem because when loading the new images, all the images of the carousel are displayed one on top of the other for a second.
It can be seen on this page: http://infrangible-discoun.000webhostapp.com/slideAjax/, by pressing any of the radio-buttons.This is the code.
index.php:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-latest.js"></script>
<script src="jsSlick/slick/slick.min.js"></script>
<link rel="stylesheet" href="jsSlick/slick/slick.css">
<link rel="stylesheet" href="jsSlick/slick/slick-theme.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" charset="UTF-8">
<link rel="stylesheet" href="estilosSlick.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
<script src="ajaxIdProducto.js"></script>
</head>
<body>
<div id='foto'>
<div class='contenedor2 slideshow2'>
<img src="imagenes/1.jpg">
<img src="imagenes/2.jpg">
<img src="imagenes/3.jpg">
</div>
</div>
<div>
<form id="formOpciones" action="#" method="post">
<label for='color'>Elegir</label>
<input type="radio" class="color" name="color" value="blanco">
<input type="radio" class="color" name="color" value="negro">
<input type="radio" class="color" name="color" value="gris">
<input type="radio" class="color" name="color" value="azul">
</form>
</div>
</body>
<script src="slick2.js"></script>
</html>
ajaxIdProducto.js:
$(document).on('ready',function(){
$(document).on("change",'.color', function(event) {
var $form = $("#formOpciones");
var url1 = "obtenerFoto.php";
{
$.ajax({
type: "POST",
url: url1,
data: $form.serialize(),
success: function(data)
{
$('#foto').html(data);
}
});
}
});
});
obtenerFoto.php:
<html>
<head>
<meta charset="UTF-8">
<title>Obtener Foto</title>
<script src="jquery-latest.js"></script>
<script src="jsSlick/slick/slick.min.js"></script>
<link rel="stylesheet" href="jsSlick/slick/slick.css">
<link rel="stylesheet" href="jsSlick/slick/slick-theme.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" charset="UTF-8">
<link rel="stylesheet" href="estilosSlick.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
<script src="ajaxIdProducto.js"></script>
</head>
<body>
<script>
function slickCarousel() {
$('.slideshow2').slick({
dots:true,
arrows: true,
fade:false,
autoplay:false,
slidesToShow: 1,
slidesToScroll: 1,
});
}
function destroyCarousel() {
if ($('.slideshow2').hasClass('slick-initialized')) {
$('.slideshow2').slick('destroy');
}
}
destroyCarousel();
slickCarousel();
</script>
<?php
echo("<div class='contenedor2 slideshow2'>");
echo("<img src='imagenes/11.jpg'>");
echo("<img src='imagenes/12.jpg'>");
echo("<img src='imagenes/13.jpg'>");
echo("</div>");
?>
</body>
</html>
slick2.js:
$(".slideshow2").slick({
dots:true,
arrows: true,
fade:false,
autoplay:false,
slidesToShow: 1,
slidesToScroll: 1,
});
Maybe that's because when you call ajax obtenerFoto.php some of the scripts reload. After the script has finished loading, the slide carousel changes.
ajax request
Maybe you can try by changing the file obtenerFoto.php like this:
<?php
echo("<div class='contenedor2 slideshow2'>");
echo("<img src='imagenes/11.jpg'>");
echo("<img src='imagenes/12.jpg'>");
echo("<img src='imagenes/13.jpg'>");
echo("</div>");
?>
I am struggling to implement autocomplete on my page as no results are showing from the database.
Below is the code on the index.php page
<head> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script>
$(function() {
$("#tags").autocomplete({
source: "autocomplete.php"
});
});
</script> </head> <body> <label for="tags">Select Student</label> <div><input id="tags" type="text" name="tags" /> </div></body>
The autocomplete.php file looks like this...
<?php include("session.php");
session_start();
$description_arr = array();
$stmt = "select case
When (login.name is null or login.name='') and (login.surname is null or login.surname='')
then login.username
Else login.name + ' ' + login.surname
End as user_profile
from my_students
inner join login
on stud_id = login.id
where my_students.id = '$login_id'";
$ses_stmt = mysqli_query($conn, $stmt);
while($row = mysqli_fetch_array($ses_stmt)){
array_push($description_arr,$row['user_profile']);}
echo json_encode($description_arr);
?>
So I am trying to do something simple. There is a form, it does a self post and I want to get that post information from JQuery and put it into a div.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
JQuery here to catch button click and do a "PHP_self":
<script>
$(document).ready(function(){
$(".gettingpostbutton").click(function(){
$.post( "<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>", function( data ) {
$("#add_post_information_html_here").append(data+" number from $_POST");
});/**/
});
});
</script>
</head>
<body>
<?php
// define variables and set to empty values
$number = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$number = test_input($_POST["number"]);
}
For SQL Injection:
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
Basic Form:
<h2>PHP Form Validation Example</h2>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
put a number: <input type="text" number="number">
<br><br>
<input type="button" name="action" class="btn btn-success gettingpostbutton" value="Add Number" />
</form>
Put info to page either through PHP but prefer to do it through JQuery:
<?php
echo "<h2>Your Input:</h2>";
echo $number;
?>
<div id="add_post_information_html_here"></div>
</body>
</html>
Result:
I need to to do autocomplete suggestion for my website and the data should be retrieved from database. I want to use JQuery autocomplete. here is my code but it doesn't work!
This is my php file with the name of gethint.php:
<?php
require_once ('config.php');
$q=$_REQUEST["q"];
$sql="SELECT `fname` FROM `Property` WHERE fname LIKE '%$q%'";
$result = mysql_query($sql);
$json=array();
while($row = mysql_fetch_array($result)) {
$json[]=array(
'value'=> $row['fname'],
'label'=> $row['fname']
);
}
echo json_encode($json);
?>
and then this is my html file :
<html>
<head>
<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>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function(){
$("#hint").autocomplete({
source:'gethint.php',
minLength:1
});
});
</script>
</head>
<body>
<form class="sansserif" action="view.php" method="post">
Name: <input type="text" id="hint" name="hint" >
<input type="submit" name="submit" value="View">
</form>
</html>
It took a lot of time but I couldn't find the problem. I was wondering if someone could help me.
Thanks.
<?php
require_once ('..\config.php');
$q=$_REQUEST["term"];
$sql="SELECT `fname` FROM `Property` WHERE fname LIKE '%$q%'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)) {
$json[]=array(
'value'=> $row['fname'],
'label'=> $row['fname']
);
}
echo json_encode($json);
?>
All I changed was the $_REQUEST["q"] to $_REQUEST["term"].
I did some changes, maybe you need to fix something but take a look to see if helps...
The php:
<?php
require_once ('config.php');
$q=$_REQUEST["q"];
$sql="SELECT `fname` FROM `Property` WHERE fname LIKE '%$q%'";
$result = mysql_query($sql);
$json=array();
while($row = mysql_fetch_array($result)) {
array_push($json, $row['fname']);
}
echo json_encode($json);
?>
The html+jquery:
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
</head>
<body>
<form class="sansserif" action="view.php" method="post">
Name: <input type="text" id="hint" name="hint" />
<input type="submit" name="submit" value="View">
</form>
<script type="text/javascript">
$(function() {
$( "#hint" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "gethint.php",
dataType: "jsonp",
data: {
q: request.term
},
success: function( data ) {
response( data );
}
});
},
});
});
</script>
</body>
</html>
Your PHP script should be accepting a term parameter, not q.
I need when I start type on text box automatically get sugessions from database.then when I select a sugession automatically should fill other text fields which are relate to the selected choice.
here is my code,
view
<body>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/ css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery- ui.css">
<meta charset="UTF-8">
</script>
<script type="text/javascript">
$(document).ready(function(){
var ac_config = {
source: "<?php echo site_url('birds/get_birds'); ?>",
select:function(event, ui){
$("#city").val(ui.item.value);
$("#location").val(ui.item.location);
$("#label").val(ui.item.label);
},
minLength:2
};
$("#birds").autocomplete(ac_config);
})
</script>
<script type="text/javascript">
$(document).ready(function(){
var ac_config = {
source: "<?php echo site_url('birds/get_payee_data'); ?>",
select:function(event, ui){
$("#payeename").val(ui.item.name2);
$("#payee_address").val(ui.item.address2);
},
minLength:2
};
$("#test").autocomplete(ac_config);
})
</script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: "dd-mm-yy" });
});
</script>
<form action="#" method="post">
<input type="text" id="birds" />
<p>city: <input type="text" id="city"/></p>
<p>location: <input type="text" id="location"/></p>
<p>label: <input type="text" id="label"/></p>
<p>Date: <input type="text" id="datepicker"/></p>
<input type="text" id="test" />
<p>name: <input type="text" id="payeename"/></p>
<p>address: <input type="text" id="payee_address"/></p>
</form>
controller
class Birds extends CI_Controller{
function index(){
$this->load->view('birds_view');
}
function get_birds(){
$this->load->model('birds_model');
if (isset($_GET['term'])){
$q = strtolower($_GET['term']);
$this->birds_model->get_bird($q);
}
}
public function get_payee_data(){
$this->load->model('birds_model');
if (isset($_GET['term'])){
$ss = strtolower($_GET['term']);
$this->birds_model->load_payee_data($ss);
}
}
}
model
function get_bird($q){
$this->db->select('*');
$this->db->like('bird', $q);
$query = $this->db->get('birds');
if($query->num_rows > 0){
foreach ($query->result_array() as $row){
$new_row['label']=htmlentities(stripslashes($row['bird']));
$new_row['value']=htmlentities(stripslashes($row['aka']));
$new_row['city']=htmlentities(stripslashes($row['city']));
$new_row['location']=htmlentities(stripslashes($row['location']));
$row_set[] = $new_row; //build an array
}
echo json_encode($row_set); //format the array into json data
}
}
function load_payee_data($ss){
$this->db->select('*');
$this->db->like('name', $ss);
$query = $this->db->get('payee_details');
//$query = $this->db->query("SELECT * FROM payee_details WHERE name LIKE '%q%' ");
if($query->num_rows > 0){
foreach ($query->result_array() as $row){
$new_row['name2']=htmlentities(stripslashes($row['name']));
$new_row['address2']=htmlentities(stripslashes($row['address']));
$row_set2[] = $new_row; //build an array
}
echo json_encode($row_set2); //format the array into json data
}
}
under the gihan shows sugessions
You are using/including two separate versions of jquery, that'll be the root cause of the issue.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>