CODEWITHSUNDEEP
phpjquery
user1714133
user1714133

Reputation: 79

Jquery .autocomplete not working after ajax call

Hi guys i am trying to write a title matcher, i got it working but when an ajax call is made it no longer works below is my code :

 <script type="text/javascript" src="jquery.autocomplete.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

   $(document).ready(function() 
            {
                $(".course").autocomplete("look_me_up.php", 
                    {
                        width: 260,
                        matchContains: true,
                        mustMatch: true,
                        selectFirst: false
                    });

                $(".course").result(function(event, data, formatted)
                    {
                          $(this).next(".course_val").val(data[1]);
                    });
            });

The text box i want to update is called from a ajax request which is made first :

<input type="text" name="course" id="text1" value="Find Title In DB" class="course">
<input type="hidden" id="val1" class="course_val">

And the ajax request is :

function checks()
            {

            $.ajax({
                type : "POST",
                url : "get_data.php",
                data : "function="+"get_text",
                success : function(msg) 
                    {
                       $(update_me).html(msg);
                    }
                });
            }

I assume the jquery is acting up because the its trying to update a value pulled from the ajax request? I am struggling to get it to work so any help would be appreciated.

Upvotes: 0

Views: 3309

Answers (2)

MRRaja
MRRaja

Reputation: 1161

Change

$(document).ready(function()

to

$(document).ajaxComplete(function()

and bingo :)

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

It looks to be a problem with the dynamic element creation.

You have loaded some course elements and autocomplete was initialized on them, later you seems to be replacing those elements with new elements. Here you are not initializing autocomplete for the new elements.

The solution is to initialize the autocomplete for the dynamically added elements

function createCourse(els){
    els.autocomplete("look_me_up.php", {
        width: 260,
        matchContains: true,
        mustMatch: true,
        selectFirst: false
    });

    els.result(function(event, data, formatted){
        $(this).next(".course_val").val(data[1]);
    });
}

$(document).ready(function() {
    createCourse($(".course"))
});

function checks() {
    $.ajax({
        type : "POST",
        url : "get_data.php",
        data : "function="+"get_text",
        success : function(msg)  {
            $(update_me).html(msg);
            createCourse($(".course", update_me))
        }
    });
}

Upvotes: 1

Related Questions