Prezados,
Eu havia aberto o seguinte tópico sobre como fazer um ddl editável:
http://social.msdn.microsoft.com/Forums/pt-BR/7dd5dd56-dcb2-43ba-b36a-efda7e0590d9/textbox-com-dropdown-controle-nico-preenche-e-seleciona-automatico-como-combobox?forum=aspnetpt
Porém a orientação do fórum não funcionou para mim, então achei uma perfeita:
http://www.codeproject.com/Articles/290218/Custom-ASP-NET-Editable-DropDownList
Segui exatamente o exemplo e atende minhas necessidades, se o uso em um formulário à parte, porém quando tento usá-lo num formulário já pronto feito por outra pessoa, em que há outros jquerys e javascripts, há um conflito, e dependendo de como organizo as
bibliotecas ou o modal deixa de funcionar, ou reorganizando o ddl editável deixa de funcionar.
Achei um meio termo, em que organizei as bibliotecas da mais antiga à mais nova (ressalto que é necessário usar estas versões antiga e nova ao mesmo tempo), porém fui obrigado a retirar 3 bibliotecas que o link abaixo diz ser necessário:
http://www.codeproject.com/Articles/290218/Custom-ASP-NET-Editable-DropDownList
São elas:
<script src="js/jquery.ui.core.js" type="text/javascript"></script>
<script src="js/jquery.ui.widget.js" type="text/javascript"></script>
<script src="js/jquery.ui.button.js" type="text/javascript"></script>
Retirando-as, meu modal (que inclusive traz um mapa) e o ddl editável funcionam conjuntamente, porém a função importante de autocomplete do ddl editável para de funcionar, e preciso dela. Vou postar todo o código do aspx referente ao jquery e javascript,
no intuito de obter ajuda a resolver este conflito e conseguir habilitar o autocomplete.
Sobre o conflito de versões, tentei seguir as orientações destes links, porém sem sucesso:
http://www.buildando.com.br/2013/03/usando-duas-versoes-de-jquery-na-mesma.html
http://api.jquery.com/jQuery.noConflict/
Código:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="formTeste.aspx.cs" Inherits="controle_formTeste" %>
<%@ Register Assembly="EditableDropDownList" Namespace="EditableControls" TagPrefix="editable" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css">
#listHolder{;border:0; }
.list{font-family:verdana;font-size:10;color:#000000;}</style>
<title></title>
<link href="../css/ed/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/ed/jquery-1.6.4.min.js" type="text/javascript"></script>
<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/ed/jquery.ui.position.js" type="text/javascript"></script>
<script src="../Scripts/ed/jquery.ui.autocomplete.js" type="text/javascript"></script>
<script src="../Scripts/ed/jquery.ui.combobox.js" type="text/javascript"></script>
<script type="text/javascript">
$("[id*=DivJustifLink]").live("click", function () {
$("#modal_dialog").dialog({
width: 600,
height: 300,
title: "Justificativa",
open: function (type, data) {
$(this).parent().appendTo("form");
},
buttons: {
Fechar: function () {
$(this).dialog('close');
}
},
modal: true
});
return false;
});
</script>
<script type="text/javascript">
$("[id*=btnMapModal]").live("click", function () {
$("#modal_dialog2").dialog({
width: 700,
height: 700,
title: "Visualização de Mapa",
open: function (type, data) {
$(this).parent().appendTo("form");
},
buttons: {
Fechar: function () {
$(this).dialog('close');
}
},
modal: true
});
return false;
});
</script>
<script type="text/javascript">
//AutoCompletarBm
function checarListaProntoVtr(obj, evt, nStr) {
var k = (evt.which) ? evt.which : evt.keyCode;
var T = findPosY(obj); //top
var L = findPosX(obj); //left
var list = document.getElementById('listHolder');
if (!list) {
var list = document.createElement('DIV');
list.id = 'listHolder';
document.body.appendChild(list);
}
list.style.top = (T + obj.offsetHeight) + "px";
list.style.left = L + "px";
list.style.display = 'none';
var txt = obj.value;
if (txt) {
var str = '<select class="list"' +
'onclick="setOption(\'' + obj.id + '\',this.options[this.selectedIndex].value)"' +
'onkeyup="if(event.keyCode==13){setOption(\'' + obj.id + '\',' +
'this.options[this.selectedIndex].value)};if(event.keyCode==27){' +
'document.getElementById(\'listHolder\').style.display=\'none\';' +
'document.getElementById(\'' + obj.id + '\').focus()};" id="selector" size="2">'
var match = false
for (a = 0; a < nStr.length; a++) {
if (txt.toLowerCase() == nStr[a].toLowerCase().substring(0, txt.length)) {
match = true
str += ('<option value="' + nStr[a].replace(/\'/gi, '’') + '">' + nStr[a] + '</option>')
}
}
str += '</select>'
if (match) {
list.innerHTML = str
list.style.display = 'block'
var sel = document.getElementById('selector')
if (k == '40') {
sel.focus()
}
if (k == '13') {
document.getElementById('listHolder').style.display = 'none'
}
}
}
}
function setOption(obj, val) {
var obj = document.getElementById(obj)
obj.value = val;
obj.focus()
document.getElementById('listHolder').style.display = 'none'
}
function findPosX(obj) {
var curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
} else if (obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj) {
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop
obj = obj.offsetParent;
}
} else if (obj.y)
curtop += obj.y;
return curtop;
}
function formatar(src, mask) {
var i = src.value.length;
var saida = mask.substring(0, 1);
var texto = mask.substring(i)
if (texto.substring(0, 1) != saida) {
src.value += texto.substring(0, 1);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = [
<asp:Repeater ID="rptMarkers" runat="server">
<ItemTemplate>
{
"lat": '<%# Eval("Latitude").ToString() %>',
"lng": '<%# Eval("Longitude").ToString() %>',
}
</ItemTemplate>
<SeparatorTemplate>
,
</SeparatorTemplate>
</asp:Repeater>
];
</script>
<script type="text/javascript">
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
,
map: map,
title: data.title
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
<div id="divteste" runat="server"
style="border: 2px solid Black; height: 470px; width: 1091px; ;">
<asp:Label id="lblReste" runat="server"
style=" "
Text="Teste"></asp:Label>
<asp:DropDownList id="ddlTeste" runat="server"
style=" "
onselectedindexchanged="ddlTeste_SelectedIndexChanged"
AutoPostBack="True">
</asp:DropDownList>
<div id="divEdit"
style="width:511px; height:57px; ; border: 2px solid Black;">
<editable:EditableDropDownList ID="EditableDropDownList1" runat="server">
</editable:EditableDropDownList>
<editable:EditableDropDownList ID="EditableDropDownList3" runat="server">
</editable:EditableDropDownList>
</div>
...
...
Caso queiram reproduzir o formulário para testar, posto também o código para preencher o ddl editável:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// Standard DropDown datasource
List<ListItem> list = new List<ListItem>();
list.Add(new ListItem("Hello", "English"));
list.Add(new ListItem("Kumusta po kayo?", "Tagalog "));
list.Add(new ListItem("Privet!", "Russian"));
list.Add(new ListItem("Oi, boas, olá or alô", "Portuguese"));
list.Add(new ListItem("안녕하세요", "Korean"));
list.Add(new ListItem("Salut", "French"));
list.Add(new ListItem("Hallo", "German"));
list.Add(new ListItem("Aloha", "Hawaiian"));
list.Add(new ListItem("Xin chào", "Vietnamese"));
list.Add(new ListItem("Shalom", "Hebrew"));
list = list.OrderBy(a => a.Text).ToList();
EditableDropDownList1.DataSource = list;
EditableDropDownList1.DataTextField = "Text";
EditableDropDownList1.DataValueField = "Value";
EditableDropDownList1.DataBind();
// Custom Datasource
var type = typeof(System.Web.UI.Control);
var types = AppDomain.CurrentDomain.GetAssemblies().ToList()
.SelectMany(s => s.GetTypes())
.Where(p => type.IsAssignableFrom(p));
EditableDropDownList3.DataSource = types;
EditableDropDownList3.DataTextField = "Name";
EditableDropDownList3.DataValueField = "FullName";
EditableDropDownList3.AutoselectFirstItem = true;
EditableDropDownList3.DataBind();
}
Editable DropDownList conflito de Jquery`s atrapalha modal ou este editable ddl - tratar conflito jquery
