Can someone have a look at my jquery UI autocomplete code and tell me why its only working on 1 textbox?

I have the following code that uses jquery ui autocomplete, the problem is I am having difficulty setting up a second autocomplete on the same page. Can someone have a look at the code and let me know whats wrong? The top one runs ok.


$(document).ready(function() {

        var AccommObject = $("[id$='_txtAccommodation_txtStandard']")[0];
        var Accommid = AccommObject.id;
        var AccommidFull = "#" + Accommid;


        var AccommObject2 = $("[id$='_txtInvoiceNo_txtStandard']")[0];
        var Accommid2 = AccommObject2.id;
        var AccommidFull2 = "#" + Accommid2;



        $(AccommidFull).autocomplete({
            source: function(request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "RequisitionSearch.aspx/FetchAccommodationNameList",
                    data: '{"AccommodationName":"' + request.term + '"}',
                    dataType: "json",
                    success: function(data) {
                        response(
                        $.map(data.d, function(item) {
                            return {
                                id: item.ID,
                                label: item.Label,
                                value: item.Value,
                                ImageURL: item.ImageURL
                            };
                        })
                        );
                    },
                    error: function(result) { debugger; }
                });
            },
            minLength: 2
        });



        $(AccommidFull2).autocomplete({
            source: function(request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "RequisitionSearch.aspx/FetchAccommodationInvoiceNoList",
                    data: '{"InvoiceNo":"' + request.term + '"}',
                    dataType: "json",
                    success: function(data) {
                        response(
                        $.map(data.d, function(item) {
                            return {
                                id: item.ID,
                                label: item.Label,
                                value: item.Value,
                                ImageURL: item.ImageURL
                            };
                        })
                        );
                    },
                    error: function(result) { debugger; }
                });
            },
            minLength: 2
        });


    });
LVL 2
jazz__manAsked:
Who is Participating?
 
Pierre CorneliusConnect With a Mentor Commented:
It might be worth putting alert(data.d) in your ajax success function to see and ensure the JSON returned is correct.
0
 
leakim971PluritechnicianCommented:
please provide a link to see your page
0
 
jazz__manAuthor Commented:
Im on an intranet, sorry.
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
Pierre CorneliusCommented:
At first glance, your code seems ok so I'm wondering if the problem could be malformed or unexpected JSON response.

Please provide the output (or sample) generated by the following:
RequisitionSearch.aspx/FetchAccommodationNameList
RequisitionSearch.aspx/FetchAccommodationInvoiceNoList
0
 
Pierre CorneliusCommented:
You did not post your html so I can't check but another thing to look for is to ensure you have an input element with id="_txtInvoiceNo_txtStandard" (remember: case sensitive)
0
 
jazz__manAuthor Commented:
Hi guys and thanks for the response. What I did was I wired up the Autocomplete that works to the 2nd method and it worked so I am confident the Json data is correct.

Sorry for not posting html I'm not at work today but I will post it tomorrow. For info though, the textboxes are exactly the same except with different id. I placed a debugger  keyword just after the finding of the full ids of the textboxes and all seems to be well here. There is an issue I believe with calling multiple instances of autocomplete, but I am not entirely sure what the work around is.

Thanks for your help and patience.
0
 
jazz__manAuthor Commented:
Oh btw if you are wondering about the weird way of getting textboxes it's because these are textboxes within user controls which provides additional functionality. But just to be clear I have two instances of the same textbox user control, the first one works, the second one dosent.
0
 
Pierre CorneliusCommented:
That is strange indeed. I just tested with my own JSON data and it works for both autocompletes. I will post the code I used to test shortly...
0
 
Pierre CorneliusCommented:
Here it is:
Note the 2 text files attached for the JSON data should be in the same folder as the htm to work.

In the first text box type "LA" and the list of labels will appear
In the second text box type "IN" and the list of invoices will appear

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
	
	<script type="text/javascript">
	$(document).ready(function() {

			var AccommObject = $("[id$='_txtAccommodation_txtStandard']")[0];
			var Accommid = AccommObject.id;
			var AccommidFull = "#" + Accommid;


			var AccommObject2 = $("[id$='_txtInvoiceNo_txtStandard']")[0];
			var Accommid2 = AccommObject2.id;
			var AccommidFull2 = "#" + Accommid2;			    



			$(AccommidFull).autocomplete({
				source: function(request, response) {
					$.ajax({
						type: "POST",
						contentType: "application/json; charset=utf-8",
						//url: "RequisitionSearch.aspx/FetchAccommodationNameList",
						url: "FetchAccommodationNameList.txt",
						data: '{"AccommodationName":"' + request.term + '"}',
						dataType: "json",
						success: function(data) {
							response(
							$.map(data.d, function(item) {
								return {
									id: item.ID,
									label: item.Label,
									value: item.Value,
									ImageURL: item.ImageURL
								};
							})
							);
						},
						error: function(result) { debugger; }
					});
				},
				minLength: 2
			});



			$(AccommidFull2).autocomplete({
				source: function(request, response) {
					$.ajax({
						type: "POST",
						contentType: "application/json; charset=utf-8",
						//url: "RequisitionSearch.aspx/FetchAccommodationInvoiceNoList",
						url: "FetchAccommodationInvoiceNoList.txt",
						data: '{"InvoiceNo":"' + request.term + '"}',
						dataType: "json",
						success: function(data) {
							response(
							$.map(data.d, function(item) {
								return {
									id: item.ID,
									label: item.Label,
									value: item.Value,
									ImageURL: item.ImageURL
								};
							})
							);
						},
						error: function(result) { debugger; }
					});
				},
				minLength: 2
			});


		}); 
	</script>
</head>
<body>
	<form>
		<input type="text" id="_txtAccommodation_txtStandard">
		<input type="text" id="_txtInvoiceNo_txtStandard">		
	</form>
</body>
</html>

Open in new window

FetchAccommodationNameList.txt
FetchAccommodationInvoiceNoList.txt
auto-complete.html
0
 
jazz__manAuthor Commented:
The thing is though, its not even firing the method in order to return json data, I think the error is specifically related to how autocomplete is wiring up the events to the textbox. When I step through the jquery I can see that both autocompletes are executed without any error messages but for some reason the second one is not wiring up the event that fires the webmethod.
0
 
Pierre CorneliusCommented:
are you using firebug to debug?

so your $.ajax success function is never called? Did you put a breakpoint at the line "response(" ? Does it get called?
0
 
jazz__manAuthor Commented:
yes, I had a breakpoint exactly before response but it never fired.
0
 
Pierre CorneliusCommented:
sorry for late response, been away for long weekend.

You say you put the breakpoint before, it should not be before, it should be on the line.

Another thing, check your firebug console tab to see if there are any errors there after initiating autocomplete. Also look at the Net tab to see if the ajax is being fired and what response it gives.
0
 
jazz__manAuthor Commented:
Solved this, it was caused be another user control having the same design time ID, when run the two of these controls were being retrieved. So instead of doing $("[id$='_txtInvoiceNo_txtStandard']")[0]; I had to do this $("[id$='_txtInvoiceNo_txtStandard']")[1]; Rrrrrrrrrrrrr!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.