मोडल में रीलोडेड सामग्री (ट्विटर बूटस्ट्रैप)

Question

मैं ट्विटर बूटस्ट्रैप के मोडल पॉपअप का उपयोग कर रहा हूं।

<div id="myModal" class="modal hide fade in">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Header</h3>
    </div>
    <div class="modal-body"></div>
    <div class="modal-footer">
        <input type="submit" class="btn btn-success" value="Save"/>
    </div>
</div>

मैं इस a-element के साथ ajax का उपयोग करके सामग्री लोड कर सकता हूं:

<a data-toggle="modal" data-target="#myModal" href="edit.aspx">Open modal</a>

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

<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=1">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=2">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=3">Open modal</a>

अगर मैं लिंक नंबर 1 पर क्लिक करता हूं, तो यह ठीक काम करता है। लेकिन अगर मैं फिर लिंक नंबर 2 पर क्लिक करता हूं तो मोडल कंटेंट पहले से ही लोड हो जाता है और उसके बाद लिंक नंबर 1 से कंटेंट दिखाई देगा।

मैं ट्विटर बूटस्ट्रैप मोडल पॉपअप में अजाक्स लोड की गई सामग्री को कैसे ताज़ा या रीसेट कर सकता हूं?

Comments

ट्विटर बूटस्ट्रैप दूरस्थ मोडल

— मारीजन

एक ही मुद्दा था और एक ही समाधान के लिए इस्तेमाल किया। मैं कुछ अजीब कारण के लिए jquery से .attr () फ़ंक्शन का सहारा लेता हूं ।डेटा () फ़ंक्शन काम नहीं कर रहा था।

— user1803784

Answer 1

मुझे वही समस्या हो रही है, और मुझे लगता है कि ऐसा करने का तरीका डेटा-टॉगल विशेषता को निकालना होगा और लिंक के लिए एक कस्टम हैंडलर होगा।

की पंक्तियों में कुछ:

$("a[data-target=#myModal]").click(function(ev) {
    ev.preventDefault();
    var target = $(this).attr("href");

    // load the url and show modal on success
    $("#myModal .modal-body").load(target, function() { 
         $("#myModal").modal("show"); 
    });
});

बाद में कोशिश करेंगे और टिप्पणी पोस्ट करेंगे।

Comments

$ ('। मोडल')। ('छिपा हुआ', फंक्शन () {$ (यह) .removeData ();}) यह मेरे नीचे के समाधान का संशोधन है ... क्लीनर क्योंकि आपको क्लिक और लोड को पकड़ना नहीं है यह आपका स्वयं का प्रोग्राम प्रोग्राम मॉडल अभी भी काम करता है

— कार्टर कोल

मैं बूटस्ट्रैप 3 का उपयोग कर रहा हूं, मोडल की सामग्री हर बार ताज़ा हो जाती है लेकिन यह दो मोडल विंडो बनाती है। क्या किसी और को यह मिलता है?

— मिस्टर बी

अरे सिड, आपकी "क्लास-मोडल-बॉडी" के साथ 2 डिविजन बनाना, वास्तव में आप पहले से ही इसे बना रहे हैं, और मोडल फिर से बना रहे हैं। उस कोड से, '.modal-body' को हटा दें और ठीक काम करें।

— पलंतिर

मेरे लिए w / बूटस्ट्रैप 3, बहुत निराशाजनक है कि यह डिफ़ॉल्ट रूप से कोर बूटस्ट्रैप लाइब्रेरी द्वारा समर्थित नहीं है।

— जोश डाथल

@markz, मैं भी कुछ इस तरह का उपयोग कर रहा हूं और ev.preventDefault (); वैसे भी, लेकिन अभी भी लिंक पर क्लिक करने पर, जब मुझे मोडल विंडो मिलती है, तो मेरे पेज के सभी ड्रॉपडाउन को रीसेट किया जा रहा है। किसी भी विचार, कैसे को रोकने के लिए?

— जयकरत

Answer 2

मोडल बंद होने पर डेटा को उतारने के लिए आप इसे बूटस्ट्रैप 2.x के साथ प्रयोग कर सकते हैं:

$('#myModal').on('hidden', function() {
    $(this).removeData('modal');
});

