Prześlij zawartość dynamiczną do modemu ładowania początkowego 3.2

Question

Co próbuję zrobić, to przekazać wartość identyfikatora danych do zewnętrznego łącza za pośrednictwem JQuery ajax. Modal pojawi się, ale atrybut id-danych nie wysyła do linku zewnętrznego. Myślę, że coś jest nie tak z moim skryptem Jquery'ego. Ale nie mogę tego znaleźć.

To jest mój związek:

<a href="javascript:;" data-id="1" onclick="showAjaxModal();" class="btn btn-primary btn-single btn-sm">Show Me</a> 

To jest mój jQuery skrypt ajax:

<script type="text/javascript"> 
     function showAjaxModal() 
     { 
      var uid = $(this).data('id'); 

      jQuery('#modal-7').modal('show', {backdrop: 'static'}); 


      jQuery.ajax({ 
       url: "test-modal.php?id=" + uid, 
       success: function(response) 
       { 
        jQuery('#modal-7 .modal-body').html(response); 
       } 
      }); 
     } 
     </script> 

To jest mój kod na modalnym:

<div class="modal fade" id="modal-7"> 
    <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">Dynamic Content</h4> 
      </div> 

      <div class="modal-body"> 

       Content is loading... 

      </div> 

      <div class="modal-footer"> 
       <button type="button" class="btn btn-white" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-info">Save changes</button> 
      </div> 
     </div> 
    </div> 
</div> 

Czy ktoś może mi pomóc tutaj?

---

Chcę załadować zawartość strony znalezioną przez test-modal.

Kodeks testowego modal.php jest prosta, patrz poniżej:

<?php 
$uid = $_GET['id']; 
echo id: '. $uid; 
?> 

Próbowałem dokonać jsfiddle: http://jsfiddle.net/2dp12ft8/3/ ale to zupełnie nie działa. Zmieniłem kod js, ale nadal nie będzie działać.

Widzę pokazany mod, ale pojawia się tylko słowo "niezdefiniowane", a nie treść pliku zewnętrznego.

Answer 1

Nie mieszaj atrybutów onclick z procedurami obsługi zdarzeń, ich niechlujstwem i może powodować błędy (np. Pomylenie zakresu this, co moim zdaniem jest tutaj głównym problemem).

Jeśli używasz jquery z niego skorzystać: Pierwszy dodać klasę do linków, które chcesz dołączyć zdarzenie, tutaj użyć klasy showme:

<a href="#;" data-id="1" class="btn btn-primary btn-single btn-sm showme">Show Me</a> 

następnie dołączyć do zdarzenia click na tych linków:

<script type="text/javascript"> 
    jQuery(function($){ 
     $('a.showme').click(function(ev){ 
      ev.preventDefault(); 
      var uid = $(this).data('id'); 
      $.get('test-modal.php?id=' + uid, function(html){ 
       $('#modal-7 .modal-body').html(html); 
       $('#modal-7').modal('show', {backdrop: 'static'}); 
      }); 
     }); 
    }); 
</script> 

Aby uzyskać dostęp do zmiennej w php:

$uid = $_GET['id']; //NOT $_GET['uid'] as you mention in a comment 

Answer 2

Zamiast tego należy wypróbować metodę . Zgaduję tutaj, ale wygląda na to, że chcesz załadować zawartość strony znalezionej w test-modal.php. Jeśli to prawda, zastąpić wywołanie ajax w następujący sposób:

function showAjaxModal() 
    { 
     var uid = $(this).data('id'); 
     var url = "test-modal.php?id=" + uid; 
     jQuery('#modal-7').modal('show', {backdrop: 'static'}); 
     jQuery('#modal-7 .modal-body').load(url); 

    } 

Jeśli strona testowa-modal.php zawiera ponad fragmentu (np ma tagów HTML i ciała), można kierować tylko częściowo na strona przekazując identyfikator elementu zawierającego za treści, które chcesz załadować, takich jak:

jQuery('#modal-7 .modal-body').load(url+' #container'); 

które załadować tylko zawartość elementu z kontenera id od strony test-modal.php do ciało modalne.