Question

i have an input that generates a positioned unordered list when someone enters a key into it, and it finds a match via the DB.

the problem is, its not populating the input field when clicking on a list item. its very simple and should be working.

heres my html:

<p style="position: relative;">
<input id="qbid" value="Enter Customer Name" size="40" />
<div id="qbid_res"></div>
</p>

heres my jquery:

$('#qbid_res ul li a').click(function(e) {
    e.preventDefault();
    $('#qbid').val($(this).html()); 
    $('#qbid_res').css('display', 'none'); 
}); 
$('#qbid').keyup(function() {
    $.ajax({
        type: "POST",
        url: "ajax-qbid.php",
        data: { name : $('#qbid').val() },
        dataType: "text",
        success: function(data){
            if (data.length > 0)
            {       
                $('#qbid_res').html(data); 
                $('#qbid_res').css('display', 'block');         
            }
        }
    });
});

heres my php/mysql in ajax-qbid.php:

<ul>

<?php

include 'connect.php';

$sql = mysql_query("select `name` from `customers` where `name` like '%".mysql_real_escape_string($_POST['name'])."%' order by `name` asc");

while ($row = mysql_fetch_assoc($sql))
    echo '<li><a href="#">'.$row['name'].'</a></li>';

?>

</ul>

before i introduced the ajax code, it was working fine. i mean it does show the list when i enter a value that will match in the DB, but like i said clicking on one of the names does not populate the input field.

Answer 1

You have to use jQuery live because the elements are not present before making a ajax call so click handlers will not be attached.

$('#qbid_res ul li a').live('click', function(e) {
    e.preventDefault();
    $('#qbid').val($(this).html()); 
    $('#qbid_res').css('display', 'none'); 
});