Search jQuery

jQuery Forum

Using jQuery UI

Jobz

Problem with Ajax and autocomplete

in Using jQuery UI • 6 months ago

Hi,

I have an issue with my autocomplete UI.

In my application, I have two text boxes and I want to select values using autocomplete. I want to display the autocomplete details based on the data selected on the previous value. and in that field also, I am using autocomplete.

In the first case, I am selecting all the possible groups from DB as JSON object and set it to request and get it from request on my JSP file.

There I am doing the following operations....

var availableGrps = $("#mainGrpList").val();

availableGrps = availableGrps.replace(/\047/gi, "\"");

availableGrps = availableGrps.replace(/\\/gi,"");

availableGrps = availableGrps.replace(/\'/g,"/\"");

var aGrps = JSON.parse(availableGrps);

mainGrpList is a hidden type in my JSP

Why I am doing like this is, I am not getting the full string from hidden variable. So, I converted the double cords to single and set it in the hidden variable and taking it in the JQuery.

Then I am replacing all the single cords to double and convert it to JSON array.

$("#grpCodeLbl").autocomplete({

source: aGrps,

select: function(event, ui) {

event.preventDefault();

var grpCd = ui.item.value;

$("#grpCodeLbl").val(ui.item.label);

$('#GroupCode').val(ui.item.value);

$("#mainDesigLabel").attr('disabled', false);

populateMainDesigs();

//return false;

change: function(event, ui){

$('#mainDesigLabel').val("");

$('#MainDesigCode').val("");

}

});

This is the method used to display autocomplete details on the first text box. In this, I wrote one custom method to take values from DB and set it as a string using AJAX to avoid DB fetching each time.

populateMainDesigs() is that method.

var retMainGrps;

function populateMainDesigs(){

$.ajax({

url: "empReqCreateNewReq.do",

data : { grpChange: true, GroupCode : $('#GroupCode').val(), ajaxCall : true },

dataType : 'json',

success: function(json) {

retMainGrps = json;

//retJson = JSON.parse(json)

alert("=== DATA ==== "+json);

//rePopulateDesigDropdown(json);

error : function(xhr, status) {

alert('Sorry, there was a problem while placing your ajax request. Contact Admin!');

}

});

}

I want the result of this method as the source of the next autocomplete text box.

$("#mainDesigLabel").autocomplete({

source: retMainGrps

});

While alerting, i am getting correct values but autocomplete function is not working for this text box.

It says "TypeError: this.source is not a function

Source"

Please help me to find a solution for this problem.

Replies(6)

mike_laird

Re: Problem with Ajax and autocomplete

6 months ago

If you turn retMainGrps into an array of strings ["string1", "string2", etc. ], your second Autocomplete will work.

Jobz

Re: Problem with Ajax and autocomplete

6 months ago

Hi,

I changed like this

var retMainGrps;

function populateMainDesigs(){

$.ajax({

url: "empReqCreateNewReq.do",

data : { grpChange: true, GroupCode : $('#GroupCode').val(), ajaxCall : true },

method : 'GET',

dataType : 'json',

contentType: "application/json; charset=utf-8",

success: function(json) {

retMainGrps = json;

retMainGrps = JSON.stringify(json);

retMainGrps = JSON.parse(retMainGrps);

//retJson = JSON.parse(json)

//alert("=== DATA ==== "+json);

//rePopulateDesigDropdown(json);

error : function(xhr, status) {

alert('Sorry, there was a problem while placing your ajax request. Contact Admin!');

}

});

}

Still I am getting the error

-------------------------------------------------------------------------------------------------------------------------------------------

Timestamp: 11/11/2012 03:30:01 PM

Error: TypeError: this.source is not a function

Source File: http://192.168.102.63:8989/hrweb/script/jquery-ui-1.8.7.custom.min.js

Line: 322

--------------------------------------------------------------------------------------------------------------------------------------------

Please help me to find a solutions for this.

Regards,

Joby Joseph

mike_laird

Re: Problem with Ajax and autocomplete

6 months ago

I am not familiar with, and haven't used JSON.parse() That said, documentation says that JSON.parse returns an object. The form of Autocomplete that you are using wants to see an array. Maybe you should use typeOf while debugging to see the type of item you have.

Hope that helps.

Jobz

Re: Problem with Ajax and autocomplete

6 months ago

Hi,

I have converted it like below

var retMainGrps = [];

var mainGrps = [];

function populateMainDesigs(){

$.ajax({

url: "empReqCreateNewReq.do",

data : { grpChange: true, GroupCode : $('#GroupCode').val(), ajaxCall : true },

method : 'GET',

dataType : 'json',

contentType: "application/json; charset=utf-8",

success: function(json) {

retMainGrps = json;

for (i in retMainGrps) {

for (k in retMainGrps[i]) {

mainGrps.push(retMainGrps[i][k]);

}

alert("== availableGrps 111 SOURCE === "+jQuery.type(mainGrps));

alert("== availableGrps 222 === "+JSON.stringify(mainGrps));

error : function(xhr, status) {

alert('Sorry, there was a problem while placing your ajax request. Contact Admin!');

}

});

}

When I alerted its type is object. So I converted like this. and assigned the value to autocomplete. Still it is not working..

mike_laird

Re: Problem with Ajax and autocomplete

6 months ago

After the conversion, what does typeOf tell you about the type of entity - is it still an object, or has it been changed to an array. The form of Autocomplete that you use requires an array as the source data.

Maybe this will help you make the conversion to an array.

http://stackoverflow.com/questions/4929924/how-to-sort-a-javascript-object-or-convert-it-to-an-array

Jobz

Re: Problem with Ajax and autocomplete

6 months ago

Hi,

After conversion, I am getting it as an Array. But the autocomplete is not working. I saw the array entries by alerting the value. It is same as the one I got for the first autocomplete option.

Top Reply

Response title

Attachments

jQuery Forum

Problem with Ajax and autocomplete

Replies(6)

Re: Problem with Ajax and autocomplete

Re: Problem with Ajax and autocomplete

Re: Problem with Ajax and autocomplete

Re: Problem with Ajax and autocomplete

Re: Problem with Ajax and autocomplete

Re: Problem with Ajax and autocomplete

Statistics

Tags

Actions

Related Posts