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
515 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
JQuery DataTable Time Sort 14 47
asp.net mvc5 6 34
Change background images after 5 seconds. 12 48
Issue in displaying table columns on selection of dropdown 2 27
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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)

710 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