और बूटस्ट्रैप 3 में ( https://github.com/twbs/bootstrap/pull/7935#issuecomment-18513516 ):

$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});

//Edit SL: more universal
$(document).on('hidden.bs.modal', function (e) {
    $(e.target).removeData('bs.modal');
});

Comments

उत्तम। बिना किसी समस्या के काम किया। बूटस्ट्रैप में 3. मैंने $ ('मोडल') का इस्तेमाल किया। ('हिडन.bs.modal', फंक्शन () {$ (यह) .removeData ('bmmodal');});

— थुपटेन

कोई परिपूर्ण नहीं: यह नई सामग्री से पहले पुरानी सामग्री को संक्षेप में दिखाता है।

— लॉरेंट

@ लॉरेंट, आप .html ('') को जोड़कर पिछली सामग्री को हटा सकते हैं। तो, 2.x: $ (यह) .removeData ('मोडल') के लिए। ढूँढें ('मोडल-बॉडी')। html ('')। 3 के लिए: $ (यह) .removeData ('bs.modal')। Html ('') 2.x .modal-body में सामग्री लोड करता है, जबकि 3 लोड सामग्री सीधे -modal कंटेनर में

— nabrowal

अंतिम टिप्पणी पर छोटा सुधार, बूटस्ट्रैप v3 में होना चाहिए: $ (e.target) .removeData ('bs.modal')। html (''); यह अब तक का सबसे सुरुचिपूर्ण समाधान है (लेकिन यह थोड़ा विलंब करता है)।

— Cesc

मैंने इस प्रस्तावित समाधान में @Softlion पोस्ट किए गए संपादन / संस्करण का उपयोग किया - यह काम किया और मुझे किसी भी गति / देरी के मुद्दों का अनुभव नहीं हुआ।

— user1801810

Answer 3

आप मोडल प्लग के छिपाने के तरीके के अंत में इस लाइन को जोड़कर पॉपअप को रीफ्रेश करने के लिए मोडल को बाध्य कर सकते हैं (यदि आप बूटस्ट्रैप-ट्रांज़िशन का उपयोग कर रहे हैं। v2.1.1, यह लाइन 836 पर होना चाहिए)

this.$element.removeData()

या एक इवेंट श्रोता के साथ

$('#modal').on('hidden', function() {
    $(this).data('modal').$element.removeData();
})

Comments

-1 - उस पहले स्निपेट को सीधे मोडल प्लगइन में डालने का विचार एक भयानक विचार है। यदि आप प्लगइन पर हैक करने जा रहे थे (जो मैं बचूंगा), तो करने के लिए अधिक उचित बात यह होगी कि या तो load()कंस्ट्रक्टर से कॉल को बाहर और अंदर ले जाएं show(), या प्लगइन का एक तरीका जोड़ें मैन्युअल रूप से पुनः लोड करने के लिए ट्रिगर करें remote। दूसरे सुझाव पर, मैंने केवल एक प्रश्न के उत्तर के रूप में प्रदान किया, जो स्पष्ट रूप से @markz द्वारा सुझाए गए तरीके से नहीं करने के लिए कहा था ।

— 17

मुझे श्रोता दृष्टिकोण पसंद है। मुझे लगता है कि आईडी को हार्डकोड करने से बचने के लिए '# मोडल' के बजाय '.मॉडल' का इस्तेमाल करके इसे और भी बेहतर बनाया जा सकता है। मेरी राय में यह मार्ज़स की तुलना में एक क्लीनर दृष्टिकोण है, क्योंकि आप मूल बूटस्ट्रैप मोडल में डेटा-टॉगल का उपयोग करते रहते हैं।

— टोनी ग्रिमल

मुझे आश्चर्य है कि इस उत्तर को अधिक उत्थान क्यों नहीं मिला। यह जवाब एक घटना श्रोता का सुझाव देने वाला पहला ऐसा लगता है जो कि काफी रोचक और लागू करने में तेज है।

— अनुपम

Answer 4

बूटस्ट्रैप 3 के साथ आप किसी भी मोडल से संबंधित डेटा को हटाने के लिए 'hidden.bs.modal' इवेंट हैंडलर का उपयोग कर सकते हैं, जिससे पॉपअप अगली बार फिर से लोड हो सके:

