Response title
This is preview!
Move this topic
Autocomplete combobox problem when it is placed inside a form tag
Analyzing
- Need more info
- Not a problem
- Temporary fix
- Analyzing
- Working on it
- Solved
in Developing jQuery UI
•
13 years ago
hi!
the combobox from the autocomplete ui have a problem when inside a form tag. When you click on the arrow to show the items, it submit the form. Probably the script crash somewhere.
If you remove the form, everything seems to be alright.
the combobox from the autocomplete ui have a problem when inside a form tag. When you click on the arrow to show the items, it submit the form. Probably the script crash somewhere.
If you remove the form, everything seems to be alright.
4
Replies(9)
Can you provide a test case in jsbin for us to look at?
Thanks
Thanks
Leave a comment on rwhitbeck's reply
i have attached a modified demo from jQueryUI 1.8rc3 demos
in the combobox.html file, you will have two combobox. The first one is inside a form tag and the other one is not. If you have the same problem as me, you will see that as soon as you open the first combobox, it will refresh the page but no the other one.
alex
in the combobox.html file, you will have two combobox. The first one is inside a form tag and the other one is not. If you have the same problem as me, you will see that as soon as you open the first combobox, it will refresh the page but no the other one.
alex
Attachments
Leave a comment on alex.jobin's reply
I changed 2 lines in the button's .click function to return false so the browser will not handle the click.
- .click(function() {
- // close if already visible
- if (input.autocomplete("widget").is(":visible")) {
- input.autocomplete("close");
- return false;
- }
- // pass empty string as value to search for, displaying all results
- input.autocomplete("search", "");
- input.focus();
- return false;
- });
Thanks, this did fix the problem in our case.
Leave a comment on ghettoduk's reply
I have also experienced this problem - and I think found a solution.
If I place the select_tag before the form_for then the combobox and button work fine. If I move the select_tag inside the form then the button stops working. It now directs to update or create in the controller.
I notice in the js for the combobox it inserts "<button> </button>" into the page. If I just add that simple button code inside the form_for it has the same effect of the button directing to the controller update/create actions.
So I changed the line: (around line 38 of honking great method from the source code from http://jqueryui.com/demos/autocomplete/#combobox)
Seems ok in Firefox and ie in windows, and Firefox in Ubuntu.
If I place the select_tag before the form_for then the combobox and button work fine. If I move the select_tag inside the form then the button stops working. It now directs to update or create in the controller.
I notice in the js for the combobox it inserts "<button> </button>" into the page. If I just add that simple button code inside the form_for it has the same effect of the button directing to the controller update/create actions.
So I changed the line: (around line 38 of honking great method from the source code from http://jqueryui.com/demos/autocomplete/#combobox)
$("<button> </button>")
$("<div type='button'> </div>")
Seems ok in Firefox and ie in windows, and Firefox in Ubuntu.
thanks, this solved my issue!
this solved my self-submit form issue, but when I click on the vscrol to scrol down it closes the items:(
Leave a comment on sujimichi's reply
I ran into this as well. My solution:
"<button type=button> </button>"
This changes the button from a submit to just a button.
"<button type=button> </button>"
This changes the button from a submit to just a button.
Hi scottsilvi,
I tried your solution (<button type=button>), and it worked like a charm, thanks.
By the way, it's worth pointing out that we have the code running in our dev environment without this change and it runs without issue. However, the issue became apparent after deploying to a customer's server suggesting that the way that the server provides the content may have something to do with the problem, at least it does from our perspective.
Thanks for your comment, I for one really appreciate it.
Kaine
I tried your solution (<button type=button>), and it worked like a charm, thanks.
By the way, it's worth pointing out that we have the code running in our dev environment without this change and it runs without issue. However, the issue became apparent after deploying to a customer's server suggesting that the way that the server provides the content may have something to do with the problem, at least it does from our perspective.
Thanks for your comment, I for one really appreciate it.
Kaine
Leave a comment on scottsilvi's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to alex.jobin's problem
Statistics
- 9 Replies
- 74807 Views
- 4 Followers