Solved

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

Posted on 2014-03-19
14
485 Views
Last Modified: 2014-03-29
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
        });


    });
0
Comment
Question by:jazz__man
  • 7
  • 6
14 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39940455
please provide a link to see your page
0
 
LVL 2

Author Comment

by:jazz__man
ID: 39940479
Im on an intranet, sorry.
0
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39941730
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
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39941807
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
 
LVL 2

Author Comment

by:jazz__man
ID: 39941919
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
 
LVL 2

Author Comment

by:jazz__man
ID: 39941939
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
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39941961
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39941973
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
 
LVL 14

Accepted Solution

by:
Pierre Cornelius earned 500 total points
ID: 39941987
It might be worth putting alert(data.d) in your ajax success function to see and ensure the JSON returned is correct.
0
 
LVL 2

Author Comment

by:jazz__man
ID: 39942087
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
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39942227
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
 
LVL 2

Author Comment

by:jazz__man
ID: 39943106
yes, I had a breakpoint exactly before response but it never fired.
0
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39949720
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
 
LVL 2

Author Comment

by:jazz__man
ID: 39963786
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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now