Modem Bootstrap nie wyświetla się po użyciu paginacji z datowalnej

Używam Bootstrap 3 i Data Table 1.9. Modal jest otwarty po kliknięciu znacznika zakotwiczenia na pierwszej stronie tabeli danych, ale mam problem z wyświetlaniem modemu Bootstrap po użyciu podziału na tabelę danych. Jak rozwiązać ten problem. Oto mój kodModem Bootstrap nie wyświetla się po użyciu paginacji z datowalnej

<html> 
    <body> 
     <table id=prodlist class="table table-bordered table-striped"> 
      <thead> 
       <tr> 
        <th>#</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td> <a href="http://localhost/admin/product/viewProduct/15" class="prod-view" data-target="#modal" data-toggle="modal">edit</a> 
       </td> 
       </tr> 
       <tr><td> 
        <a href="http://localhost/admin/product/viewProduct/15" class="prod-view" data-target="#modal" data-toggle="modal">edit</a> 
       </td></tr> 
       <tr><td> 
        <a href="http://localhost/admin/product/viewProduct/15" class="prod-view" data-target="#modal" data-toggle="modal">edit</a> 
       </td> </tr> 
      </tbody> 
     </table> 
    </body> 
</html>

mój javascript dla DataTable jest

$(function() { 
    $("#prodlist").dataTable({ 
     "bAutoWidth": false, 
     "aoColumnDefs": [{ 
      "sWidth": "5%", 
      "aTargets": [0], 
      "bSearchable": false, 
      "bSortable": false, 
      "bVisible": true 
     }, ] 
    }); 
}); 
if ($(".alert-success, .alert-error").length > 0) { 
    setTimeout(function() { 
     $(".alert-success, .alert-error").fadeOut("slow"); 
    }, 1000); 
} 
$(document).ready(function(){ 
$(".prod-view").click(function(){ 
    var href = $(this).attr('href'); 

    $(".modal-body").load(href); 
    $('#myModal').modal('toggle') 
}); 
});

Źródło

2015-06-03 user936565

Nie są z pewnością pokazuje swój prawdziwy kod. Zniekształcone znaczniki nigdy nie wygenerowałyby tabeli danych z działającymi modami. – davidkonrad

Używam php i Mysql.Here mam tylko 3 wiersze w tabeli, ale faktycznie mam pobrać rekordy z MySQL i wyświetlane w tabeli. Mam problem tylko na drugiej stronie tabeli danych. Myślę, że problem jest związany z DOM – user936565

Ponieważ moduły bootstrap nie są włączane, powinny również działać na stronie # 2 itd. Zrobiłem test z powyższym kodem i modały pojawiły się na wszystkich stronach bez żadnych problemów. Byłaby to kolejna historia, jeśli aktywowałeś modals według kodu, ale tego nie robisz. – davidkonrad

Problemem jest to, że przez $(".prod-view").click() tylko inicjalizuje widocznej treści, tj wierszy na stronie # 1. DataTables wstrzykuje i usuwa wiersze tabeli do iz DOM, aby pokazać strony. Więc należy użyć delegowanego obsługi zdarzeń zamiast:

$("#prodlist").on("click", ".prod-view", function() { 
    var href = $(this).attr('href'); 
    $(".modal-body").load(href); 
    $('#myModal').modal('show') //<-- you should use show in this situation 
});

Ale jak sugeruje w komentarzu, czasowniki modalne nie są opt-in, nie trzeba otwierać je programowo. Tak długo, jak masz

<a href="#" data-target="#modal" data-toggle="modal">edit</a>

a #modal na stronie

<div class="modal fade" id="modal"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title">This is a modal</h4> 
     </div> 
     <div class="modal-body"> 
      <p>modal</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary" id="submit">submit</button> 
     </div> 
    </div> 
    </div> 
</div>

Modalny zostanie zainicjowane automatycznie na wszystkich stronach. Zobacz demo ->http://jsfiddle.net/9p5uq7h3/

Jeśli jedynym problemem jest zawartość modalnego, a następnie po prostu

$('body').on('show.bs.modal', function() { 
    $(".modal-body").load(url/to/modal/template); 
});

Źródło

2015-06-04 14:02:13 davidkonrad

Dobra odpowiedź, to uratowało mój czas. Dzięki. –

Modem Bootstrap nie wyświetla się po użyciu paginacji z datowalnej

Odpowiedz

Powiązane problemy