Passer du contenu dynamique modal bootstrap 3.2
Ce que je suis en train de faire est de passer les data-id de la valeur à un lien externe via ajax de JQuery.
Le modal sera affiché, mais les données de l'attribut id n'est pas de l'envoi du lien externe. Je pense que quelque chose est incorrect avec mon script Jquery. Mais je ne le trouve pas.
C'est mon lien:
<a href="javascript:;" data-id="1" onclick="showAjaxModal();" class="btn btn-primary btn-single btn-sm">Show Me</a>
C'est mon ajax de Jquery script:
<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>
C'est mon code pour le modal:
<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">×</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>
Quelqu'un peut m'aider ici?
Je veux charger le contenu de la page trouvée par test-modale.
Le code de test-modal.php est simple, voir ci-dessous:
<?php
$uid = $_GET['id'];
echo id: '. $uid;
?>
J'ai essayé de faire un jsfiddle: http://jsfiddle.net/2dp12ft8/3/, mais il est totalement pas de travail.
J'ai changé le code js, mais il ne sera toujours pas de travail.
Je vois le modal montrer, mais seulement le mot "undefined" s'affiche et pas le contenu du fichier externe.
- Poster un JS Fiddle / JS Bin / live exemple de votre code.
- jsfiddle.net/2dp12ft8/3
Vous devez vous connecter pour publier un commentaire.
Ne pas mélanger le
onclick
attributs avec les gestionnaires d'événements, son désordre et peuvent provoquer des erreurs (comme se méprendre sur la portée dethis
, je crois que c'est vous le problème principal ici).Si vous utilisez jquery utiliser:
Tout d'abord ajouter une classe pour les liens que vous souhaitez joindre l'événement, ici, j'utilise la classe
showme
:Puis la joindre à l'événement de clic sur ces liens:
D'accéder à la variable en php:
test-model.php?var=1&var2=2;
Essayer le charge méthode à la place. Je vais prendre un guess ici, mais il semble que vous voulez charger le contenu de la page à test-modal.php. Si c'est correct, remplacer votre appel ajax comme suit:
Si votre test-modal.php la page contient plus d'un fragment (par exemple, il a html et les balises de corps), vous pouvez cibler qu'une partie seulement de la page par le passage d'un id de l'élément contenant pour le contenu que vous souhaitez charger, tels que:
qui serait seulement de charger le contenu de l'élément avec l'id du conteneur à partir de votre test-modal.php page dans le modal-body.