JQuery संवाद - दूसरा समय नहीं खोल रहा

Question

इस विषय पर स्टैक ओवरव्लो पर कई पोस्ट हैं लेकिन किसी भी उत्तर ने मेरी मदद नहीं की। मैं डेटालिस्ट नियंत्रण का उपयोग कर रहा हूं जो डेटा एडाप्टर के माध्यम से एक चयन द्वारा पॉप्युलेट किया गया है। एक अवधारणा की सिफारिश की है कि संवाद उसमें केवल एक ही खुला होना चाहिए, लेकिन इस पद्धति लागू नहीं कर सका

एचटीएमएल की संरचना है:

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

jQuery कोड मैं का उपयोग कर रहा है:

<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

इस जावास्क्रिप्ट

$(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; 
    }); 

}); 

सुंदर काम करता है के साथ इस एचटीएमएल

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

कल्पना कीजिए।

कार्य उदाहरणcan be found here

क्या गलत अपने दृष्टिकोण के साथ है?

आप एक विधि के अंदर संवाद बना रहे हैं, और इसे $(document).ready() के अंदर बनाया जाना चाहिए, इसलिए हर बार जब आप क्लिक करते हैं, तो यह एक संवाद बनाता है, लेकिन ... यह पहले से मौजूद है और सब कुछ खराब कर देता है।

जब संवाद के साथ काम:

• सबसे पहले आप उन्हें प्रयोग बनाने .dialog()
• तुम बस को छिपाने के लिए .dialog('open') का उपयोग करें कि संवाद दिखाई
• बनाने के लिए और .dialog('close') उपयोग करने की आवश्यकता है कि संवाद

डिफ़ॉल्ट रूप से

jQuery यूआई सीएसएस स्वचालित रूप से संवाद को हाइव करेगा (display:none;) तो आपको कोई भी करने की आवश्यकता नहीं है उस तरह आईएनजी।

Answer 2

जब संवाद प्रदर्शित होता है तो यह मार्कअप प्रवाह से बाहर निकलता है। तो जब आप var id = '#' + ($ (this).siblings('.dialog').attr('id')); पर कॉल करते हैं तो आपको कुछ भी नहीं मिलता है। आप डायलॉग आईडी को पहली बार खोलने के लिए सरणी में जोड़ सकते हैं और फिर $(this).siblings ('.dialog') परिणाम खाली है तो आपको सरणी से संवाद तत्व आईडी मिल सकती है।

<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

आमतौर पर निकटतम संवाद को नष्ट करने से समस्या ठीक हो जाएगी।

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