Conflict Jquery ModalxAutocomplete editable DDL
Dear,I researched how to make an editable ddl on the link:
www.codeproject.com/Articles/290218/Custom-ASP-NET-Editable-DropDownList
I follow exactly the example and meets my needs, but appears conflict when I try to use it in a form that already have several jquery modal `s that I call in my form.
For my modal function takes the following libraries (I'm naming each listing .js)
(1a listing of.js):
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.7.1.min.js.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.position.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.autocomplete.js" type="text/javascript"></script>
<script src="Scripts//jquery.ui.combobox.js" type="text/javascript"></script>
But in this way, my editable DDL works just like a normal dropdown, and I need of his function with autocomplete textbox.
And I know exactly how to activate it, is as follows (I have to remove the "jquery-ui-1.9.2.custom.min.js" and add the: Ui.core.js, ui.widget.js and ui. button.js) thereby all:
(2a listing of.js):
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.7.1.min.js.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.core.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.widget.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.button.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.position.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.autocomplete.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.combobox.js" type="text/javascript"></script>
And then my editable DDL functions normally as I want as textbox with autocomplete. BUT my modal stop to working here, then it is assumed that it is the lack of "jquery-ui-1.9.2.custom.min.js"-but when simply add it in the list above:
(3a listing of.js):
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.7.1.min.js.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.core.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.widget.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.button.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.position.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.autocomplete.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.combobox.js" type="text/javascript"></script>
but when simply add "jquery-ui-1.9.2.custom.min.js" in the list above:
both, the autocomplete and the modal stop working, so to make my modal back to work I have to leave as the first(1a) listing .js, or if I want to leave editable autocompletion DDL running and working, I have to leave as the second(2a) listing. Have sought help in many places, no one even helped me troubleshoot this problem, some suggest using bootstrap ...
but do not want to have to redo at least not for now, I like to learn from mistakes. I want to understand why this conflict occurs.
Code, if they want to test there (with .js of the second(2a) listing.) As it does not fit here, posted on googledocs:
https://docs.google.com/document/d/1BIorLTl7GfGCJAPlhXMjwPjBiUSEZ7Gl_o2ezbwSakk/
Thanks in advanced!