Form submission and jQuery autocomplete

Hi Experts,

I have created a jQuery autocomplete for certain page and it worked fine if I reach the page from a link in previous page.
However, if I reach the page with autocomplete text field from form submit, the autocomplete doesn't work.

I will show example in the following:

This is autocomplete part:
<script type="text/javascript">
	
	$(document).ready(function() {
    $(function() {        	
    	
        $("#diagtags").autocomplete({
        	minLength: 3, //at leat 3 char required        	
            source: function (request, response) {
                $.getJSON("AutoCompleteController", {
                    term: request.term
                }, response);
            }          
        });              
    });
	});
</script>
...
...
...
 <input type="text" name="test" id="diagtags" >

Open in new window


=========================
If I go the automplete page from this link, it works ok.
<a href="/xxx/abcEdit.do?method=edit">Add New</a>

===================================
however, if I reach the autocomplete page from form submission, the autocomplete text field doesn't display anything when I type in something(more than 3 characters.)
<form name="AbcForm" method="post" action="/xxx/xxx/cde.do" >  
	<input type="submit" name="method" value="Add">			
</form>

Open in new window



What is that and what is the solution for this?

Thanks in advance
dkim18Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

sammySeltzerCommented:
Just out of curiosity, can rename method to something else?

Method could be a reserved word.

So perhaps something like:

   
  <input type="submit" name="someName" value="Add"> 

Open in new window

 

Also, even though this works according to you:

<a href="/xxx/abcEdit.do?method=edit">Add New</a>

Open in new window

, I will replace method with mode.

Mode = edit or add or delete, etc
0
dkim18Author Commented:
This is Struts framework (J2ee) and there is a reason that name is method; otherwise, I get a java.lang.NoSuchMethodException error.
0
Julian HansenCommented:
Just a note
	$(document).ready(function() {
    $(function() {       

Open in new window

Is unnecessary you can simply do this
$(function() {
    // your code here
});

Open in new window

Do you get any errors in your console (or any output in the console) when you arrive at the page with a form submit?

Is your form submit using AJAX ? If so then it might be a case of static binding causing your problem.

If element diagtags is being created dynamically you will have to bind the autocomplete handler to the element after the content has been loaded.

First step though is to look at your console output for errors.

Posting a link would also help ...
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

dkim18Author Commented:
Do you get any errors in your console (or any output in the console) when you arrive at the page with a form submit?
--> No, I don't get any error in my console.

Is your form submit using AJAX ? If so then it might be a case of static binding causing your problem.
--> No. It is simple Struts actionform submit.

If element diagtags is being created dynamically you will have to bind the autocomplete handler to the element after the content has been loaded.
-->No, element diagtags is hardcoded.

First step though is to look at your console output for errors.

Posting a link would also help ...
--> Sorry, this is an intranet site.
0
Julian HansenCommented:
Then what is different between accessing the site by URL and posting to the page?

Something must be different?

If you view your page source are you seeing the javascript to bind your element to the autocomplete?
Are you seeing your javascript libraries and can you click through to those.
0
dkim18Author Commented:
I checked page source and they are the same. I see the javascript to bind the element and all the javascript libraries.
0
Julian HansenCommented:
I checked page source and they are the same.
Then if they are the same the code will work.
Without having access to the page to see what is going on we have to use your eyes to diagnose.

From what you are telling us the pages are identical and there are no errors.

That is insufficient information to be able to make a diagnosis. Is it not possible to post the generated HTML from the two situations?
0
dkim18Author Commented:
I found there are differences:

this is from not working page:
<input aria-haspopup="true" aria-autocomplete="list" role="textbox" autocomplete="off" class="ui-autocomplete-input ui-autocomplete-loading" name="diagnosisDescription" maxlength="100" size="100" value="Search for diagnosis term or number..." onclick="value=''; style.color='#000000';" style="width: 630px; height: 18px; color: rgb(0, 0, 0);" id="diagtags" title="Text will be deleted when clicking in field" type="text">

this is from working page:
<input aria-haspopup="true" aria-autocomplete="list" role="textbox" autocomplete="off" class="ui-autocomplete-input" name="diagnosisDescription" maxlength="100" size="100" value="Search for diagnosis term or number..." onclick="value=''; style.color='#000000';" style="width: 630px; height: 18px; color: rgb(0, 0, 0);" id="diagtags" title="Text will be deleted when clicking in field" type="text">
0
Julian HansenCommented:
The only difference between those two is that the first has an extra class
ui-autocomplete-loading

Why is that?
0
dkim18Author Commented:
I think I found the issue. Actually the two URL wasn't the same. Struts action mapping always keeps the first url no matter what. I will probably ask another question more specific to this. Thanks anyway!
0
Julian HansenCommented:
You are welcome - good luck with it.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

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.