codeigniter and jquery autocomplete - javascript

i have some problem with the basicly function of jquery autocomplete in codeigniter but i think that the error isnt jquery
the code:
the view:
<link rel="stylesheet" href="<?php echo base_url();>application/libraries/jquery-ui.css" type="text/css">
<script type="text/javascript" src="<?php echo base_url(); ?>application/libraries/jquery-1.10.2.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>application/libraries/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#client_name').autocomplete({
source: "<?php echo site_url('site/check_in_client/?'); ?>"
});
});
</script>
<input type="text" name="client_name" id="client_name" placeholder="nome"/>
the model:
function check_in_client($name) {
$this->db->like('name',$name, 'both');
$query = $this->db->get('client');
return $query->result();
}
the controller:
function check_in_client() {
$this->load->library('javascript');
$this->load->view('check_in_client');
if(isset($_GET['term'])) {
$result= $this->membership_model->check_in_client($_GET['term']);
if(count($result) > 0) {
foreach($result as $pr)
$arr_result[] = $pr->name;
echo json_encode($arr_result);
}
}
}
the code load a view with a blank text boxe
where is the problem?
thanks a lot by

In your view file:
<link rel="stylesheet"href="//code.jquery.com/ui/1.11.4/themes/smoothness/jqueryui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript">
$(document).ready(function() {
$('#client_name').autocomplete({
source: "<?php echo site_url('site/check_in_client/?'); ?>"
});
});
</script>
<input type="text" name="client_name" id="client_name" placeholder="nome"/>
In your Model:
function check_in_client($name) {
$this->db->select('name',false);
$this->db->like('name',$name, 'both');
$query = $this->db->get('client');
if ($query->num_rows > 0) {
foreach ($query->result() as $row) {
$datas[] = $row->name;
}
echo json_encode($datas);
} else {
$datas[] = 'Oops! No suggestions found. Try a different search.';
echo json_encode($datas);
}
}
In your Controller:
function check_in_client() {
$this->load->library('javascript');
$this->load->view('check_in_client');
if(isset($_GET['term'])) {
$result= $this->membership_model->check_in_client($_GET['term']);
}
}

Related

Cannot implement autocomplete from mysql

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);
?>

Ajax Jquery Passing variable to PHP file

Hey Im having an issue in accessing the variable from JQuery Ajax. I ve tried everything. I even added cdn script tag to both files. but I keep getting this error of undefined index
Notice: Undefined index: head in C:\xampp\htdocs\Project\View.php on line 20
Anyone has any idea wats wrong with the syntax. I have attached both my files below.
SearchProjects.php
<html>
<head>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
$('#assign tr').click(function() {
var href = $(this).find("a").attr("href");
if(href) {
window.location = href;
}
});
});
$('td').on('click',function() {
var heading=$(this).text();
alert(heading);
$.ajax({
url: "View.php",
type: "POST",
data: {head: heading},
success: function(data){
alert("success");
}
});
});
</script>
</head>
<body>
<div>
<div class="col-md-12"><br/></div>
<?php
session_start();
$No="Not Assigned";
require("DB.php");
$query="SELECT `ID`, `Assigned_By`, `name`, `path`, `heading`,`Assigned_to`, `Completed`, `Date`, `Due_Date`, `Price` FROM `assign` where `Assigned_to`='Not Assigned' order by Date Desc";
$result=mysqli_query($PDB,$query);
if ($result->num_rows > 0) {
echo "<table class=table table-hover id=assign>"
."<thead>"
. "<tr> "
. "<th>ID</th>"
. "<th>Assigned_By</th>"
. "<th>Name</th>"
. "<th>Path</th>"
. "<th>Heading</th>"
. "<th>Assigned_To</th>"
. "<th>Completed</th>"
. "<th>Due_Date</th>"
. "<th>Submission_Date</th>"
. "<th>Price</th>"
. "</tr> </thead> ";
while($row = $result->fetch_assoc()) {
echo "<tr>"
. "<td>".$row["ID"]."</td>"
. "<td>".$row["Assigned_By"]."</td>"
. "<td>".$row['name']."</td>"
. "<td>".$row['path']."</td>"
. "<td>".$row['heading']."</td>"
. "<td>".$row['Assigned_to']."</td>"
. "<td>".$row['Completed']."</td>"
. "<td>".$row['Date']."</td>"
. "<td>".$row['Due_Date']."</td>"
. "<td>".$row['Price']."</td>"
. "<td><a class=btn btn-default href=View.php role=button>Show More!</a></td>"
. "</tr>";
}
echo "</table>";
}
else {
echo "0 results";
}
?>
</div>
</body>
View.php
<html>
<head>
<title>TODO supply a title</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<?php
session_start();
if(isset($_POST['head'])){
echo $_POST['head'];
}
$filename="CV.docx";
// $filename=$_SESSION['filename'];
//echo $filename."<br/>";
require("DB.php");
$query="SELECT `heading` FROM `assign` where `name`='$filename'";
$result=mysqli_query($PDB,$query);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$heading=$row['heading'];
$_SESSION['heading']=$heading;
}
}
else {
echo "0 results";
}
$dir = "Assigns/";
if (is_dir($dir)){
if ($dh = opendir($dir)){
while (($file = readdir($dh)) !== false){
if(!($file=="." || $file=="..")){
$f=explode(".",$file);
if(strcmp($f[0],$heading)){
if(!file_exists("Assigns/$file")) {
die("File not found");
}
else{
$my_file = "Assigns/$file";
$handle = fopen($my_file, 'r');
$data = fread($handle,filesize($my_file));
}
}
}
}
closedir($dh);
}
}
if($_SERVER['REQUEST_METHOD']== 'POST'){
if (isset($_POST['save'])) {
$assigned_to=$_SESSION['username'];
echo $assigned_to;
echo $filename;
$query="UPDATE `assign` SET `Assigned_to`='$assigned_to' WHERE `name`='$filename'";
$result=mysqli_query($PDB,$query);
if($result){
echo "wohooo";
}
else{
echo "nooo";
}
}
else if (isset($_POST['submit'])) {
// echo "submit";
header('location: Solution.php');
}
}
?>
<div class="container">
<form action="View.php" method="post">
<h1 style="clear:both;"><?php echo $heading."<br/>" ?> </h1>
<div class="form-group">
<?php echo $data; ?>
</div>
<div class="col-md-12 col-md-offset-6">
<input type="submit" name="submit" value="Submit Solution">
<input type="submit" name="save" value="Save Changes">
</div>
</form>
</div>
</body>
Always check the existence of a variable/array index before using it:
$head = isset($_POST['head']) ? $_POST['head'] : null;
//may check nullity of $head
There seem to be two things going on: First of all, the click handler for the td is not attached because the DOM was not ready, wrap your jQuery code in
$(function() {
//your code
})
Also, the click event on the tr and on the td are both fired...

