ट्विटर बूटस्ट्रैप रिमोट मोडल हर बार एक ही सामग्री दिखाता है

Question

मैं ट्विटर बूटस्ट्रैप का उपयोग कर रहा हूं, मैंने एक मोडल निर्दिष्ट किया है

<div class="modal hide" id="modal-item">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h3>Update Item</h3>
    </div>

    <form action="http://www.website.com/update" method="POST" class="form-horizontal">

    <div class="modal-body">
        Loading content...
    </div>

    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <button class="btn btn-primary" type="submit">Update Item</button>
    </div>

    </form>

</div>

और लिंक

<a href="http://www.website.com/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a>
<a href="http://www.website.com/item/2" data-target="#modal-item" data-toggle="modal">Edit 2</a>
<a href="http://www.website.com/item/3" data-target="#modal-item" data-toggle="modal">Edit 2</a>

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

मैं चाहता हूं कि इसे हर बार अपडेट किया जाए।

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

Comments

वही फिक्स, लेकिन बूटस्ट्रैप 3 के लिए संशोधित। बूटस्ट्रैप 3 नेमस्पेस का परिचय देता है। plnkr.co/edit/HWSgSw?p=preview

— Jeff H

ध्यान दें कि remoteमोडल बूटस्ट्रैप v3.2.1 के रूप में चित्रित किए गए हैं और v4 में चले जाएंगे।

— cvrebert

Answer 1

समस्या दो गुना है।

सबसे पहले , एक बार जब एक मोडल ऑब्जेक्ट को त्वरित किया जाता है, तो यह लगातार उस तत्व द्वारा निर्दिष्ट data-targetऔर बाद के कॉल से जुड़ा होता है ताकि यह दिखाया जा सके कि मोडल केवल उस toggle()पर कॉल करेगा, लेकिन इसमें मूल्यों को अपडेट नहीं करेगा options। इसलिए, भले ही hrefआपके अलग-अलग लिंक पर विशेषताएँ भिन्न हों, जब मोडल को टॉगल किया जाता है, तो इसके लिए मान remoteअपडेट नहीं हो रहा है। अधिकांश विकल्पों के लिए, कोई भी वस्तु को सीधे संपादित करके इसे प्राप्त कर सकता है। उदाहरण के लिए:

$('#myModal').data('bs.modal').options.remote = "http://website.com/item/7";

हालांकि, इस मामले में काम नहीं करेगा, क्योंकि ...

दूसरा , मोडल प्लगइन को मोडल ऑब्जेक्ट के कंस्ट्रक्टर में दूरस्थ संसाधन को लोड करने के लिए डिज़ाइन किया गया है , जिसका दुर्भाग्य से मतलब है कि भले ही इसमें कोई बदलाव किया जाए options.remote, फिर भी इसे कभी भी लोड नहीं किया जाएगा ।

एक सरल उपाय टॉगल के पहले मोडल ऑब्जेक्ट को नष्ट करना है। एक विकल्प सिर्फ इसे छिपाने के बाद इसे खत्म करना है:

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

_{नोट: चयनकर्ताओं को आवश्यकतानुसार समायोजित करें। यह सबसे सामान्य है।}

Plunker

या आप एक और अधिक जटिल योजना के साथ आने की कोशिश कर सकते हैं जैसे कि जांच करें कि क्या मोडल लॉन्च करने वाला लिंक पिछले एक से अलग है। अगर यह है, नष्ट कर; यदि यह नहीं है, तो फिर से लोड करने की कोई आवश्यकता नहीं है।

Comments

@VladimirStarkov के बारे में क्षमा करें - ऐसा लगता है कि मैं hideमॉडल पर कक्षा को भूल गया था , इसलिए यदि आपकी खिड़की बहुत छोटी थी, तो मोडल बटन पर माउस की घटनाओं को रोक रहा होगा। किसी कारण से JSField.net आज सुबह वास्तव में खराब है (जिसे अपडेट करने की कोशिश में एक 504 मिला है), इसलिए मैंने सिर्फ plnkr.co पर उदाहरण दिया, जो वैसे भी AJAX के लिए बेहतर है।

— मर्व

एक अन्य मुद्दा है: .modal-body में अभी भी पाठ होगा, इसलिए मैंने जोड़ा: <CODE> $ ('# myModal .modal-body')। पाठ ("लोड हो रहा है ...") </ CODE> छिपे हुए श्रोता में

