CODEWITHSUNDEEP
jqueryajaxautocomplete
John Chu
John Chu

Reputation: 33

jquery autocomplete no work if generate from ajax

Autocomplete it's working perfectly, as expected if using a normal statics html/php page.

But I'm working on a module that loads dynamically (AJAX) generate same HTML as above into a area. I cannot get the autocomplete to work.

Any idea of how can I solve this? I've searched everywhere and tried everything, but obviously not the right solution yet.

//
// this is the ajax code load dynamic contents in a #display_area
// from onclick=selected_purchase()
//

    function selected_purchase() {
      var fields = $(":input").serialize();
        $.ajax({ 
        url: "purchase4",
        type: "POST",
        dataType: "html",
        data: fields ,
        beforesend: function(a) {
            // before send process here
            showBusy();
        },
        success: function(html) {
            // success process here ...
            processForm(html);

        }   
    });

      }


//
// this is the autocomplete code  
//

$( "#supplier" ).autocomplete({ //the recipient text field with id #supplier
        source: function( request, response ) {
            $.ajax({
                url: "search_supplier",
                dataType: "json",
                data: request,
                success: function(data){
                    if(data.response == 'true') {
                       response(data.message);
                    }
                }
            });
        },
        minLength: 2,
        select: function( event, ui ) {
            // Do something extra on select...
                // add user id to hidden input    

            $('input[name="name"]').val(ui.item.value);
            $('input[name="sl"]').val(ui.item.sl_id);
            return false;
        },

    });

Upvotes: 3

Views: 1918

Answers (2)

Didier Ghys
Didier Ghys

Reputation: 30666

You probably have to initialize the plugin instance after the content has been loaded.

$("#container").load('some url', function() {
    $(this).find('#autocomplete').autocomplete();
});

This code might differ a bit depending on the method you use for loading the content ($.ajax, .load()...). The common thing is to initialize your plugin in the callback executed after the asynchronous request has finished, usually called the "success" callback.

Now we have your code samples, here's what you should do:

function selected_purchase() {
    var fields = $(":input").serialize();
    $.ajax({
        ...
        success: function(html) {
            // success process here ...
            processForm(html);

            // assuming "processForm" append the "html" to the DOM
            // you can now call autocomplete
            $( "#supplier" ).autocomplete({
                ...
            });
        }
    });
}​

Upvotes: 2

Michael Laffargue
Michael Laffargue

Reputation: 10294

Your Php script (I guess) is sending JSon ? That's the usual problem, your outstream should look like 

['toto','titi','tata']

You could use echo json_encode($myArrayWithStringValues) for the same result.

Upvotes: 0

Related Questions