টুইটার বুটস্ট্র্যাপ দূরবর্তী মডেল প্রতিবার একই সামগ্রী দেখায়

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>

আমি যখন প্রথমবারের মতো এই লিঙ্কটিতে ক্লিক করি তখন আমি সঠিক লিখিত সামগ্রীটি দেখি, কিন্তু যখন আমি অন্যান্য লিঙ্কগুলিতে ক্লিক করি তখন এটি প্রথমবারের মতো একই সামগ্রীতে লোড হওয়া দেখায়, এটি সামগ্রী আপডেট করে না।

আমি চাইছি প্রতিবার ক্লিক হওয়ার সাথে সাথে এটি আপডেট করা হোক।

PS: আমি সহজেই এটি কাস্টম jQuery ফাংশনটির মাধ্যমে কাজ করতে পারি, তবে আমি জানতে চাই যে এটি স্থানীয় বুটস্ট্র্যাপ মডেল রিমোট ফাংশনের মাধ্যমে সম্ভব কিনা, কারণ এটি যথেষ্ট সহজ হওয়া উচিত এবং আমি অনুমান করি যে আমি কেবল জটিল বিষয়গুলি করছি।

Comments

একই ফিক্স, তবে বুটস্ট্র্যাপ 3-র জন্য সংশোধিত বুটস্ট্র্যাপ 3 নাম-স্থানের পরিচয় দেয়। plnkr.co/edit/HWSgSw?p= পূর্বরূপ

— জেফ এইচ

নোট করুন যে remoteমডেলগুলি বুটস্ট্র্যাপ v3.2.1 হিসাবে অবহিত এবং v4 এ চলে যাবে।

— সিভেরবার্ট

Answer 1

সমস্যা দ্বিগুণ।

প্রথমত , একবার কোনও মডেল অবজেক্ট তাত্ক্ষণিকভাবে চালিত হলে, এটি দৃ by়তার সাথে নির্দিষ্ট উপাদানগুলির সাথে সংযুক্ত থাকে data-targetএবং পরবর্তী কলগুলি দেখায় যে মোডাল কেবল toggle()এটির উপর কল করবে, কিন্তু মানগুলিতে আপডেট করবে না options। সুতরাং, যদিও hrefআপনার বিভিন্ন লিঙ্কগুলিতে বৈশিষ্ট্যগুলি পৃথক রয়েছে, যখন মডেলটি টগল করা হয় তখন এর মানটি remoteআপডেট হচ্ছে না। বেশিরভাগ বিকল্পের জন্য, কেউ সরাসরি অবজেক্টটি সম্পাদনা করে এটি ঘিরে ফেলতে পারে। এই ক্ষেত্রে:

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

তবে, এটি এই ক্ষেত্রে কাজ করবে না, কারণ ...

দ্বিতীয়ত , মোডাল প্লাগইন দূরবর্তী রিসোর্স লোড করতে ডিজাইন করা হয়েছে কন্সট্রাকটর মধ্যে মোডাল বস্তু, যার দূর্ভাগ্যবশত এটির অর্থ হল এমনকি যদি পরিবর্তনের তৈরি করা হয়েছে options.remote, এটা পুনরায় লোড করা হবে না ।

একটি সহজ প্রতিকার পরবর্তী টোগলগুলির আগে মডেল অবজেক্টটি ধ্বংস করা destroy একটি বিকল্প হ'ল লুকানো শেষ হওয়ার পরে এটি ধ্বংস করা:

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

_{দ্রষ্টব্য: নির্বাচকদের প্রয়োজনমতো সামঞ্জস্য করুন। এটি সবচেয়ে সাধারণ।}

Plunker

অথবা আপনি আরও জটিল স্কিম নিয়ে আসার চেষ্টা করতে পারেন এমন কিছু করার জন্য যা মোডেলটি চালু করার লিঙ্কটি আগেরটির থেকে আলাদা কিনা তা পরীক্ষা করে দেখুন। যদি তা হয় তবে ধ্বংস করুন; যদি তা না হয়, তবে পুনরায় লোড করার দরকার নেই।

Comments

@ ভ্লাদিমির স্টারকভ এই সম্পর্কে দুঃখিত - মনে হচ্ছে আমি মডেলের hideক্লাসটি ভুলে গিয়েছি , সুতরাং যদি আপনার উইন্ডোটি খুব ছোট ছিল, মোডালগুলি বোতামগুলিতে মাউসের ইভেন্টগুলি অবরুদ্ধ করে থাকতে পারে। কিছু কারণে আজ সকালে জেএসফিডালন.টি সত্যিই খারাপ (একটি 504 আপডেট করার চেষ্টা করেছে), তাই আমি কেবল plnkr.co এ উদাহরণটি আবার লিখেছি, যা যাইহোক এজেএক্সের পক্ষে ভাল is

— মার্ভ

অন্য একটি সমস্যা রয়েছে: .মডাল-বডিটিতে এখনও এটিতে পাঠ্য থাকবে, তাই আমি যুক্ত করেছি: <CODE> $ ('# মাইমোডাল। আধুনিক-দেহ') text লুকানো ইভেন্ট শ্রোতার মধ্যে

— rbp

bs.modalমধ্যে $(this).removeData('bs.modal')দিয়ে বুটস্ট্র্যাপ 3 আমার জন্য কাজ