— rbp

bs.modalमें $(this).removeData('bs.modal')साथ बूटस्ट्रैप 3 मेरे लिए काम किया

— jvannistelrooy

Boostrap 3 के लिए पूर्ण कार्य कोड है$('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); });

— Christophe Fondacci

मैं यह भी जाँचता हूँ कि क्या छुपाया जा रहा मोडल दूरस्थ स्रोत से लोड किया गया है, ताकि स्थिर सामग्री के साथ मोडल न var modalData = $(this).data('bs.modal'); if (modalData && modalData.options.remote)...

— टूटें

Answer 2

बूटस्ट्रैप 3 के लिए आपको उपयोग करना चाहिए:

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

Comments

मेरे हीरो। इन अनिर्दिष्ट परिवर्तनों से प्यार करें।

— जोरीन

इससे काफी मदद मिली। बूटस्ट्रैप 3 पिछड़े संगत नहीं है और एसओ (या अन्य मंचों) पर अधिकांश सामग्री बीएस <3 के बारे में है, उन समाधानों की कोशिश करने से वास्तव में बहुत समय बर्बाद होता है।

— स्वप्निल

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

— लॉरेंट

यदि आप उपरोक्त उदाहरण का उपयोग करके मोडल को खाली करना चाहते हैं, तो आपको remoteDataपंक्ति के पहले या बाद में निम्नलिखित जोड़ने में सक्षम होना चाहिए :$(this).empty()

— jgillman

आपको उपयोग नहीं करना चाहिए $(this).empty()। remoteविकल्प नेस्टेड में भार दूरस्थ डेटा <div class="modal-content">तत्व। $('.modal-content', this).empty();इसके बजाय उपयोग करें ।

— गैविन

Answer 3

बूटस्ट्रैप 3.1 के लिए आप modal-contentदूरस्थ सामग्री को लोड करने के लिए प्रतीक्षा करते समय झिलमिलाहट से बचने के लिए डेटा निकालना चाहेंगे और संपूर्ण संवाद (3.0) को खाली करना चाहते हैं ।

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

यदि आप गैर-दूरस्थ मोडल का उपयोग कर रहे हैं, तो उपरोक्त कोड, निश्चित रूप से बंद (खराब) एक बार उनकी सामग्री को हटा देगा। आपको उन मॉडल्स (जैसे एक .local-modalवर्ग) में कुछ जोड़ने की आवश्यकता हो सकती है ताकि वे प्रभावित न हों। फिर उपरोक्त कोड को संशोधित करें:

$(document).on("hidden.bs.modal", ".modal:not(.local-modal)", function (e) {
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
});

Comments

दूरस्थ पृष्ठों पर सुनिश्चित करें कि आप बूटस्ट्रैप, या जक्वरी लाइब्रेरी लोड नहीं कर रहे हैं। यह किसी भी संदर्भ को मार देगा और आपको एक खाली मोडल के साथ छोड़ देगा।

— बैंकजिला

यह मेरे लिए काम नहीं कर रहा था। यहां मेरा कोड है जो काम कर रहा है: $ (दस्तावेज़) .on ("हिडन.bs.modal", ".modal", फ़ंक्शन (e) {if ($! (E.target) .is (")। स्थानीय-मोड। ")) {$ (e.target) .removeData (" bs.modal ")। ढूंढना (" (मोडल-सामग्री ")) खाली ();}}};

— केविन

जब मैं इसका उपयोग $(e.target).removeData("bs.modal").find(".modal-content").empty();करता हूं तो यह मेरे मोडल की तरह किसी तरह छिप जाता है और केवल ग्रे ओवरले दिखाई देता है।

— Axel

Answer 4

धन्यवाद merv मैंने बूस्टैप.जेएस के आसपास छेड़छाड़ शुरू कर दी, लेकिन आपका जवाब एक त्वरित और स्वच्छ समाधान है। यहां मैंने अपने कोड का उपयोग करके समाप्त किया।

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

Answer 5

स्वीकृत उत्तर मेरे काम नहीं आया, इसलिए मैं इसे करने के लिए जावास्क्रिप्ट के साथ गया।

<a href="/foo" class="modal-link">
<a href="/bar" class="modal-link">

<script>
$(function() {
    $(".modal-link").click(function(event) {
        event.preventDefault()
        $('#myModal').removeData("modal")
        $('#myModal').modal({remote: $(this).attr("href")})
    })
})