div dissapear after including php

When I want to include my search in index.php, slider.php just disappears.
The file search.php is combination of php and javascript and slider.php is pure javascript.
This is my index.php:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mhgallery.js"></script>
<script type="text/javascript" src="js/initgallery.js"></script>
<script type="text/javascript" src="js/search.js"></script>
</head>
<body>
<?php include 'includes/search_form.php';?>
<?php include 'includes/slider.php';?>
</body>
</html>
This is search.php:
<?php
include 'init.php';
$output="";
if (isset($_POST['search'])){
$searchq = $_POST['search'];
$searchq = preg_replace ("#[^0-9a-z]#i","",$searchq);
$query = mysql_query("SELECT * FROM `users` WHERE `username` LIKE '%$searchq%'") or die("error");
$count = mysql_num_rows($query);
if ($count == 0){
$output = 'No resault';
}else{
while($row = mysql_fetch_array($query)){
$username = $row['username'];
$output .= '<div>'.$username.'</div>';
}
}
}
?>
This is search_form.php:
<?php include 'php_script/search.php';?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="search.js" type="text/javascript"></script>
<div id="search_box">
<form action = "index.php" method="POST">
<input id="box" type="text" name="search" placehoalder="Search" onkeydown="searchq();"/>
<input id="srch" type="submit" value=">>"/>
</form>
<div id="output">
<?php echo ($output);?>
</div>
</div>
This is slider.php:
<div id="mhgallery">
<style type="text/css"> #mhgallery img { display:none; } </style>
<img src="slideshow_slike/batman.jpg" title="batman" />
<img src="slideshow_slike/hobbit.jpg" title="hobbit" />
<img src="slideshow_slike/interstellar.jpg" title="interstellar" />
<img src="slideshow_slike/sw7.jpg" title="sw7" />
</div>
This is initgallery.js:
$(document).ready(function(){$("#mhgallery").mhgallery({width:950,height:400,scaleMode:'scaleToFill',firstSlide:0,randomPlay:false,autoPlay:true,backgroundMode:'transparent',backgroundColor:'#333333',showShadow:true,showThumbShadow:true,showPause:false,showBorder:true,borderSize:6,borderColor:'#FFFFFF',showFullscreen:false,fullscreenBackgroundColor:'#333333',fullscreenThumbArrowStyle:'white',interval:3000,effectSpeed:500,showCaption:false,textCSS:'.title {font-size:12px;font-weight:bold;font-family:Arial;color:#ffffff;line-height:200%;} .alt {font-size:12px;font-family:Arial;color:#ffffff;}',captionPosition:'bottom',captionBarColor:'#333333',captionBarOpacity:0.8,captionBarPadding:8,captionAlign:'center',showNavArrows:true,autoHideNavArrows:true,arrowStyle:'white',showThumbs:false,thumbSize:40,thumbGap:8,thumbBottom:-60,thumbArrowStyle:'black',thumbOpacity:0.8,thumbBorderWidth:1,thumbBorderColor:'#FFFFFF',thumbBorderActiveColor:'#FFFFFF',effect:'fade,slideLeft,slideRight,slideTop,slideBottom',jsFolder:'js'});});
This is search.js:
function searchq(){
var searchTxt = $("input [name='search']").val();
$.post("search.php", {searchVal: searchTxt}, function (output){
$("#output").html(output);
});
}

JQuery Autocomplete from Database

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.

jquery auto complete sugessions does not display

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>

Categories

Resources