Jquery ui with Jeditable

Question

I am trying this code:

<script type="text/javascript">
$(document).ready(function() {
    $('.edit').editable('http://www.example.com/save.php', {
        indicator : 'Saving...',
        tooltip   : 'Click to edit...',
        submit    : 'OK',
        cancel : 'Cancel',
    });

    $('#cv_cd > input').autocomplete({
        source: 'location.php',
        minLength: 2

    });
});
</script>


<div class="edit" id="cv_cd">Type</div>

This code works properly with <inputs />, but with jeditable, no request is sent off when i type something.

After search the code with firebug, jeditable also creates an input field, however apparently something like this didn't works $('#cv_cd > input').autocomplete({

Any idea ? thanks

Answer 1

.autocomplete() is not live, so it only binds to elements that exist at the time of the call.

In your case, you'll want to use live or, preferably, delegate to accommodate the fact the input element will not exist until the user clicks on it. Knowing that the elements with autocomplete have ui-autocomplete-input class, you can do something like the following, in replace of the original .autocomplete():

$("#cv_cd").delegate(".ui-autocomplete-input", "focus", function (event) {
    $(this).autocomplete({
        source: 'location.php',
        minLength: 2
    });
});