মডেলে সামগ্রী পুনরায় লোড করুন (টুইটার বুটস্ট্র্যাপ)

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 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 () ফাংশনটি অবলম্বন করি .ডাটা () ফাংশনটি কাজ করছে না।

— ব্যবহারকারী1803784

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

$ ('। মডেল')। অন ('লুকানো', ফাংশন () {$ (এটি)। রিমোভ ডেটা ();}) এটি নীচের সমাধানের আমার পরিবর্তন ... ক্লিনার কারণ আপনাকে ক্লিকটি ধরতে হবে না এবং লোড করতে হবে না এটি আপনার নিজের তাই প্রোগ্রাম্যাটিক মডেল শো এখনও কাজ করে

— কার্টার কোল

আমি বুটস্ট্র্যাপ 3 ব্যবহার করছি, মডেলের সামগ্রীগুলি প্রতিবার সতেজ হয়ে উঠবে তবে এটি দুটি মোডাল উইন্ডো তৈরি করে। অন্য কেউ কি এটি পায়?

— মিঃ বি

আরে সিড, "মোডাল-বডি" শ্রেণীর সাথে আপনার 2 ডিভ তৈরি হচ্ছে, বাস্তবে আপনি ইতিমধ্যে এটি তৈরি করছেন, এবং মডেলটি আবার তৈরি করছে। এই কোড থেকে, '.মডাল-বডি' সরান এবং সূক্ষ্মভাবে কাজ করা উচিত।

— পালটায়ার

আমার জন্য ডাব্লু / বুটস্ট্র্যাপ 3 কাজ করে, খুব হতাশার কারণ এটি ডিফল্টরূপে মূল বুটস্ট্র্যাপ লাইব্রেরি দ্বারা সমর্থিত নয়।

— জোশ ডিহেল

@মার্জ, আমি এই জাতীয় কিছু এবং ev.preventDefault () ব্যবহার করছি; পাশাপাশি তবে তবুও লিঙ্কের ক্লিকে, যখন আমি মোডাল উইন্ডোটি পাই, আমার পৃষ্ঠার সমস্ত ড্রপডাউন পুনরায় সেট হয়ে যাচ্ছে। কোন ধারণা, কীভাবে এটি প্রতিরোধ করবেন?

— জয়ক্রাত

Answer 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

নিখুঁত। কোন সমস্যা ছাড়াই কাজ করেছেন। বুটস্ট্র্যাপে ৩. আমি $ ('। মডেল') ব্যবহার করেছি on ('গোপন.বিএস.মডাল', ফাংশন () {$ (এটি)। রেমোভডেটা ('বিএস.মডাল');});

— Thupten

নিখুঁত নয়: এটি নতুন সামগ্রীর পূর্বে পুরানো সামগ্রীটি সংক্ষেপে দেখায়।

— লরেন্ট

@ লরেন্ট, আপনি .html ('') যোগ করে পূর্ববর্তী বিষয়বস্তুগুলি সাফ করতে পারেন। সুতরাং, ২.x: $ (এটি)। রেমোভ ডেটা ('মডেল') find সন্ধান করুন ('। মডেল-বডি') 'html (' ')' 3: $ (এই) .removeData ( 'bs.modal') এইচটিএমএল ( '') .modal শরীরের মধ্যে 2.x লোড বিষয়বস্তু, যেহেতু 3 লোড .modal ধারক মধ্যে বিষয়বস্তু সোজা।

— nabrown

সর্বশেষ মন্তব্যে ছোট সংশোধন, বুটস্ট্র্যাপ v3 এ হওয়া উচিত: $ (e.target) .RoveoveData ('bs.modal')। html (''); এটি এখন পর্যন্ত সবচেয়ে মার্জিত সমাধান (তবে এটি কিছুটা বিলম্ব করে)।

— Cesc

@ প্রস্তাবিত সমাধানটিতে @ সফ্টলিয়ন যে সম্পাদনা / সংস্করণটি ব্যবহার করেছে তা ব্যবহার করেছি - এটি কাজ করে এবং আমি কোনও গতি / বিলম্বের সমস্যা অনুভব করি না।

— ব্যবহারকারী1801810

Answer 3

