We Keep Coding

jquery live search not working [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
hii i am creating a live search like this http://demo.phpgang.com/live-search-php-mysql-jquery/ and i am having a small problem in code this
jQuery("#result").on("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find(\'.name\').html();
var decoded = $("<div/>").html($name).text();
$(\'#searchid\').val(decoded);
the codes are taken from here http://www.phpgang.com/how-to-integrate-live-search-in-php-and-mysql-with-jquery_309.html
Problem - The problem i am facing is that when i search something it shows results correctly but when i click on result then nothing happens i want that result in input box when i click it. thanks help needed
here is a complete code
index.php
<?php
$content ='<script type="text/javascript" src="jquery-1.8.0.min.js">
</script>
<script type="text/javascript">
$(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();
}
});
});
</script>
<style type="text/css">
.content{
width:900px;
margin:0 auto;
}
#searchid
{
width:500px;
border:solid 1px #000;
padding:10px;
font-size:14px;
}
#result
{
position:absolute;
width:500px;
padding:10px;
display:none;
margin-top:-1px;
border-top:0px;
overflow:hidden;
border:1px #CCC solid;
background-color: white;
}
.show
{
padding:1px;
font-size:15px;
height:50px;
}
.show:hover
{
background:#4c66a4;
color:#FFF;
cursor:pointer;
}
<div class="content">
<input type="text" class="search" id="searchid" placeholder="Search for
people" /><br />
<div id="result"></div>
</div>';
$pre = 1;
include("html.inc");
?>
search.php
<?php
include('db.php');
if($_POST)
{
$q = mysqli_real_escape_string($connection,$_POST['search']);
$strSQL_Result = mysqli_query($connection,"select id,name,email from seller
where name like '%$q%' or email like '%$q%' order by id LIMIT 5");
while($row=mysqli_fetch_array($strSQL_Result))
{
$username = $row['name'];
$email = $row['email'];
$b_username = '<strong>'.$q.'</strong>';
$b_email = '<strong>'.$q.'</strong>';
$final_username = str_ireplace($q, $b_username, $username);
$final_email = str_ireplace($q, $b_email, $email);
?>
<div class="show" align="left">
<span class="name"><?php echo $final_username; ?></span> <br/>
<?php echo $final_email; ?><br/>
</div>
<?php
}
}
?>

There are few issues with your code. Let's start with
var $name = $clicked.find(\'.name\').html();
Here . is not a valid operator for concatenation in JS. It is used in PHP. To concatenate strings, use +.
Secondly, using \'.name.\' as input to find option. I suppose that name is already a string? You don't need extra escaping of ' unless that is part of echo in PHP. Simply use ' to start a string.
Next is:
var decoded = $("<div/>").html($name).text();
<div/> is not a valid selector. Use div simply.
Check the jsfiddle here for fixed code from your link:
https://jsfiddle.net/1mss5xwj/1/

Need Assististance with converting jquery single function to object instances with multiple functions

Hello: I have a lists of teams stored in a database and they are all associated with a division. each team has a "div_id" and a "team_id". I have a jquery function (dropdown) that is fed the div_id and then does an ajax call to look up the teams for that division and list them in another dropdown...
this all worked; so what I am trying to do now is essentially have multiple instances of this on a page. And all of them being independent of each other. so I figured that for these to independent of each other; they will need to be objects. I have done objects in PHP but never JS. In PHP I always stored the objects in an array so I figured the same thing here. So I made an attempt to convert my working single solution to a solution that will work several times on a page. It did not work so I am looking for some help. I will first post the "working" single version. And then I will post the attempt I made to convert it into objects...
Here is function that worked with single set of dropdowns:
$gym_id=$_POST['gym_id'];
?>
<style>
#slot_cont1 {width: 100%; height: 50px; border: 1px solid red;}
</style>
<form action="/wp-admin/gc_admin_partial_complete_games.php" method="post" id="submit1" name="submit1" >
<input type="hidden" name="gc_post" value=3>
<?php
$sql = "SELECT * FROM scheduler_slots WHERE gym_id=$gym_id AND status='open' LIMIT 0,3";
foreach ($dbh->query($sql) as $row) {//gxx1
?>
<div id="slot_cont1">
<?php
$slot_date=$row[slot_date];
$slot_start=$row[slot_start];
$slot_id=$row[gc_id];
$div_box_id="ajax_content-".$slot_id;
$function_name="G_function1-".$slot_id;
echo $slot_date." - ".$slot_start;
?>
<style>
#ajax_content {width: 175px; margin: 15px 0 15px 0; }
#ajax_content a {color: #394f68; text-decoration: underline;}
#ajax_content a:hover {color: black;}
#upper_container {width: 100%;}
</style>
<select id="comboA" name="<?php echo $function_name; ?>" onchange="G_function1(this)">
<option value=""></option>
<?php
$sql = "SELECT * FROM scheduler_divisions ORDER BY gc_order";
foreach ($dbh->query($sql) as $resultsg1)
{
$div_id = $resultsg1[div_id];
$div_name = $resultsg1[div_name];
?>
<option value="<?php echo $div_id; ?>" >
<?php echo $div_name; ?></option>
<?php } ?>
</select>
<div id="<?php echo $div_box_id; ?>" id="id57512">
</div>
<hr>
</div>
<?php
}// close gxx1
?>
<br style="clear: both;"/>
<br/><br/>
<input type="submit" value="submit" />
</form>
<script>
function G_function1(sel) {
var value = sel.value;
var answer = value;
$.ajax({
cache: false,
type: 'GET',
url: 'http://scheduler.mydomain.com/gscript6_team_dropdown.php',
data: 'answer=' + answer,
dataType: 'html',
success: function(response) {
$("#<?php echo $div_box_id; ?>").html(response);
}
});
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
Ok so now here is my attempt to convert it:
$gym_id=$_POST['gym_id'];
?>
<style>
#slot_cont1 {width: 100%; height: 50px; border: 1px solid red;}
</style>
<form action="/wp-admin/gc_admin_partial_complete_games.php" method="post" id="submit1" name="submit1" >
<input type="hidden" name="gc_post" value=3>
<?php
$sql = "SELECT * FROM scheduler_slots WHERE gym_id=$gym_id AND status='open' LIMIT 0,3";
foreach ($dbh->query($sql) as $row) {//gxx1
?>
<div id="slot_cont1">
<?php
$slot_date=$row[slot_date];
$slot_start=$row[slot_start];
$slot_id=$row[gc_id];
?>
<script>
var jsslot='<?php echo $slot_id; ?>';
</script>
<?php
$div_box_id="ajax_content-".$slot_id;
$function_name="G_function1-".$slot_id;
echo $slot_date." - ".$slot_start;
?>
<style>
#ajax_content {width: 175px; margin: 15px 0 15px 0; }
#ajax_content a {color: #394f68; text-decoration: underline;}
#ajax_content a:hover {color: black;}
#upper_container {width: 100%;}
</style>
<select id="comboA" name="<?php echo $function_name; ?>" onchange="person(this)">
<option value=""></option>
<?php
$sql = "SELECT * FROM scheduler_divisions ORDER BY gc_order";
foreach ($dbh->query($sql) as $resultsg1)
{
$div_id = $resultsg1[div_id];
$div_name = $resultsg1[div_name];
?>
<option value="<?php echo $div_id; ?>" >
<?php echo $div_name; ?></option>
<?php } ?>
</select>
<div id="<?php echo $div_box_id; ?>" id="id57512">
</div>
<hr>
</div>
<?php
}// close gxx1
?>
<br style="clear: both;"/>
<br/><br/>
<input type="submit" value="submit" />
</form>
<script>
function person(div_id,slot_id) {
this.div_id = div_id;
this.slot_id = slot_id;
this.show_teams = function (div_id,slot_id) {
var value = div_id.value;
var answer = value;
$.ajax({
cache: false,
type: 'GET',
url: 'http://scheduler.mydomain.com/gscript6_team_dropdown.php',
data: 'answer=' + answer,
dataType: 'html',
success: function(response) {
$("#<?php echo $div_box_id; ?>").html(response);
}
});
}
}
var show_them[slot_id] = new person(div_id,slot_id);
show_them.show_teams(div_id,slot_id);
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
so the second version is not working so I am hoping someone can help me with it...
******************** update 2:42am EST ***********************
OK Roamer: here is my new code based on your answer:
$gym_id=$_POST['gym_id'];
?>
<style>
#slot_cont1 {width: 100%; height: 50px; border: 1px solid red;}
</style>
<form action="/wp-admin/gc_admin_partial_complete_games.php" method="post" id="submit1" name="submit1" >
<input type="hidden" name="gc_post" value=3>
<?php
$sql = "SELECT * FROM scheduler_slots WHERE gym_id=$gym_id AND status='open' LIMIT 0,3";
foreach ($dbh->query($sql) as $row) {//gxx1
?>
<div id="slot_cont1">
<?php
$slot_date=$row[slot_date];
$slot_start=$row[slot_start];
$slot_id=$row[gc_id];
?>
<script>
var jsslot='<?php echo $slot_id; ?>';
</script>
<?php
$div_box_id="ajax_content-".$slot_id;
$function_name="G_function1-".$slot_id;
echo $slot_date." - ".$slot_start;
?>
<style>
#ajax_content {width: 175px; margin: 15px 0 15px 0; }
#ajax_content a {color: #394f68; text-decoration: underline;}
#ajax_content a:hover {color: black;}
#upper_container {width: 100%;}
</style>
<select class="divisions" name="<?php echo $function_name; ?>">
<option value=""></option>
<?php
$sql = "SELECT * FROM scheduler_divisions ORDER BY gc_order";
foreach ($dbh->query($sql) as $resultsg1)
{
$div_id = $resultsg1[div_id];
$div_name = $resultsg1[div_name];
?>
<option value="<?php echo $div_id; ?>" >
<?php echo $div_name; ?></option>
<?php } ?>
</select>
<div class="teams"></div>
<hr>
</div>
<?php
}// close gxx1
?>
<br style="clear: both;"/>
<br/><br/>
<input type="submit" value="submit" />
</form>
<script>
$(function() {
$("select.divisions").on('change', function() {
var $this = $(this);
$.ajax({
cache: false,
type: 'GET',
url: 'http://scheduler.mydomain.com/gscript6_team_dropdown.php',
data: 'answer=' + $this.val(),
dataType: 'html',
success: function(response) {
//find the appropriate teams div relative to `this` select element and stuff the response into it.
$this.nextAll(".teams").html(response);
}
});
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
So that is my new code base on R's answer but still do nothing. So if anyone can help with this it will be greatly appreciated...

You don't appear to need to do much to fix this :
In the HTML, use classes, not ids, to identify the select elements and their target divs.
Make sure the scripts and link tag are in the document's <head>...</head>
Attach the onchange handler in javascript, not HTML.
In the onchange handler, traverse the DOM to find the appropriate teams div relative to the select element whose change event is being handled.
Wrap the script in $(function() {...}); to ensure it doesn't attempt to run until the DOM's ready event fires
HTML
<select class="divisions" name="<?php echo $function_name; ?>">...</select>
<div class="teams"></div>
Javascript
$(function() {
$("select.divisions").on('change', function() {
var $this = $(this);
$.ajax({
cache: false,
type: 'GET',
url: 'http://scheduler.mydomain.com/gscript6_team_dropdown.php',
data: 'answer=' + $this.val(),
dataType: 'html',
success: function(response) {
//find the appropriate teams div relative to `this` select element and stuff the response into it.
$this.nextAll(".teams").html(response);
}
});
});
});

How to select text and display it in another textfield using JavaScript or jQuery

I have a PHP/AJAX search script working just fine. The problem is when I type something in the text field the suggestions appear below, but they cannot be selected. In short, I want to select one of the suggestion and show the value in the search text field upon selecting it.
I have tried a solution in JavaScript, but it doesn't work. It shows an error in the console like "the select value is null".
ajax.php
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
</head>
<body>
<input id="sear" autocomplete="off" type="text" name="search"
placeholder="Seaarch here" onkeyup="search(this.value)">
<div onclick="ali()" id="list" ></div>
<script>
function search(str){
if(str.length ==0){
document.getElementById("list").innerHTML="Please Enter Something";
return;}
xml=new XMLHttpRequest();
xml.onreadystatechange=function(){
if(xml.readyState==4 && xml.status==200){
document.getElementById("list").innerHTML=xml.responseText;}
}
xml.open("GET","search.php?char="+str,true);
xml.send();
}
</script>
<script>
document.addEventListener("DOMContentLoaded",function(){
function ali(){
var acs;
var x=document.getElementById("#list").select();
acs=x.value;
document.getElementById("#sear").innerHtml=acs;
}
});
</script>
</body>
search.php
<?php
$con=mysqli_connect("localhost","root","","userdiary");
$str=$_GET['char'];
$sql="SELECT * FROM `login` WHERE `user_id` LIKE '$str%' OR `user_name` LIKE
'$str%'";
$query=mysqli_query($con,$sql);
if(mysqli_num_rows($query)>0){
while($res=mysqli_fetch_assoc($query)){
echo "<option>" .$res['user_name']."</option>"."<hr>";
}
}
else{
echo "No match Found..";
}
?>

If the #sear element looks something like this once suggestions populate into it:
<div id="list">
<option>test</option>
<option>test a</option>
<option>test b</option>
</div>
then you can try this for your jQuery script:
$('#list option').on('click', function() {
$('#sear').val($(this).text());
});

You typed select in worng way. It should be something as follows:
<select onchange="ali()" id="list" ></select>

You can check this code I used it yesterday. You just have to change the name of SQL part according to your goal
Also what I give you is jQuery ui you have to add
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />
and your input must have auto class
search.php:
<?php
define('DB_SERVER', 'localhost');
define('DB_USER', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'some');
if (isset($_GET['term'])){
$return_arr = array();
try {
$conn = new PDO("mysql:host=".DB_SERVER.";port=8889;dbname=".DB_NAME, DB_USER, DB_PASSWORD);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $conn->prepare('SELECT Tname FROM Topic WHERE Tname LIKE :term');
$stmt->execute(array('term' => '%'.$_GET['term'].'%'));
while($row = $stmt->fetch()) {
$return_arr[] = $row['Tname'];
}
} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
/* Toss back results as json encoded array. */
echo json_encode($return_arr);
}
?>
and jQuery UI
$(function() {
$(".auto").autocomplete({
source: "search.php",
minLength: 1,
});
});
and css
.ui-menu .ui-menu-item a {
text-decoration: none;
display: block;
padding: 5px .4em;
line-height: 1.5;
min-height: 0;
font-weight: normal;
z-index:11;
}
ul#ui-id-1{
z-index:11;
display: none;
top: 132px;
left: 354.5px;
width: 283px;
}

Not sure how to create an if statement saying if <iframe> else something else

I am in Magento, but I figure this can be done with normal PHP. Maybe I am wrong. I am inexperienced when it comes to PHP.
I have an issue where I need to kill an iframe from trying to display in a dropdown. But it still needs to display when you get to that specific landing page. So I can't kill it everywhere, just on the dropdown. So what I need to write is when that iframe does try to show up in the dropdown, it gets replaced with normal text.
I tried finding an answer to this but no luck.
Thank you for your time in advance.
This is the code being used for that specific dropdown. There is no if statement running right now to kill it. I tried a couple of things that didn't come close to working.
<?php
$category = Mage::getSingleton('catalog/layer')->getCurrentCategory();
$category = Mage::getModel('catalog/category')->load(54);
$categories = $category->getCollection()
->addAttributeToSelect(array('name', 'thumbnail', 'description'))
->addAttributeToFilter('is_active', 1)
->addIdFilter( $category->getChildren() );
$categories->getSelect()->order('RAND()');
$categories->getSelect()->limit(1);
?>
<?php foreach ($categories as $category): ?>
<div>
<a href="<?php echo $category->getUrl(); ?>">
<img alt="<?php echo $category->getName(); ?>" src="<?php echo Mage::getBaseUrl('media') . 'catalog' . DS . 'category' . DS . $category->getThumbnail() ?>" alt="<?php echo $this->htmlEscape($category->getName()) ?>" style="width: 100%; max-height: 240px; box-shadow: 0px 2px 4px #aaa;-ms-box-shadow: 0px 2px 4px #aaa;-moz-box-shadow: 0px 2px 4px #aaa;-webkit-box-shadow: 0px 2px 4px #aaa;border: 1px solid #F7EBD2;" />
</a>
<br />
<h3>Spotlight Watch</h3>
<p>
<?php
$sdesc = $category->getDescription();
$sdesc = trim($sdesc);
$limit = 300;
if (strlen($sdesc) > $limit) {
$sdesc = substr($sdesc, 0, strrpos(substr($sdesc, 0, $limit), ' '));
}
?>
<?php echo $sdesc."..."; ?>
</p>
View <?php echo $category->getName(); ?> Watches...
</div>
<?php endforeach; ?>

How can I pass the data back to index file?

I have an index.php file to contain the layout of my website. In the index file, I have a search form which sends data to another php file to process(action="search.php"). My problem is: I can select the data that suits the user's keyword and output it, but the output isn't with the layout, it's just text on white background. What I need to know is: How can I pass the data that I've selected back to index.php so that it can have layout? I've tried window.location and include but it didn't work. Here's my code:
<?php
$search=$_GET['search'];// name of the text field is "search"
include('connectdb.php');
$result=mysql_query("SELECT * FROM article WHERE header LIKE '%".$search."%'");
while($row=mysql_fetch_array($result))
{?>
<?php echo $row['header'];
echo $row['content'];
}
?>

Use php Header function to go back to index.php. This is a demo only. You just get the idea and design what you want.
<?php
$search=$_GET['search'];// name of the text field is "search"
include('connectdb.php');
$result=mysql_query("SELECT * FROM article WHERE header LIKE '%".$search."%'");
while($row=mysql_fetch_array($result))
{?>
header("index.php?header=".$row['header']."&content=".$row['content']);
}
?>
Then catch these details in your index file
<?php
$header=$_GET['header'];
$content=$_GET['content'];
?>

You can make something like this:
var text = $(this).val();
$.ajax({
url: "search.php",
type: "POST",
data: {search: text},
datatype: 'json',
success: function(data){
if(data){
//here you are parsing json object
var data = JSON.parse(data);
//0: Object
//header: "blablabla"
//content: "blablabla"
//1: Object
//header: "wwwwwws"
//content: "wewesssss"
//length will be equal of results amount
var length = data.length;
var li = '';
//here you are making li
for(var i = 0; i < length; i++){
li += '<li>';
li += data[i]['header'] . data[i]['content'];
li += '</li>';
}
//appending element in dom
$('ul').html(li);
}
}
});
this ajax...
$row = mysql_fetch_array($result);
$row = json_encode($row);
eco $row;
//this will return json object
//[{"header":"blablabla","content":"blablabla"},{"header":"wwwwwws","content":"wewesssss"}]
this your php

here is a simple example, you just gotta copy the exact same layout of index.php and implement it on search.php if you are selecting data from database on index.php then do the same query on search.php
style.css
.center_content{
width:500px;
height:300px;
background:yellow;
border:1px solid;
}
.right_column{
width:200px;
height:300px;
background:Red;
display:inline-block;
}
.right_column{
width:200px;
height:300px;
background:green;
display:inline-block;
}
index.php
<link type="text/css" rel="stylesheet" href="style.css">
<form method="get" action="send.php">
<input type="text" name="search" placeholder="search here">
<input type="submit" value="submit">
</form>
<div class="left_column">blah blah</div>
<div class="center_content">
put whatever you want here
</div>
<div class="right_column">blah blah</div>
search.php
<form method="get" action="">
<input type="text" name="search" placeholder="search here">
<input type="submit" name="submit" value="submit">
</form>
<div class="left_column">blah blah</div>
<div class="center_content">
<?php
if(isset($_GET['submit'])){
$search=$_GET['search'];// name of the text field is "search"
include('connectdb.php');
$result=mysql_query("SELECT * FROM article WHERE header LIKE '%".$search."%'");
while($row=mysql_fetch_array($result))
{?>
<?php echo $row['header'];
echo $row['content'];
}}
?>
</div>
<div class="right_column">blah blah</div>