$('#modal').on('hidden.bs.modal', function() {
    $(this).removeData('bs.modal');
});

Comments

हां, लेकिन इस समाधान में अभी भी एक महत्वपूर्ण अंतराल है; यह अभी भी नए से पहले एक या तीन सेकंड के लिए पुरानी सामग्री दिखाता है।

— डॉक्टर अवकाश

# शरीर के बजाय शरीर की कोशिश करें

— wobsoriano

Answer 5

अन्य उत्तरों (सभी को धन्यवाद) के आधार पर।

मुझे काम करने के लिए कोड को समायोजित करने की आवश्यकता थी, बस कॉल करने के लिए। html ने पूरी सामग्री को मिटा दिया और मोडल किसी भी सामग्री के साथ लोड नहीं करेगा क्योंकि मैंने इसे किया था। इसलिए मैंने बस मोडल के कंटेंट एरिया की तलाश की और वहां HTML के रिसेटिंग को लागू किया।

    $(document).on('hidden.bs.modal', function (e) {
        var target = $(e.target);
        target.removeData('bs.modal')
              .find(".modal-content").html('');
    });

अभी भी स्वीकृत उत्तर के साथ जा सकते हैं क्योंकि मुझे मोडल लोड से ठीक पहले कुछ बदसूरत कूदना पड़ रहा है क्योंकि नियंत्रण बूटस्ट्रैप के साथ है।

Answer 6

उपरोक्त स्वीकृत उदाहरण की तुलना में थोड़ा अधिक संकुचित। डेटा के टारगेट से टारगेट को करेंट-टारगेट पर डेटा-टॉगल = मोडल के साथ कुछ भी क्लिक करें। इससे ऐसा होता है कि आपको यह जानने की ज़रूरत नहीं है कि लक्ष्य मॉडल की आईडी क्या है, बस उसी का पुन: उपयोग करें! कम कोड = जीत! आप इसे अपने मॉडेल के लिए शीर्षक, लेबल और बटन लोड करने के लिए भी संशोधित कर सकते हैं।

 $("[data-toggle=modal]").click(function(ev) {
    ev.preventDefault();
    // load the url and show modal on success
    $( $(this).attr('data-target') + " .modal-body").load($(this).attr("href"), function() { 
         $($(this).attr('data-target')).modal("show"); 
    });
});

उदाहरण लिंक:

<a data-toggle="modal" href="/page/api?package=herp" data-target="#modal">click me</a>
<a data-toggle="modal" href="/page/api?package=derp" data-target="#modal">click me2</a>
<a data-toggle="modal" href="/page/api?package=merp" data-target="#modal">click me3</a>

Answer 7

मैंने सॉफ्टलिऑन उत्तर में एक छोटा सा बदलाव किया है , इसलिए मेरे सभी मॉडल्स छिपाने पर ताज़ा नहीं होंगे। डेटा-रिफ्रेश = 'सही' विशेषता वाले मॉडल केवल ताज़ा होते हैं, अन्य हमेशा की तरह काम करते हैं। यहाँ संशोधित संस्करण है।

$(document).on('hidden.bs.modal', function (e) {
    if ($(e.target).attr('data-refresh') == 'true') {
        // Remove modal data
        $(e.target).removeData('bs.modal');
        // Empty the HTML of modal
        $(e.target).html('');
    }
});

अब नीचे दिखाए अनुसार विशेषता का उपयोग करें,

<div class="modal fade" data-refresh="true" id="#modal" tabindex="-1" role="dialog" aria-labelledby="#modal-label" aria-hidden="true"></div>

यह सुनिश्चित करेगा कि डेटा-रिफ्रेश = 'सही' वाले केवल मॉडल्स ही रिफ्रेश होंगे। और मैं भी मॉडेम html को रीसेट कर रहा हूं क्योंकि पुराने मान तब तक दिखाए जाते हैं जब तक कि नए लोड नहीं हो जाते, html खाली को ठीक करता है।

Answer 8

यहाँ एक कॉफ़ीस्क्रिप्ट संस्करण है जो मेरे लिए काम करता है।

