I have pretty much copied and pasted from this Stackoverflow question/answer, and it doesn't seem to want to work on my page. I also tried creating a blank PHP page to try it on, and it still doesn't work.
Also the jQuery library that I included in the header was one off Google's library, and also jQuery's official one: .min.js.
It has to be something with the encoding or something because the code works fine in my browser on JSFiddle also:
/
Here is the code I'm using personally:
<input id="dam" type="text" />
<div id="dam_return">
<a href="#">DLH Victoria</a>
<a href="#">DLH Sam</a>
<a href="#">Studly</a>
</div>
and the Javascript:
$('#dam_return a').click(function() {
var value = $(this).html();
var input = $('#dam');
input.val(value);
return false;
});
If anyone could help me out that would be awesome!
EDIT: I'm thinking my problem is because of a SQL query that happens everytime a key is pressed on the "dam" input.
Here is the EXACT SQL query that happens:
<div id="dam_return_search"><a href="#">Maybe this one works? (but no, it doesn't)</a><br />
<?php
$connect = // blahblahaa
if (isset($_GET['dam_text'])) {
getSuggest($text);
}
function getSuggest($text) {
$dam = $_GET['dam_text'];
$sqlCommand = "SELECT `name` FROM `alpacas1` WHERE `name` LIKE '%$dam%'";
$query = mysql_query($sqlCommand);
$result_count = mysql_num_rows($query);
while ($row = mysql_fetch_assoc($query)) {
echo '<a href=#>'.$row['name'].'</a><br />';
}
}
?>
</div>
Here is the DAM input box and code associated with it:
<script type="text/javascript">
function suggest1() {
var dam_text = document.getElementById('dam').value;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('MicrosoftXMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('dam_return').innerHTML = xmlhttp.responseText;
}
}
var target = 'dam_search.php?dam_text=' + dam_text;
xmlhttp.open('GET', target, true);
xmlhttp.send();
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#dam_return_search a").click(function(){
var value = $(this).html();
var input = $('#dam');
input.val(value);
});
});
</script>
<tr>
<td id="label">Dam:</td>
<td id="option">
<input type="text" name="dam" id="dam" value="<?php echo "$dam"; ?>" onkeyup="suggest1();"><br />
<div id="dam_return"></div>
</td>
</tr>
I have pretty much copied and pasted from this Stackoverflow question/answer, and it doesn't seem to want to work on my page. I also tried creating a blank PHP page to try it on, and it still doesn't work.
Also the jQuery library that I included in the header was one off Google's library, and also jQuery's official one: http://code.jquery./jquery-latest.min.js.
It has to be something with the encoding or something because the code works fine in my browser on JSFiddle also:
http://jsfiddle/kn3Qu/
Here is the code I'm using personally:
<input id="dam" type="text" />
<div id="dam_return">
<a href="#">DLH Victoria</a>
<a href="#">DLH Sam</a>
<a href="#">Studly</a>
</div>
and the Javascript:
$('#dam_return a').click(function() {
var value = $(this).html();
var input = $('#dam');
input.val(value);
return false;
});
If anyone could help me out that would be awesome!
EDIT: I'm thinking my problem is because of a SQL query that happens everytime a key is pressed on the "dam" input.
Here is the EXACT SQL query that happens:
<div id="dam_return_search"><a href="#">Maybe this one works? (but no, it doesn't)</a><br />
<?php
$connect = // blahblahaa
if (isset($_GET['dam_text'])) {
getSuggest($text);
}
function getSuggest($text) {
$dam = $_GET['dam_text'];
$sqlCommand = "SELECT `name` FROM `alpacas1` WHERE `name` LIKE '%$dam%'";
$query = mysql_query($sqlCommand);
$result_count = mysql_num_rows($query);
while ($row = mysql_fetch_assoc($query)) {
echo '<a href=#>'.$row['name'].'</a><br />';
}
}
?>
</div>
Here is the DAM input box and code associated with it:
<script type="text/javascript">
function suggest1() {
var dam_text = document.getElementById('dam').value;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('MicrosoftXMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('dam_return').innerHTML = xmlhttp.responseText;
}
}
var target = 'dam_search.php?dam_text=' + dam_text;
xmlhttp.open('GET', target, true);
xmlhttp.send();
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#dam_return_search a").click(function(){
var value = $(this).html();
var input = $('#dam');
input.val(value);
});
});
</script>
<tr>
<td id="label">Dam:</td>
<td id="option">
<input type="text" name="dam" id="dam" value="<?php echo "$dam"; ?>" onkeyup="suggest1();"><br />
<div id="dam_return"></div>
</td>
</tr>
- what doesn't work? it seems to be working – exexzian Commented Oct 13, 2013 at 6:49
- Make sure that you include only one jQuery import in your application – Alex Art. Commented Oct 13, 2013 at 6:54
- If you read it you'll see that it works on JSFiddle and everything, it doesn't work on my page. @Alex Well neither work standalone. – Chad Cardiff Commented Oct 13, 2013 at 7:02
- Your problem is not in the code you posted. Probably you have some errors that occur earlier in execution of your script. Check for errors and warnings in your browser. Also make sure that there is only one div with id = "dam_return", because it is a mon mistake to give the same id to multiple elements. – Alex Art. Commented Oct 13, 2013 at 7:13
3 Answers
Reset to default 2You need the DOM of the page to fully load before initiating a .click() event listener. You can do that using $(document).ready().
Here is a JSFiddle of it.
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#dam_return a").click(function(){
var value = $(this).html();
var input = $('#dam');
input.val(value);
});
});
</script>
<input id="dam" type="text" />
<div id="dam_return">
<a href="#" class="test">DLH Victoria</a>
<a href="#" class="test">DLH Sam</a>
<a href="#" class="test">Studly</a>
</div>
well i think that you should consider using this code, frankly i think that you should not be using the .html() jquery method to grab text, you should use the text() method, i tried this code offline and online, it works
and please use preventDefault() method to stop an event, rather than return false
$(document).ready(function () {
$('.tags_select a').click(function(evt) {
var value = $(this).text();
var input = $('#text_tag_input');
input.val(input.val() + value);
evt.preventDefault();
});
});
also you can read about the difference between return false and preventDefault() here
Instead of having Javascript in the initial file change the input box "dam" I changed it so that the dam_search.php file changed it "onclick".
Here is the code I had:
<div id="dam_return_search"><a href="#">Maybe this one works? (but no, it doesn't)</a><br />
<?php
$connect = // blahblahaa
if (isset($_GET['dam_text'])) {
getSuggest($text);
}
function getSuggest($text) {
$dam = $_GET['dam_text'];
$sqlCommand = "SELECT `name` FROM `alpacas1` WHERE `name` LIKE '%$dam%'";
$query = mysql_query($sqlCommand);
$result_count = mysql_num_rows($query);
while ($row = mysql_fetch_assoc($query)) {
echo '<a href=#>'.$row['name'].'</a><br />';
}
}
?>
</div>
Here is what I changed it to:
<?php
$connect = // blahblahaa
if (isset($_GET['dam_text'])) {
getSuggest($text);
}
function getSuggest($text) {
$dam = $_GET['dam_text'];
$sqlCommand = "SELECT `name` FROM `alpacas1` WHERE `name` LIKE '%$dam%'";
$query = mysql_query($sqlCommand);
$result_count = mysql_num_rows($query);
while ($row = mysql_fetch_assoc($query)) {
echo '<a href=# onclick="document.getElementById(\'dam\').value=\''.$row['name'].'\';">'.$row['name'].'</a><br />';
}
}
?>
</div>