this auto complete extender is working perfectly but i dont whats the reason its stopped working , No javascript error is coming .Here is my code
<script src="scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="scripts/jquery-ui.min.js" type="text/javascript"></script>
<link href="scripts/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
$("#autocomplete").autocomplete({
source: "searchEAN.php",
minLength: 2,//search after two characters
select: function(event,ui){
// alert ($value.$id);
alert (ui.item.value);
//do something, like search for your hotel detail page
}
});
});
</script>
</head>
<body>
<div class="demo">
<div class="ui-widget">
<label for="autocomplete">Hotel Name: </label>
<input id="autocomplete" name="autocomplete"/>
</div>
</div>
and this is searchEAN.php page code . its return data when i run this page directly by passing terms as query string
<?php
include_once('config.php');
if (isset($_GET['term'])) {
$term = trim(strip_tags($_GET['term']));//retrieve the search term that autocomplete sends
$qstring = "SELECT Distinct CONCAT(City,',',StateProvince,',',Country) AS value,EANHotelID AS id FROM ActivePropertyList WHERE City LIKE '%".$term."%' GROUP BY value limit 0,10 ";
echo $qstring;
$result = mysql_query($qstring);//query the database for entries containing the term
while ($row = mysql_fetch_array($result,MYSQL_ASSOC))//loop through the retrieved values
{
$row['value']=htmlentities(stripslashes($row['value']));
$row['id']=(int)$row['id'];
$row_set[] = $row;//build an array
}
echo json_encode($row_set);//format the array into json data
mysql_close();
}
?>
searchEAN.php can be check here .live link and auto complete which is not working can be check here
your echo $qstring; is in your PHP script. Comment it out!
Sorry , Problem solved that is mine mistake , I echo the query to check it but forgot to comment it. thats the reason its no working .
I comment out the
//echo $qstring; in searchEAN.php file
and its working now
thanks
Related
I am currently trying to display data returned from my database onto my php display page. I have been following along this tutorial:
https://www.phpzag.com/ajax-drop-down-selection-data-load-with-php-mysql/
At first I tried it to test against my data. But I found it to be working incorrectly. So I then decided to use the sample data provided in the tutorial on my system to see where things are going wrong. Thus my pages are as follows:
populatePage.php <---This acts as my "index.php" from tutorial
<?php
require_once('../../config/sessionHandler.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="src/populatePage.js"></script>
<title>Populate Page</title>
</head>
<body >
<div class="page-header">
<h3>
<select id="employee">
<option value="" selected="selected">Select Employee Name</option>
<?php
$sql = "SELECT id, employee_name, employee_salary, employee_age FROM employee LIMIT 10";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
while( $rows = mysqli_fetch_assoc($resultset) ) {
?>
<option value="<?php echo $rows["id"]; ?>"><?php echo $rows["employee_name"]; ?></option>
<?php } ?>
</select>
</h3>
</div>
<div id="display">
<div id="heading" class="row">
<h3>
</h3>
</div>
<div id="records" class="row">
<h3>
</h3>
</div>
</div>
</body>
</html>
populatePage.js <---My renamed version of getData.js from tutorial
$(document).ready(function(){
// code to get all records from table via select box
$("#employee").change(function() {
var id = $(this).find(":selected").val();
var dataString = 'empid='+ id;
$.ajax({
url: 'popJax.php',
dataType: "json",
data: dataString,
cache: false,
success: function(employeeData) {
if(employeeData) {
$("#heading").show();
$("#no_records").hide();
$("#emp_name").text(employeeData.employee_name);
$("#emp_age").text(employeeData.employee_age);
$("#emp_salary").text(employeeData.employee_salary);
$("#records").show();
} else {
$("#heading").hide();
$("#records").hide();
$("#no_records").show();
}
}
});
})
});
popJax.php <--- This is my getEmployee.php from the tutorial
<?php
require_once('../../config/sessionHandler.php');
$_SESSION['PopulateWorking'] = true;
if($_REQUEST['empid'])
{
$sql = "SELECT id, employee_name, employee_salary, employee_age FROM employee WHERE id='".$_REQUEST['empid']."'";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$data = array();
while( $rows = mysqli_fetch_assoc($resultset) )
{
$data = $rows;
}
echo json_encode($data);
}
else
{
echo 0;
$_SESSION['Fail'] = true;
}
?>>
My sessionHandler is used to achieve the database connection and session verification.
I followed along with the tutorial. And thus far my system will:
-Retrieve the users from the table.
-Populate the drop down with them.
-Allow me to select a user.
-Display $_SESSION['PopulateWorking'] as 'true'
AND
-Properly read through employee data while I watch it in JS debugger.
But somewhere along these lines I am missing something. I have worked with AJAX, PHP, and SQL pretty frequently. But am by no means an expert. I am looking for where I am missing an integral step? I just want to try and display the data like he does in the tutorial. Because then I can fine tune and change everything around to make it work how I would like. But right now when I click a user nothing populates on the page like it does in his tutorial. Mine works right up until the actual important part. Displaying the selected data.
When compared next to his mine also does not display : "Please select employee name to view details", anywhere on the page? So I am thinking I am missing an entire DIV somewhere? Or not generating it? Or the script is not calling it properly?
I just can't seem to figure out where I am incorrectly utilizing the JSON data?
TL;DR: Why will my page not display the result data on my page like it does in this tutorial?
Im sorry for the waste of time. I did not have any of the div's that i was trying to reference in popJax.php
I needed to add
I have code below for a search bar that, upon clicking 'Search', loads a new page with the query results. How do I change it so instead of loading a new page, the query results open in a modal popup within the same page?
index.php
<head>
<title>Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<form method="POST" action="search.php">
<input type="text" name="q" placeholder="Enter query"/>
<input type="submit" name="search" value="Search" />
</form>
</body>
search.php
<?php
error_reporting(E_ALL);
ini_set('display_errors',1);
include_once('db.php'); //Connect to database
if(isset($_POST['q'])){
$q = $_POST['q'];
//get required columns
$query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%$q%' OR `yupikWord` LIKE '%$q%'") or die(mysqli_error($conn)); //check for query error
$count = mysqli_num_rows($query);
if($count == 0){
$output = '<h2>No result found</h2>';
}else{
while($row = mysqli_fetch_assoc($query)){
$output .= '<h2>'.$row['yupikWord'].'</h2><br>';
$output .= '<h2>'.$row['englishWord'].'</h2><br>';
$output .= '<h2>'.$row['audio'].'</h2><br>';
$audio_name = $row['audio'];
$output .= "<a href='audio/$audio_name'>$audio_name</a> ";
}
}
echo $output;
}else{
"Please add search parameter";
}
mysqli_close($conn);
?>
You need to use JavaScript on your page to executed an AJAX call to search.php. That PHP file preferable returns JSON data, or complete HTML that can be added to the modal window.
Conceptually:
Use JavaScript to executed AJAX POST to search.php
Have search.php return the data in JSON format.
Have JavaScript catch the returned data, iterate through it and create HTML elements.
Use JavaScript to open a new modal window.
Use JavaScript to add the HTML elements to the modal's body.
You don't necessarily need to use JavaScript to create the modal window. You can create it in plain HTML and fill it and open it using JavaScript.
Welcome to stackoverflow. Here's my solution for that, so first, you have to capture the form submission, the technique is doing GET request using jQuery which I assume you already using jQuery since you are using bootstrap and bootstrap uses jQuery
$('form').submit(function(e){
e.preventDefault() // do not submit form
// do get request
$.get( 'search.php', { q : },function(e){
// then show the modal first
$('#mymodal').modal('show');
// then put the results there
$('#mymodal:visible .modal-container .modal-body').html(e);
});
});
I'm trying to pass a variable from an html file, using jquery and ajax to a php file, where I want to process it. I have two test files:
ajax.html
<html>
<head>
<title>ajax</title>
<script type="text/javascript" src="jquery.js"></script>
<link href="ajax.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$("#call_back").click(function () {
$.post(
"ajax.php", {
value: $("#input_text").val()
},
function (data) {
$("#response_text").val(data);
}
);
});
});
</script>
</head>
<body>
<div id="wrapper">
<h3>Ajax</h3>
<div class="entry-wrapper">
<h4>Data to send to the server</h4>
<input type="text" size="50" id="input_text" />
<input type="button" value="Ajax Callback" id="call_back" />
</div>
<div id="response_wrapper">
<textarea id="response_text"></textarea>
</div>
</div>
</body>
</html>
and ajax.php
<?php
$value = $_POST['value'];
echo "Returned from the server: $value";
?>
The html works fine. If I enter a value in the text field, it's passed to the php file, processed and sent back to be displayed in the textarea.
I've looked in firebug and the post tag in the console shows the values that I enter.
The problem is that I want to be able to use the variable in the php file, for arithmetic operations or running an sql query with it, but it shows up as undefined index when I open the php file.
I've looked through multiple threads on passing variables from jquery to php but still found no answer. I have no idea what the problem is. Suggestions are much appreciated. Thanks.
If I understand you question correctly, you need to define the variable in your url.
Example:
http://yoursite.com/ajax.php?value=yourdata
This way when you open the file you are defining the value which is all you are doing with your ajax request. If this is not what you are trying to accomplish, try to rephrase your question.
Revised after 1st comment:
<?php
if(isset($_POST['value'])){
//do whatever in here
dowhatever();
}
function dowhatever() {
$value = $_POST['value'];
echo "Returned from the server: $value";
if(value == 'data') {
//run query
}//end if
}
?>
I assume that when you say you can confirm it's working, but when you directly open the .php file, it has undefined index, then I would say that makes perfect sense. If you are browsing directly to the .php file, then no POST data is being sent. But if you are able to type in some text, fire off the submit, and get text back as planned, then it's working.
I have records in the mysql database. in the browser, I need to display just the id or the name and it should be clickable, when clicked it should show the other info like email, phone etc..
I can list the names using SELECT but not sure how to link it and show the data..if there is a jquery method to display the data in a div, it would be good ..please advise me how to start with..thanks.
ex
rob
mike
bob
i guess the url will have the remaining data for that record.
clicking on rob, then result should be
Rob
Phone - $phone
Email - $email
Age - $age
make your href link send to another page where you have all stats printed. The best way is having href by ID. So.
rob
mike
bob
Or you can make a toolip out of it and hide all information into dispay none "bubble" :P
http://www.sohtanaka.com/web-design/simple-tooltip-w-jquery-css/
I think what you want to do is use an ajax to compare the data without a refreshing page so here's my code example that you can improve as your needs :
INDEX.HTML
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#get").click(function()
{
var name = $("#name").val();
$('#1').load("getdata.php?name=" +name);
});
});
</script>
</head>
<body>
NAME : <input type="textbox" id="name" >
<button id="get">Get Name Data</button>
<div id="1" name='divku'></div>
</body>
</html>
GETDATA.PHP
<?php
$name = $_GET['name'];
getname($name);
function getname($name)
{
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("stackoverflow", $con);
$result = mysql_query("SELECT * FROM user where name = '" . $name . "'" );
while($row = mysql_fetch_array($result))
{
echo $row[0] . $row[1] . $row [2];
}
mysql_close($con);
}
?>
I hope this could solve your problem
You can try this method,
foreach ($detailedArr as $arr) {
echo '<a href="javascript:;" name="a_name" id="a_'. $arr['id'] .'" >'. $arr['name'] .'</a>';
echo '<div name="div_detail" id="div_'. $arr['id'] .'" style="clear:both;display:none;" >';
echo 'email : '. $arr['email'];
echo '</div>';
}
here $detailedArr is the array which is having all your records and you can change the design based on your requirement. and in your Javascript code
$(function() {
$("[name=a_name]").click(function() {
var clkId = $(this).attr('id').split('_')[1];
$("[name=div_detail]").hide({animate:'slow'});
$("#div_"+clkId).show({animate:'slow'});
});
});
here I have done with jQuery so you have to include jQuery library
Amateur novice here, so many thanks in advance for any help. I'm going crazy here.
I'm trying to develop a jquery script to search mysql via php for images stored in my database. User would type a word in an input field. Each character entered in that word returns a separate piece of artwork (e.g, type f-l-o-w-e-r and get six corresponding images). With some help, I got the php script working ok with a regular html form. But now that I've tried adding the jquery part, everything connects OK and seems to run the wayI want, but instead of images, I only get empty boxes with the 'broken image' icon.
I'm attaching the basic scripting of the find.php page below. After that, is the index.php page with the jquery. Any thoughts deeply appreciated...
$lettertype = str_split($lettertype);
$lettertype = "'" . implode("','", $lettertype) . "'";
$query = "SELECT * FROM Photos WHERE letter IN ($lettertype)";
$result = mysqli_query($cxn, $query)
or die ("No good");
$alpharray = array();
while($row = mysqli_fetch_assoc($result))
{
$alpharray[$row['search_term']][] = $row; //
}
foreach(str_split($_POST['search_term']) as $alpha)
{
echo "<a href='link.com'>
<img src='../delete/images/{$alpharray[$alpha][0]['imagePath']}' width='100' height='140'/></a>";
}
And then the index.php...
<script type='text/javascript'>
$(document).ready(function(){
$("#search_results").slideUp();
$("#search_button").click(function(e){
e.preventDefault();
ajax_search();
});
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
});
});
function ajax_search(){
$("#search_results").show();
var search_val=$("#search_term").val();
$.post("./find.php", {search_term : search_val}, function(data){
if (data.length>0){
$("#search_results").html(data);
}
})
}
</script>
<title>Welcome!</title>
</head>
<body>
<h1>Search here</h1>
<form id="searchform" method="post">
<div>
<label for="search_term">Search</label>
<input type="text" name="search_term" id="search_term" />
<input type="submit" value="search" id="search_button" />
</div>
</form>
<div id="search_results"></div>
</body>
</html>
The src attribute of <img> is always relative to the URL of the actual page the webbrowser sees.
Example:
www.example.com/test/index.php contains an <img> with src=../image.jpg means the webbrowser tries to load www.example.com/image.jpg
So if your index.php lies in / (e.g. www.example.com/index.php), it is likely that referring to an image in ../delete won't work as the server doesn't allow accessing thing outside its webroot.
In any case however, if you want to access the parent directory, you need to put in a ../ (not only ..)
For your script this would mean:
foreach(str_split($_POST['search_term']) as $alpha)
{
echo "<a href='link.com'>
<img src='../delete/images/{$alpharray[$alpha][0]['imagePath']}' width='100' height='140'/></a>";
}