The issue with this, is the onclick behavior that does not cause the result to be selected and subsequently fill in the "id" and "find" text fields.
Bellow the javascript part:
And this is the PHP page with the form:
Now the Database connections is a normal MySql connection and I'm using JQuery which is working fine and returns the records as expected.
as an example of the result:
If one types "a" it returns a list of "ID - FName" like: 1 - Antonio Bandeiras
The expected behavior is: When one clicks this result it should fill in the hidden "id" field with the number 1 and the "find" field with the string "Antonio Bandeiras" then close the Target div.
After all this my question is:
How can I accomplish the expected behavior?
AL Almeida
CIO
May all those that come behind us, find us faithful.
Bellow the javascript part:
Code:
// Ajax Functions
$('document').ready(function(){
$('#loading').hide();
$('#find').click(function(){
$('#find').val('');
});
$('#find').keyup(function(){
$('#loading').ajaxStart(function(){
$('#target').hide();
$('#loading').show();
});
$('#loading').ajaxStop(function(){
$('#loading').hide();
});
$.post('buscaAjaxJQueryTest.php',
{busca: $('#find').val()},
function(data){
if ($('#find').val()!=''){
$('#target').show();
$('#target').empty().html(data);
}
else{
$('#target').empty();
}
}
);
});
});
//Mouse over function
function suggestOver(div_value) {
div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
div_value.className = 'suggest_link';
}
//Click function
function usethis(toUse) {
var excerptB = value.substring(0, toUse.indexof("-") - 2);
var excerptA = value.substring(toUse.indexof("-") + 2, toUse.lengh);
document.getElementById('#find').Value = excerptA;
document.getElementById('#id').Value = excerptB;
document.getElementById('#target').innerHTML = '';
}And this is the PHP page with the form:
Code:
<?php
require_once'contomssql.php';
?>
<html>
<head>
<meta http-equiv="Content-Language" content="pt-br" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>LLContabil - Ajax with jQuery</title>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript" src="TestJQueryjs.js"></script>
<style type="text/css" media="screen">
body {
font: 11px arial;
}
.suggest_link {
background-color: #FFFFFF;
padding: 2px 6px 2px 6px;
}
.suggest_link_over {
background-color: #3366CC;
padding: 2px 6px 2px 6px;
}
find {
background-color: #FFFFFF;
text-align: left;
border: 1px solid #000000; }
</style>
</head>
<body>
<div id="main">
<div id="busca">
<form>
<fieldset>
<legend>Searching Using JQuery</legend>
<input name="id" id="id" type="hidden" value=""/>
<input name="find" id="find" type="text" value="Digite o Nome" size="50" />
<div id="loading" style="position:relative"><img src="BarraCarregando.gif"></div>
<div id="target"></div>
</fieldset>
</form>
</div> <!-- busca -->
</div> <!-- main -->
</body>
</html>Now the Database connections is a normal MySql connection and I'm using JQuery which is working fine and returns the records as expected.
Code:
<?php
# FileName="Connection_php_mysql.htm"
# Type="MYSQL"
# HTTP="true"
$hostname = "MyServer";
$database = "MyDB";
$username = "MyUser";
$password = "MyPsw";
$dbcon = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR);
?>
Code:
header("Content-Type: text/html; charset=ISO-8859-1",true);
require_once'contomssql.php';
if (isset($_POST['busca'])){
$queryString = $_POST['busca'];
$s = "SELECT client_id, client_name FROM tbl_client WHERE client_name LIKE '$queryString%' LIMIT 10";
mysql_select_db($database, $dbcon);
$s1 = mysql_query($s)or die(mysql_error());
while ($l = mysql_fetch_array($s1)){
echo '<div id="target" onmouseover="javascript:suggestOver(this);" onmouseout="javascript:suggestOut(this);" onclick="javascript:usethis(this.innerHTML);" class="suggest_link">';
echo $l['client_id']." - ".$l['client_name']."<br/>";
echo '</div>';
}
} else{
echo 'Erro no envio dos dados, tente novamente';
}as an example of the result:
If one types "a" it returns a list of "ID - FName" like: 1 - Antonio Bandeiras
The expected behavior is: When one clicks this result it should fill in the hidden "id" field with the number 1 and the "find" field with the string "Antonio Bandeiras" then close the Target div.
After all this my question is:
How can I accomplish the expected behavior?
AL Almeida
CIO
May all those that come behind us, find us faithful.