none
Editable DropDownList conflito de Jquery`s atrapalha modal ou este editable ddl - tratar conflito jquery RRS feed

  • Pergunta

  • 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, '&#8217;') + '">' + 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();
            }


    • Editado Angelo.Net segunda-feira, 25 de novembro de 2013 20:34
    segunda-feira, 25 de novembro de 2013 20:28

Todas as Respostas

  • Você mudar o comportamento padrão de DropDownList que é  o principal problema do seu sistema!

    Desculpa mas, a gente no máximo muda um CSS e utiliza ele normalmente!!!

    #Fail ... 


    Fulvio Cezar Canducci Dias

    terça-feira, 26 de novembro de 2013 11:50
  • Prezado Fulvio,

    Me desculpe, mas não entendi sua mensagem.

    Pessoal, sobre os conflitos desses jquery, qual a melhor maneira de tratá-los e como posso acrescentar as 3 bibliotecas que faltam?

    Desde já obrigado.

    quinta-feira, 28 de novembro de 2013 21:22
  • Prezados colegas,

    No forum msdn em inglês comecei a receber algumas sugestões boas:

    http://forums.asp.net/p/1953370/5569600.aspx?Editable+DropDownList+s+conflict+of+jQuery+modal+or+disrupts+this+ddl+editable+treat+jquery+conflict

    Porém, ainda com a ajuda no fórum acima, o recurso de autocompletar deste ddl editável não funciona, no fim me sugeriu a usar o combobox, que tentei e é um recurso horrível, em que o seletor do ddl fica numa parte da tela, e o campo propriamente em outro, e é feio.

    Recebi uma sugestão de usar o bootstrap, o que significaria mudar todos estes controles, não existe uma forma de evitar este conflito, de forma que eu possa adicionar os .js:

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

    Sem que ocorro conflito com o modal?

    desde já obrigado

    segunda-feira, 13 de janeiro de 2014 19:42