php - Jquery .autocomplete not working after ajax call

956

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" >
<input type="hidden" id="val1" >

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.

806

Answer

Solution:

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

You have loaded somecourse 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))
        }
    });
}
95

Answer

Solution:

Change

$(document).ready(function()

to

$(document).ajaxComplete(function()

and bingo :)

People are also looking for solutions to the problem: php - How to set public variable dynamically when a class instance is created

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.