Answer 6

यह बूटस्ट्रैप 3 FYI के साथ काम करता है

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

Answer 7

मेरा प्रोजेक्ट Yii में बनाया गया है और बूटस्ट्रैप-Yii प्लगइन का उपयोग करता है, इसलिए यह उत्तर केवल प्रासंगिक है यदि आप Yii का उपयोग कर रहे हैं।

उपरोक्त फिक्स ने काम किया लेकिन पहली बार मोडल दिखाए जाने के बाद ही। पहली बार यह खाली आया। मुझे लगता है कि ऐसा इसलिए है क्योंकि कोड की मेरी दीक्षा के बाद Yii ने मोडल के छिपाने के कार्य को कॉल किया जिससे मेरे दीक्षा चर को हटा दिया गया।

मैंने पाया कि मोडल लॉन्च करने वाले कोड से तुरंत पहले रिमडाटा कॉल डालकर ट्रिक को अंजाम दिया। तो मेरा कोड इस तरह संरचित है ...

$ ("#myModal").removeData ('modal');
$ ('#myModal').modal ({remote : 'path_to_remote'});

Answer 8

बूटस्ट्रैप 3.2.0 में "ऑन" इवेंट को डॉक्यूमेंट पर होना है और आपको मोडल खाली करना है:

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

बूटस्ट्रैप 3.1.0 में "ऑन" इवेंट शरीर पर हो सकता है:

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

Comments

3.2 समाधान एकमात्र ऐसी चीज थी जो बूटस्ट्रैप 3.1 में मेरे लिए ठीक से काम करती थी - शरीर के दृष्टिकोण का उपयोग करते हुए, मोडल पर मेरी कुछ घटनाएं अनहुक हो गईं।

— स्टुअर्टक्यू

Answer 9

बीएस 3 के साथ इसे अधिक सामान्य क्यों नहीं बनाया जाए? बस "[कुछ] मोडल" का उपयोग मोडल डीआईवी की आईडी के रूप में करें।

$("div[id$='modal']").on('hidden.bs.modal',
    function () {
        $(this).removeData('bs.modal');
    }
);

Answer 10

मेरे लिए केवल काम करने का विकल्प है:

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

मैं बूटस्ट्रैप 3 का उपयोग करता हूं और मेरे पास एक फ़ंक्शन है जिसे popup('popup content') मोडल बॉक्स html कहा जाता है ।

Comments

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

— dbinott

Answer 11

एक $ (यह) .html ('') जोड़ना; दृश्यमान डेटा को भी साफ़ करने के लिए, और यह बहुत अच्छा काम करता है

Answer 12

यदि एक दूरस्थ URL प्रदान किया जाता है, तो सामग्री को jQuery की लोड विधि के माध्यम से एक बार लोड किया जाएगा और .modal-content div में इंजेक्ट किया जाएगा। यदि आप डेटा-एपीआई का उपयोग कर रहे हैं, तो आप दूरस्थ स्रोत को निर्दिष्ट करने के लिए वैकल्पिक रूप से href विशेषता का उपयोग कर सकते हैं। इसका एक उदाहरण नीचे दिखाया गया है

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

Answer 13

मैंने कुछ इस तरह से जोड़ा है, क्योंकि पुरानी सामग्री को तब तक दिखाया जाता है जब तक कि नया दिखाई नहीं देता है, .modal-content के अंदर .html ('') HTML के अंदर साफ हो जाएगा, आशा है कि यह मदद करता है।

$('#myModal').on('hidden.bs.modal', function () {
   $('#myModal').removeData('bs.modal');
   $('#myModal').find('.modal-content').html('');
});

Comments

यह अब तक का सबसे सरल काम है जो मैंने पाया है। उत्तर के बारे में कुछ भी जटिल नहीं है, कोड की कुछ लाइनें और व्याख्या करना आसान है। इसके साथ खिलवाड़ करते हुए पहली बार पूरी तरह से काम किया।

— तारकिन जूल

Answer 14

मैंने एक साधारण स्निपेट लिखा, जिसमें मोडल को ताज़ा किया गया था। मूल रूप से यह मोडल डेटा में क्लिक की गई लिंक को संग्रहीत करता है और जाँचता है कि क्या यह वही लिंक है जिसे क्लिक किया गया है, मोडल डेटा को हटा या नहीं।

