โหลดเนื้อหาในโมดอล (twitter bootstrap)

ฉันใช้ป๊อปอัปโมดอลของ twitter bootstrap

<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>

ฉันสามารถโหลดเนื้อหาโดยใช้ ajax ด้วยองค์ประกอบนี้:

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

ตอนนี้ฉันต้องเปิด modal เดียวกัน แต่ใช้ url ที่แตกต่างกัน ฉันใช้โมดอลนี้เพื่อแก้ไขเอนทิตีจากฐานข้อมูลของฉัน ดังนั้นเมื่อฉันคลิกแก้ไขในเอนทิตีฉันต้องโหลดโมดอลด้วย ID

<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

ฉันจะรีเฟรชหรือรีเซ็ตเนื้อหาที่โหลด ajax ในป๊อปอัป modal ของ twitter bootstrap ได้อย่างไร

ฉันมีปัญหาเดียวกันและฉันเดาว่าวิธีการทำเช่นนี้คือการลบแอตทริบิวต์ data-toggle และมีตัวจัดการที่กำหนดเองสำหรับลิงก์

บางสิ่งในบรรทัดของ:

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

จะพยายามในภายหลังและแสดงความคิดเห็น

ในการยกเลิกการโหลดข้อมูลเมื่อปิดโมดอลคุณสามารถใช้สิ่งนี้กับ Bootstrap 2.x:

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

และใน Bootstrap 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');
});

คุณสามารถบังคับให้ Modal รีเฟรชป๊อปอัปโดยเพิ่มบรรทัดนี้ที่ส่วนท้ายของวิธีการซ่อนของปลั๊กอิน Modal (หากคุณใช้ bootstrap-transition.js v2.1.1 ควรอยู่ที่บรรทัด 836)

this.$element.removeData()

หรือกับผู้ฟังเหตุการณ์

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

ด้วย Bootstrap 3 คุณสามารถใช้ตัวจัดการเหตุการณ์ 'hidden.bs.modal' เพื่อลบข้อมูลที่เกี่ยวข้องกับโมดอลโดยบังคับให้ป๊อปอัปโหลดซ้ำในครั้งต่อไป:

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

จากคำตอบอื่น ๆ (ขอบคุณทุกคน)

ฉันจำเป็นต้องปรับโค้ดให้ใช้งานได้เพียงแค่เรียก. html ลบเนื้อหาทั้งหมดออกและโมดอลจะไม่โหลดพร้อมกับเนื้อหาใด ๆ หลังจากที่ฉันทำ ดังนั้นฉันเพียงแค่มองหาพื้นที่เนื้อหาของโมดอลและใช้การรีเซ็ต HTML ที่นั่น

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

ยังอาจไปพร้อมกับคำตอบที่ยอมรับเนื่องจากฉันได้รับการกระโดดที่น่าเกลียดก่อนที่โมดอลจะโหลดเนื่องจากการควบคุมอยู่กับ Bootstrap

บีบอัดมากกว่าตัวอย่างที่ยอมรับข้างต้นเล็กน้อย คว้าเป้าหมายจาก data-target ของสิ่งที่คลิกในปัจจุบันโดยเปิด data-toggle = modal สิ่งนี้ทำให้คุณไม่จำเป็นต้องรู้ว่า id ของโมดอลเป้าหมายคืออะไรเพียงแค่ใช้อันเดิมซ้ำ! รหัสน้อย = ชนะ! คุณยังสามารถปรับเปลี่ยนสิ่งนี้เพื่อโหลดชื่อเรื่องป้ายกำกับและปุ่มสำหรับโมดอลของคุณได้ตามต้องการ

 $("[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>

ฉันทำการเปลี่ยนแปลงเล็กน้อยกับคำตอบของSoftlionดังนั้นวิธีการทั้งหมดของฉันจะไม่รีเฟรชเมื่อซ่อน โมดอลที่มีแอตทริบิวต์ data-refresh = 'true' จะรีเฟรชเท่านั้นส่วนอื่น ๆ จะทำงานได้ตามปกติ นี่คือเวอร์ชันที่แก้ไขแล้ว

$(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>

สิ่งนี้จะทำให้แน่ใจว่ามีการรีเฟรชเฉพาะโมดอลที่มี data-refresh = 'true' และฉันกำลังรีเซ็ต modal html เนื่องจากค่าเก่าจะแสดงจนกว่าค่าใหม่จะถูกโหลดทำให้ html ว่างเปล่าจะแก้ไขค่านั้น

นี่คือเวอร์ชันกาแฟที่เหมาะกับฉัน

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

จะใช้งานได้กับ twitterbootstrap ทุกเวอร์ชัน

รหัส Javascript:

<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>

ฉันยังติดอยู่กับปัญหานี้จากนั้นฉันก็เห็นว่ารหัสของโมดอลนั้นเหมือนกัน คุณต้องมีรหัสโมดอลที่แตกต่างกันหากคุณต้องการโมดอลหลายตัว ผมใช้แบบไดนามิกID นี่คือรหัสของฉันใน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>

ฉันหวังว่านี่จะได้ผลสำหรับคุณ

คุณสามารถลองสิ่งนี้:

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

ฉันต้องการให้ AJAX โหลดเนื้อหาออกเมื่อโมดอลปิดดังนั้นฉันจึงปรับบรรทัดที่แนะนำโดยผู้อื่น (ไวยากรณ์ของกาแฟ):

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

var $ table = $ ('# myTable2');
$ table.bootstrapTable ('ทำลาย');

ทำงานให้ฉัน

ขั้นตอนที่ 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');
});