मैं एक बूटस्ट्रैप मोडल div का पुन: उपयोग कैसे कर सकता हूं?

Question

मैं बूटस्ट्रैप के मोडल प्लगइन के माध्यम से एक मोडल div का पुन: उपयोग एक पृष्ठ पर अलग अलग लिंक की एक संख्या है करने में सक्षम होना चाहते हैं:

<h3>This button shows a modal (<code>#utility</code>) with text "Phasellus <em>tincidunt gravida</em>..."</h3> 
<br /> 
<a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/6K8rD/show/" data-target="#utility" class="btn">Modal 1</a><br /> 
<h3>This button should invoke the same modal (<code>#utility</code>), but fill it with text "Phasellus <em>egestas est eu</em>..."</h3> 
<br /> 
<a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/AWSnt/show/" data-target="#utility" class="btn">Modal 2</a><br /> 

<!-- Modal --> 
<div id="utility" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
    <h3 id="myModalLabel">Click outside modal to close it</h3> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…this is getting replaced with content that comes from passed-in href</p> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary">Save changes</button> 
    </div> 
</div> 

मैं उम्मीद थी कि या तो लिंक पर क्लिक करने (जो बटन के रूप में स्टाइल रहे हैं) मोडल का आह्वान करेगा और क्लिक किए गए बटन के अनुरूप पृष्ठ (href का मान) के साथ मोडल लोड करेगा। इसके बजाए, मोडल हमेशा उस लिंक की सामग्री से लोड होता है जिसे आप पहले क्लिक करते हैं; मोडल सामग्री के साथ "रीफ्रेश" नहीं करता है जिसे "अन्य" लिंक के href द्वारा निर्धारित किया जाना चाहिए।

मुझे लगता है कि यह बूटस्ट्रैप बग है, लेकिन अगर मैं इसे गलत तरीके से उपयोग कर रहा हूं तो मैं यहां सवाल पूछ रहा हूं।

कृपया प्रदर्शन के लिए http://jsfiddle.net/jhfrench/qv5u5/ देखें।

Answer 1

आगे के शोध के बाद, मुझे इस व्यवहार का उल्लेख करने वाले कुछ बूटस्ट्रैप मुद्दे here और here का उल्लेख किया गया। मैंने फिर से खोलने के लिए issue 5514 के लिए कहा है।

इस बीच, इस jQuery समस्या * सुलझाना होगा:।

$('a[data-toggle="modal"]').on('click', function(){ 
    // update modal header with contents of button that invoked the modal 
    $('#myModalLabel').html($(this).html()); 
    //fixes a bootstrap bug that prevents a modal from being reused 
    $('#utility_body').load(
     $(this).attr('href'), 
     function(response, status, xhr) { 
      if (status === 'error') { 
       //console.log('got here'); 
       $('#utility_body').html('<h2>Oh boy</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>'); 
      } 
      return this; 
     } 
    ); 
});​ 

कृपया एक काम उदाहरण के लिए http://jsfiddle.net/jhfrench/qv5u5/51/ देख *

* किसी कारण के लिए इस, कभी कभी आप बटन बेला में क्लिक करते हैं मोडल खाली दिखाएगा। यह उस एप्लिकेशन में कोई समस्या नहीं है जिसके साथ मैं काम कर रहा हूं, इसलिए मुझे संदेह है कि यह इस प्रश्न/उत्तर से संबंधित कोई समस्या है।

Answer 2

इसके बजाय मोडल के HTML मार्कअप लिखने और जावास्क्रिप्ट के माध्यम से यह हेरफेर करने के लिए होने के, मैं बूटस्ट्रैप-संवाद का प्रयोग करेंगे कम करने के लिए सब कुछ:

$('.modal-btn').click(function(event){ 
    var $link = $(this); 
    new BootstrapDialog({ 
     title : 'Load content of : ' + $link.attr('href'), 
     content : $('<div>Loading...</div>').load($link.attr('href')), 
     buttons : [{ 
      label : 'Close', 
      onclick : function(dialog){ 
       dialog.close(); 
      } 
     }, { 
      label : 'Save changes', 
      cssClass: 'btn-primary', 
      onclick : function(dialog){ 
       alert('The content of the dialog is: ' + dialog.getBody().html()); 
       dialog.close(); 
      } 
     }] 
    }).open(); 

    event.preventDefault(); 
}); 

यहाँ एक लाइव डेमो के लिए देखें, यह दो यूआरएल आपके द्वारा दी गई लोड करता है अपने उदाहरण में: http://nakupanda.github.io/bootstrap-dialog/