— jvannistelrooy

বুস্ট্র্যাপ 3 এর সম্পূর্ণ কার্যকারী কোডটি হ'ল$('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); });

— ক্রিস্টোফ ফোনডাচি

আমি মোডাল লুকানো হচ্ছে কিনা তা দূরবর্তী উত্স থেকে লোড করা হয়েছে কিনা তাও খতিয়ে দেখব: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()

— মডেলটি

আপনার ব্যবহার করা উচিত নয় $(this).empty()। remoteবিকল্প নেস্টেড মধ্যে লোড রিমোট ডাটা <div class="modal-content">উপাদান। $('.modal-content', this).empty();পরিবর্তে ব্যবহার করুন।

— গাভিন

Answer 3

বুটস্ট্র্যাপ ৩.১-র জন্য আপনি 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

দূরবর্তী পৃষ্ঠাগুলিতে নিশ্চিত হয়ে নিন যে আপনি বুটস্ট্র্যাপ বা জ্যাকুই লাইব্রেরি লোড করছেন না। এটি কোনও রেফারেন্সকে মেরে ফেলবে এবং খালি একটি খালি মডেল ছাড়বে।

— ব্যাংকজিলা

এটি আমার পক্ষে কাজ করছিল না। এখানে আমার কোড যা কাজ করছে: $ (ডকুমেন্ট) .অন ("গোপন.বস.মডাল", ".মডাল", ফাংশন (ঙ) {যদি (! $ (E.target) .is ("। স্থানীয়-মডেল ")) {$ (e.target)। রিমোভ ডেটা (" bs.modal ")। সন্ধান করুন ("। মডেল-সামগ্রী ")। খালি ();}});

— কেভিন

আমি যখন $(e.target).removeData("bs.modal").find(".modal-content").empty();এটি ব্যবহার করি তখন আমার মডেলের মতো এটি কোনওভাবে লুকিয়ে যায় এবং কেবল ধূসর রঙের ওভারলে প্রদর্শিত হয়।

— এক্সেল

Answer 4

ধন্যবাদ মার্ভ আমি বুস্ট্র্যাপ.জেএস এর চারপাশে ঝাঁকুনি দেওয়া শুরু করেছি তবে আপনার উত্তরটি দ্রুত এবং পরিষ্কার কাজ work এখানে আমার কোডটি ব্যবহার করে শেষ করেছি।

$('#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 এফওয়াইআইয়ের সাথে কাজ করে

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

Answer 7

আমার প্রকল্পটি ইআইআই-তে নির্মিত এবং বুটস্ট্র্যাপ-ইআইআই প্লাগইন ব্যবহার করে, সুতরাং আপনি যদি উত্তর ব্যবহার করেন তবেই এই উত্তরটি প্রাসঙ্গিক।

উপরের ফিক্সটি কাজ করেছিল তবে প্রথমবারের পরে মডেলটি প্রদর্শিত হয়েছিল। প্রথমবার এটি খালি এসেছিল। আমি মনে করি এটি কারণ কোডটি আমার দীক্ষার পরে ইআইআই মডেলের হাইড ফাংশনটিকে কল করে যার ফলে আমার দীক্ষা ভেরিয়েবলগুলি সাফ করে।

আমি দেখতে পেলাম যে মোডালটি চালু করেছে এমন কোডের আগেই মুছে ফেলা ডেটা কলটি করা কৌশলটি করেছে। সুতরাং আমার কোডটি এভাবে কাঠামোযুক্ত ...

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

Answer 8

বুটস্ট্র্যাপ ৩.২.০ এ "অন" ইভেন্টটি নথিতে থাকতে হবে এবং আপনাকে মডেলটি খালি করতে হবে:

$(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') যা মডেল বাক্স এইচটিএমএল সংযোজন করে।

Comments

বিএস ৩.৩..6 নিয়ে এটিই আমার পক্ষে কাজ করেছে। হ্যান্ডেলবার টেম্পলেট ব্যবহার করে। আমি তবে দেহের পরিবর্তে ডকুমেন্ট ব্যবহার করার পরামর্শ দিই।

— dbinott

Answer 11

একটি $ (এটি) .html ('') যুক্ত করা হচ্ছে; দৃশ্যমান ডেটা সাফ করার জন্য এবং এটি বেশ সূক্ষ্মভাবে কাজ করে

Answer 12

যদি কোনও দূরবর্তী ইউআরএল সরবরাহ করা থাকে তবে লিখিত সামগ্রীটি jQuery এর লোড পদ্ধতির মাধ্যমে একসময় লোড হবে এবং mod আপনি যদি ডেটা-এপিআই ব্যবহার করছেন তবে আপনি বিকল্প হিসাবে দূরবর্তী উত্স নির্দিষ্ট করতে href বৈশিষ্ট্যটি ব্যবহার করতে পারেন। এর উদাহরণ নীচে দেখানো হয়েছে

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

Answer 13

আমি এই জাতীয় কিছু যুক্ত করেছি, কারণ পুরানো সামগ্রীটি নতুন প্রদর্শিত না হওয়া অবধি প্রদর্শিত হবে, .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 এর জন্য, মোডাল.জেজে আমি পরিবর্তন করেছি:

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

আপনি কোন এইচটিএমএল উপাদানটি খালি করতে চান (ডিভ, স্প্যান যাই হোক না কেন)।

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