$(document).on 'hidden.bs.modal', (e) ->
  target = $(e.target)
  target.removeData('bs.modal').find(".modal-content").html('')

Comments

इसने एक ऐसी समस्या को हल किया जहाँ सामग्री पुनः लोड होती है लेकिन मोडल के अंदर js दूसरी बार निष्पादित नहीं करता है

— Souhaieb

Answer 9

यह twitterbootstrap के सभी संस्करण के लिए काम करेगा

जावास्क्रिप्ट कोड:

<script type="text/javascript">
/* <![CDATA[ */
(function(){
   var bsModal = null;
   $("[data-toggle=modal]").click(function(e) {
      e.preventDefault();
      var trgId = $(this).attr('data-target'); 
      if ( bsModal == null ) 
       bsModal = $(trgId).modal;
      $.fn.bsModal = bsModal;
      $(trgId + " .modal-body").load($(this).attr("href"));
      $(trgId).bsModal('show');
    });
 })();
/* <![CDATA[ */
</script>

मोडल के लिंक हैं

<a data-toggle="modal" data-target="#myModal" href="edit1.aspx">Open modal 1</a>
<a data-toggle="modal" data-target="#myModal" href="edit2.aspx">Open modal 2</a>
<a data-toggle="modal" data-target="#myModal" href="edit3.aspx">Open modal 3</a>

मोडल को पॉप अप करें

<div id="myModal" class="modal hide fade in">
<div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Header</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
    <input type="submit" class="btn btn-success" value="Save"/>
</div>

Answer 10

मैं भी इस समस्या पर अटका हुआ था तो मैंने देखा कि मॉडल की आईडी एक ही है। यदि आपको एक से अधिक मोडल चाहिए तो आपको अलग-अलग आईडी की आवश्यकता है । मैंने डायनामिक आईडी का इस्तेमाल किया । यहाँ मेरा कोड है haml:

.modal.hide.fade{"id"=> discount.id,"aria-hidden" => "true", "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"}

तुम यह केर सकते हो

<div id="<%= some.id %>" class="modal hide fade in">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Header</h3>
  </div>
  <div class="modal-body"></div>
  <div class="modal-footer">
    <input type="submit" class="btn btn-success" value="Save" />
  </div>
</div>

और आपके मोडल के लिंक होंगे

<a data-toggle="modal" data-target="#" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>

मुझे उम्मीद है कि यह आपके लिए काम करेगा।

Answer 11

आप यह कोशिश कर सकते हैं:

$('#modal').on('hidden.bs.modal', function() {
    $(this).removeData('bs.modal');
});

Answer 12

मैं चाहता था कि मॉडल बंद होने पर AJAX लोड की गई सामग्री हटा दी जाए, इसलिए मैंने दूसरों द्वारा सुझाई गई रेखा (कॉफ़ीस्क्रिप्ट सिंटैक्स) को समायोजित कर लिया:

$('#my-modal').on 'hidden.bs.modal', (event) ->
  $(this).removeData('bs.modal').children().remove()

Answer 13

var $ तालिका = $ ('# myTable2');
$ table.bootstrapTable ( 'नष्ट');

मेरे लिए काम किया

Answer 14

चरण 1: नामक मोडल के लिए एक आवरण बनाएं clone-modal-wrapper।

चरण 2: नामक एक रिक्त div बनाएँ modal-wrapper।

चरण 3: से मोडल तत्व कॉपी clone-modal-wrapperकरने के लिए modal-wrapper।

चरण 4: के मोडल को टॉगल करें modal-wrapper।

<a data-toggle="modal" class='my-modal'>Open modal</a>

<div class="clone-modal-wrapper">
   <div class='my-modal' class="modal fade">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <a class="close" data-dismiss="modal">×</a>
               <h3>Header</h3>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
               <input type="submit" class="btn btn-success" value="Save"/>
            </div>
         </div>
      </div>
   </div>
</div>

<div class="modal-wrapper"></div>


$("a[data-target=#myModal]").click(function (e) {
    e.preventDefault();
    $(".modal-wrapper").html($(".clone-modal-wrapper").html());
    $('.modal-wrapper').find('.my-modal').modal('toggle');
});