Diálogo JQuery - NO APERTURA Segunda vez

Question

Hay varias publicaciones en StackOverflow sobre el tema, pero ninguna de las respuestas me ha ayudado. Estoy usando el control DataList que se rellena con SELECT a través de un DataAdapter. Un concepto se recomienda que sólo una instancia del cuadro de diálogo debe estar abierto, pero no pudo aplicar este método

La estructura del HTML es:

<asp:DataList ID="DataList" runat="server"> 
     <ItemStyle /> 
     <ItemTemplate> 
      <a href="" class="link"/></a> 
      <div class = "dialog" id="dynamicID" style="display:none"> 
      </ div> 
     </ ItemTemplate> 
    </ asp: DataList> 

El código jQuery que estoy usando es:

<script language="javascript" type="text/javascript"> 
    $ (function() { 
     $ (". link. ") click (function() { 
      var id = '#' + ($ (this). siblings ('. dialog'). attr ('id')); 
      $ (id). dialog ({ 
       AutoOpen: false, 
       closeOnEscape: true, 
       resizable: false, 
       draggable: false, 
       modal: true, 
       width: 800, 
       height: 600, 
       overlay: {backgroundColor: "# 000", opacity: 0.5}, 
       top: 20, 
       show: 'fade', 
       hide: 'fade', 
       buttons: { 
        "Close": function() { 
         $ (id). dialog ('close'); 
        } 
       } 
      }); 
      $ (id). dialog ('open'); 
     }); 
    }); 
</ script> 

Answer 1

imaginar esto HTML

<asp:DataList ID="dataList" runat="server"> 
    <ItemTemplate> 
     <div class="row"> 
      <p> 
       Result: <strong> 
        <%# Container.DataItem.ToString() %></strong></p> 
      <a href="#" class="link" data-open="dialog_<%# Container.ItemIndex %>" />Click 
      To Open</a> 
      <div class="dialog" id="dialog_<%# Container.ItemIndex %>"> 
       <h2> 
        This is the text inside the dialog # 
        <%# Container.ItemIndex %>.</h2> 
       <p> 
        &nbsp; 
       </p> 
      </div> 
     </div> 
    </ItemTemplate> 
</asp:DataList> 

con este Javascript

$(function() { 

    // create dialogs 
    $(".dialog").dialog({ 
     autoOpen: false, 
     closeOnEscape: true, 
     buttons: { 
      "Close": function() { 
       $(id).dialog('close'); 
      } 
     } 
    }); 

    // hook up the click event 
    $(".link").bind("click", function() { 
     // console.log($(this).parent()); 
     // open the dialog 
     var dialogId = $(this).attr("data-open"); 
     $("#" + dialogId).dialog("open"); 

     return false; 
    }); 

}); 

obras preciosa.

Ejemplo de trabajocan be found here

Qué hay de malo con su enfoque?

usted está creando el diálogo dentro de un método, y esto debe crearse dentro del $(document).ready() por lo que, cada vez que hace clic, crea un diálogo, pero ... ya existe y lo estropea todo.

Cuando se trabaja con cuadros de diálogo:

• En primer lugar se crea utilizando .dialog()
• Sólo tiene que utilizar .dialog('open') para hacer que el diálogo visibles
• Y el uso de .dialog('close') para ocultar ese diálogo

de forma predeterminada jQuery UI CSS colgará los cuadros de diálogo automáticamente (display:none;) por lo que no necesita hacer nada ing como eso.

Answer 2

Cuando aparece el cuadro de diálogo, se cae del flujo de marcado. Entonces cuando llamas al var id = '#' + ($ (this).siblings('.dialog').attr('id')); no obtienes nada. Puede agregar la identificación del diálogo a la matriz la primera vez que se abre y luego, si el resultado $(this).siblings ('.dialog') está vacío, puede obtener el ID del elemento de diálogo de la matriz.

<script type="text/javascript"> 
     var registeredDialogs = []; 

     function registerDialog(link, dialogDiv) { 
      var linkId = $(link).attr("id"); 
      if (!registeredDialogs[linkId]) 
       registeredDialogs[linkId] = dialogDiv; 
     } 

     function getDialog(link) { 
      var linkId = $(link).attr("id"); 
      return this.registeredDialogs[linkId]; 
     } 

     $(function() { 
      $(".link").click(function() { 

       var dialogDiv = $(this).siblings('.dialog'); 
       if (dialogDiv.length !== 0) { 
        registerDialog(link, dialogDiv); 
       } 
       else { 
        dialogDiv = this.getDialog(link); 
       } 

       dialogDiv.dialog({ 
        AutoOpen: false, 
        closeOnEscape: true, 
        resizable: false, 
        draggable: false, 
        modal: true, 
        width: 800, 
        height: 600, 
        overlay: { backgroundColor: "# 000", opacity: 0.5 }, 
        top: 20, 
        show: 'fade', 
        hide: 'fade', 
        buttons: { 
         "Close": function() { 
          $(id).dialog('close'); 
         } 
        } 
       }); 
       $(id).dialog('open'); 
      }); 
     }); 
    </script> 

Answer 3

Por lo general, la destrucción del diálogo al cerrar solucionará el problema.

$("#dialogbox").dialog({ 
    close: function (event, ui) { 
     $(this).dialog("destroy"); 
    } 
});