var handleModal = function()
{
    $('.triggeringLink').click(function(event) {
        var $logsModal = $('#logsModal');
        var $triggeringLink = $logsModal.data('triggeringLink');

        event.preventDefault();

        if ($logsModal.data('modal') != undefined
            && $triggeringLink != undefined
            && !$triggeringLink.is($(this))
        ) {
            $logsModal.removeData('modal');
        }

        $logsModal.data('triggeringLink', $(this));

        $logsModal.modal({ remote: $(this).attr('href') });
        $logsModal.modal('show');
    });
};

Answer 15

बूटस्ट्रैप 3 के लिए, modal.js में मैंने बदला:

$(document)
  .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
  .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open'); })

सेवा

$(document)
  .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
  .on('hidden.bs.modal', '.modal', function () { 
    $(this).removeData('bs.modal').empty()
    $(document.body).removeClass('modal-open')
  })

(स्पष्टता के लिए अतिरिक्त रिक्ति जोड़ा गया)

यह मोडल कंटेनर पर खाली () कॉल करने के साथ-साथ डेटा को हटाने के द्वारा पुरानी मोडल सामग्री के किसी भी अवांछित फ्लैश को रोकता है।

Answer 16

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

यह मेरे लिए काम करता है।

Answer 17

यह अन्य दृष्टिकोण मेरे लिए अच्छा काम करता है:

$("#myModal").on("show.bs.modal", function(e) {
    var link = $(e.relatedTarget);
    $(this).find(".modal-body").load(link.attr("href"));
});

Answer 18

$('body').on('hidden.bs.modal', '.modal', function () {
       $("#mention Id here what you showed inside modal body").empty()
});

आप किस html तत्व को खाली करना चाहते हैं (div, जो भी हो)।

Answer 19

यह एक मेरे लिए काम करता है:

मोडल

<div class="modal fade" id="searchKaryawan" tabindex="-1" role="dialog" aria-labelledby="SearchKaryawanLabel" aria-hidden="true"> <div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="SearchKaryawanLabel">Cari Karyawan</h4>
  </div>
  <div class="modal-body">
    <input type="hidden" name="location">
    <input name="cariNama" type="text" class="form-control" onkeyup="if (this.value.length > 3) cariNikNama();" />
    <div class="links-area" id="links-area"></div>
  </div>
  <div class="modal-footer">
  </div>
</div> </div></div>

लिपि

<script type="text/javascript">$('body').on('hidden.bs.modal', '.modal', function () {  $(".links-area").empty() }); </script>

लिंक-क्षेत्र वह क्षेत्र है जहां मैंने डेटा डाला और साफ़ करने की आवश्यकता है

Answer 20

@Merv द्वारा स्वीकृत उत्तर का विस्तारित संस्करण। यह भी जांचता है कि क्या छुपाया जा रहा मोडल दूरस्थ स्रोत से लोड किया गया है और इसे चमकने से रोकने के लिए पुरानी सामग्री को साफ़ करता है।

$(document).on('hidden.bs.modal', '.modal', function () {
  var modalData = $(this).data('bs.modal');

  // Destroy modal if has remote source – don't want to destroy modals with static content.
  if (modalData && modalData.options.remote) {
    // Destroy component. Next time new component is created and loads fresh content
    $(this).removeData('bs.modal');
    // Also clear loaded content, otherwise it would flash before new one is loaded.
    $(this).find(".modal-content").empty();
  }
});

https://gist.github.com/WojtekKruszewski/ae86d7fb59879715ae1e6dd623f743c5

Answer 21

बूटस्ट्रैप संस्करण 3.3.2 पर परीक्षण किया गया

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

Comments

यह एक भयानक समाधान है। .removeData()किसी भी पैरामीटर के साथ कॉल करने पर jquery को उस तत्व से जुड़े सभी डेटा को हटाने के लिए कहा जाएगा। जहां तक ​​ओपी की समस्या का संबंध है, .removeData('bs.modal')या .removeData('modal')पर्याप्त होगा और बहुत सुरक्षित है।

— जूलियन पाओलो डेयाग

Answer 22

इस से गुड लक:

$('#myModal').on('hidden.bs.modal', function () {
    location.reload();
});

Comments

यह बेकार है। पृष्ठ को फिर से लोड करना समाधान नहीं है।

— dbinott