আপনি মোডালকে মোডাল প্লাগইনের লুকানোর পদ্ধতির শেষে এই লাইনটি যুক্ত করে পপআপকে রিফ্রেশ করতে বাধ্য করতে পারেন (আপনি যদি বুটস্ট্র্যাপ-ট্রানজিশন.জেএস ভি 2.1.1 ব্যবহার করেন তবে এটি 836 লাইনে থাকা উচিত)

this.$element.removeData()

বা ইভেন্ট শ্রোতার সাথে

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

Comments

-1 প্রথম স্নিপেটটি সরাসরি মডেল প্লাগইনে রাখার ধারণাটি একটি ভয়ানক ধারণা। আপনি যদি প্লাগইনে হ্যাক করতে যাচ্ছেন (যা আমি এড়াতে পারি), তবে আরও যুক্তিসঙ্গত কাজটি হ'ল হয় load()কনস্ট্রাক্টরের বাইরে থেকে কলটি সরিয়ে নিয়ে যাওয়া এবং show()ম্যানুয়ালি পুনরায় লোড ট্রিগার করার জন্য প্লাগইনে একটি পদ্ধতি যুক্ত করা to remote। দ্বিতীয় পরামর্শে, আমি কেবলমাত্র এমন প্রশ্নের উত্তর হিসাবে সরবরাহ করেছি যা স্পষ্টভাবে @ মার্কজের পরামর্শ অনুসারে এটি না করতে বলেছিল ।

— মার্ভ

আমি শ্রোতার পদ্ধতির পছন্দ করি। আমি মনে করি আইডি হার্ডকোডিং এড়ানোর জন্য '# মডেল' এর পরিবর্তে '.মডাল' ব্যবহার করে এটি আরও উন্নত করা যেতে পারে। আমার মতে এটি মার্কজ-এর চেয়ে ক্লিনার পদ্ধতির, কারণ আপনি মূল বুটস্ট্র্যাপ মডালের মতো ডেটা-টগল ব্যবহার করতে থাকেন।

— টনি গ্রিমাল্ট

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

— অনুপম

Answer 4

বুটস্ট্র্যাপ 3 এর মাধ্যমে আপনি কোনও মডেল-সম্পর্কিত ডেটা মুছতে 'গোপন.bs.modal' ইভেন্ট হ্যান্ডলারটি ব্যবহার করতে পারেন, পপআপটিকে পরবর্তী সময়ে পুনরায় লোড করতে বাধ্য করুন:

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

Comments

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

— টেরি হল

# মডেল ট্রাই বডি

— wobsoriano

Answer 5

অন্যান্য উত্তরের উপর ভিত্তি করে (সবাইকে ধন্যবাদ)

আমাকে কোডটি কাজ করার জন্য সামঞ্জস্য করা দরকার, কেবলমাত্র .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>

এটি নিশ্চিত করবে যে কেবলমাত্র ডেটা-রিফ্রেশ = 'সত্য' যুক্ত মডেলগুলি রিফ্রেশ হয়েছে। এবং আমি মডেল এইচটিএমএলকেও পুনরায় সেট করছি কারণ পুরানো মানগুলি নতুন লোড হওয়া অবধি প্রদর্শিত হবে, এইচটিএমএল খালি স্থির করে making

Answer 8

এখানে একটি কফিস্ক্রিপ্ট সংস্করণ আমার জন্য কাজ করেছে।

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

Comments

এটি এমন একটি সমস্যার সমাধান করেছে যেখানে সামগ্রী পুনরায় লোড করা হয়েছে তবে মোডালের অভ্যন্তরে

— জেএসগুলি

Answer 9

এটি টুইটারবুটস্ট্র্যাপের সমস্ত সংস্করণের জন্য কাজ করবে

জাভাস্ক্রিপ্ট কোড:

<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

মোডাল বন্ধ হয়ে যাওয়ার সাথে সাথে আমি এজেএক্স লোড হওয়া সামগ্রীটি সরিয়ে ফেলতে চেয়েছিলাম, তাই আমি অন্যদের প্রস্তাবিত লাইনটি সামঞ্জস্য করেছি (কফিস্ক্রিপ্ট সিন্টেক্স):

$('#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: একটি ফাঁকা ডিভ নামক তৈরি করুন 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');
});