ajax - Bootstrap 3 - Comment charger le contenu modal corps via AJAX?

33

Vérifier cette SORTE de réponse out.

Il semble que la seule façon est de fournir à l'ensemble de la structure modale avec votre réponse ajax.

Que vous pouvez vérifier à partir du bootstrap le code source, la fonction de charge est reliée à l'élément racine.

Dans le cas où vous ne pouvez pas modifier l'ajax réponse, une solution simple pourrait être un appel explicite de la $(..).modal(..) plugin sur votre corps élément, même s'il sera probablement briser le afficher/masquer les fonctions de l'élément racine.

InformationsquelleAutor alexcasalboni
86

C'est en fait super simple avec juste un peu d'ajout de javascript. Le link href est utilisé comme l'ajax source de contenu. Notez que pour Bootstrap 3.* nous avons mis data-remote="false" pour désactiver le obsolète Bootstrap fonction de charge.

JavaScript:
```
//Fill modal with content from link href
$("#myModal").on("show.bs.modal", function(e) {
    var link = $(e.relatedTarget);
    $(this).find(".modal-body").load(link.attr("href"));
});
```
Html (basé sur le fonctionnaire exemple):
```

<a href="remoteContent.html" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-default">
    Launch Modal
</a>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
```
Essayez-le vous-même: https://jsfiddle.net/ednon5d1/
- Dans le plus récent Bootrat, le load fonction doit être depracated et le dit dans le Bootstrap docs: Cette option est obsolète depuis la v3.3.0 et sera supprimée dans v4. Nous vous recommandons d'utiliser côté client création de modèles ou d'une liaison de données-cadre, ou l'appel de jQuery.charger vous-même. serais ravi de voir une version mise à jour de cette
- Avez-vous des commentaires sur la mauvaise réponse? Cette réponse, c'est exactement cela. 😉
- Cela déclenche 2x appels ajax dans le Bootstrap v3. L'un pour l'original Modal AJAX charge et un pour votre show.bs.modal événement (qui est déclenché après l'original de l'appel ajax).
- Merci pour remarquer cela. Les docs officielles n'étaient pas très clair ici - maintenant, je spécifiquement désactivé l'origine de la charge par le biais de data-remote="false" et ajouté un JSfiddle. Dans le Bootstrap 4 cela ne devrait plus être nécessaire.
- Est-il un moyen simple de définir le modal titre, trop? Première pensée a été pour faire un deuxième appel ajax mais ce n'est pas agréable...
- cela dépend d'où vous souhaitez définir le titre de. Vous pouvez l'installer par le biais d'un modal gestionnaire d'événement comme ceci: $(this).find('.modal-title').text('New title). Voir: getbootstrap.com/javascript/#modals-related-target
- Notez que vous pouvez utiliser la totalité de la fonction de rappel pour se lier à des contrôles dont vous avez la charge.
InformationsquelleAutor marcovtwout

Je suppose que vous êtes à la recherche pour cette fonction personnalisée. Il prend de données-activer attribut et crée dynamiquement le nécessaire div à la place du contenu à distance. Il suffit de placer le data-toggle="ajaxModal" sur n'importe quel lien que vous souhaitez charger via AJAX.

La JS partie:

$('[data-toggle="ajaxModal"]').on('click',
              function(e) {
                $('#ajaxModal').remove();
                e.preventDefault();
                var $this = $(this)
                  , $remote = $this.data('remote') || $this.attr('href')
                  , $modal = $('<div class="modal" id="ajaxModal"><div class="modal-body"></div></div>');
                $('body').append($modal);
                $modal.modal({backdrop: 'static', keyboard: false});
                $modal.load($remote);
              }
            );

Enfin, dans le contenu à distance, vous avez besoin de mettre l'ensemble de la structure de travail.

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
            <a href="#" class="btn btn-white" data-dismiss="modal">Close</a>
            <a href="#" class="btn btn-primary">Button</a>
            <a href="#" class="btn btn-primary">Another button...</a>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

C'est exactement la façon dont je le fais aujourd'hui sauf que j'ai un modal_create_head et modal_create_foot la fonction, puis je jette ce que ajax retour entre les deux. Je pensais que ce serait plus rapide que le chargement d'une page html à l'ajax box depuis votre .fichier js seront cache par le côté client et de les garder en les réutilisant, non? Pourquoi les gens de la charge .html au lieu de retourner tous les codes html en Json ou du Texte ou HTML, est en cours de chargement HTML plus vite?

InformationsquelleAutor Paul Marti

Dans le cas où vous avez besoin de mettre à jour le même modale avec contenu à partir de différents Ajax /appels d'API voici une solution qui fonctionne.

$('.btn-action').click(function(){
    var url = $(this).data("url"); 
    $.ajax({
        url: url,
        dataType: 'json',
        success: function(res) {

            //get the ajax response data
            var data = res.body;

            //update modal content here
            //you may want to format data or 
            //update other modal elements here too
            $('.modal-body').text(data);

            //show modal
            $('#myModal').modal('show');

        },
        error:function(request, status, error) {
            console.log("ajax call went wrong:" + request.responseText);
        }
    });
});

Bootstrap 3 Demo

Bootstrap 4 Demo

Agréable, propre et efficace! Recommandé ainsi.

InformationsquelleAutor Zim

Une façon simple d'utiliser des modaux est avec eModal!

Ex de github:

Lien eModal.js <script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>
utilisation eModal pour afficher un modal pour alerter, ajax, de commandes ou de confirmer
```
//Display an alert modal with default title (Attention)
eModal.ajax('your/url.html');
```

JS:

$(document).ready(function () {/* activate scroll spy menu */
var iconPrefix = '.glyphicon-';
$(iconPrefix + 'cloud').click(ajaxDemo);
$(iconPrefix + 'comment').click(alertDemo);
$(iconPrefix + 'ok').click(confirmDemo);
$(iconPrefix + 'pencil').click(promptDemo);
$(iconPrefix + 'screenshot').click(iframeDemo);
///////////////////* Implementation *///////////////////
//Demos
function ajaxDemo() {
var title = 'Ajax modal';
var params = {
buttons: [
{ text: 'Close', close: true, style: 'danger' },
{ text: 'New content', close: false, style: 'success', click: ajaxDemo }
],
size: eModal.size.lg,
title: title,
url: 'http://maispc.com/app/proxy.php?url=http://loripsum.net/api/' + Math.floor((Math.random() * 7) + 1) + '/short/ul/bq/prude/code/decorete'
};
return eModal
.ajax(params)
.then(function () { alert('Ajax Request complete!!!!', title) });
}
function alertDemo() {
var title = 'Alert modal';
return eModal
.alert('You welcome! Want clean code ?', title)
.then(function () { alert('Alert modal is visible.', title); });
}
function confirmDemo() {
var title = 'Confirm modal callback feedback';
return eModal
.confirm('It is simple enough?', 'Confirm modal')
.then(function (/* DOM */) { alert('Thank you for your OK pressed!', title); })
.fail(function (/*null*/) { alert('Thank you for your Cancel pressed!', title) });
}
function iframeDemo() {
var title = 'Insiders';
return eModal
.iframe('https://www.youtube.com/embed/VTkvN51OPfI', title)
.then(function () { alert('iFrame loaded!!!!', title) });
}
function promptDemo() {
var title = 'Prompt modal callback feedback';
return eModal
.prompt({ size: eModal.size.sm, message: 'What\'s your name?', title: title })
.then(function (input) { alert({ message: 'Hi ' + input + '!', title: title, imgURI: 'https://avatars0.githubusercontent.com/u/4276775?v=3&s=89' }) })
.fail(function (/**/) { alert('Why don\'t you tell me your name?', title); });
}
//#endregion
});

CSS:

.fa{
cursor:pointer;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/united/bootstrap.min.css" rel="stylesheet" >
<link href="http//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="row" itemprop="about">
<div class="col-sm-1 text-center"></div>
<div class="col-sm-2 text-center">
<div class="row">
<div class="col-sm-10 text-center">
<h3>Ajax</h3>
<p>You must get the message from a remote server? No problem!</p>
<i class="glyphicon glyphicon-cloud fa-5x pointer" title="Try me!"></i>
</div>
</div>
</div>
<div class="col-sm-2 text-center">
<div class="row">
<div class="col-sm-10 text-center">
<h3>Alert</h3>
<p>Traditional alert box. Using only text or a lot of magic!?</p>
<i class="glyphicon glyphicon-comment fa-5x pointer" title="Try me!"></i>
</div>
</div>
</div>
<div class="col-sm-2 text-center">
<div class="row">
<div class="col-sm-10 text-center">
<h3>Confirm</h3>
<p>Get an okay from user, has never been so simple and clean!</p>
<i class="glyphicon glyphicon-ok fa-5x pointer" title="Try me!"></i>
</div>
</div>
</div>
<div class="col-sm-2 text-center">
<div class="row">
<div class="col-sm-10  text-center">
<h3>Prompt</h3>
<p>Do you have a question for the user? We take care of it...</p>
<i class="glyphicon glyphicon-pencil fa-5x pointer" title="Try me!"></i>
</div>
</div>
</div>
<div class="col-sm-2 text-center">
<div class="row">
<div class="col-sm-10  text-center">
<h3>iFrame</h3>
<p>IFrames are hard to deal with it? We don't think so!</p>
<i class="glyphicon glyphicon-screenshot fa-5x pointer" title="Try me!"></i>
</div>
</div>
</div>
<div class="col-sm-1 text-center"></div>
</div>

Look sympa à utiliser, mais un réel exemple de code ( peut-être l'usine jsfiddle.net ) sera plus intéressant.
Salut Mike, prendre un coup d'oeil dans l'édition post... j'ai Ajouté une démo à partir du site officiel

InformationsquelleAutor Samuel Pinto

créer un vide modal box sur la page en cours et c'est en dessous de l'appel ajax, vous pouvez voir comment récupérer le contenu du résultat à partir d'une autre page html.

 $.ajax({url: "registration.html", success: function(result){
//alert("success"+result);
$("#contentBody").html(result);
$("#myModal").modal('show'); 
}});

une fois que l'appel est terminé, vous obtiendrez le contenu de la page par la suite pour ensuite, vous pouvez insérer le code dans vous modal id de contenu à l'aide.

Vous pouvez contrôleur d'appel et obtenir le contenu de la page et vous pouvez montrer que dans votre modal.

ci-dessous l'exemple de Bootstrap 3 modal que nous sommes chargement de contenu à partir de registration.html page...

index.html
------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
function loadme(){
//alert("loadig");
$.ajax({url: "registration.html", success: function(result){
//alert("success"+result);
$("#contentBody").html(result);
$("#myModal").modal('show'); 
}});
}
</script>
</head>
<body>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" onclick="loadme()">Load me</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body" id="contentBody">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
registration.html
-------------------- 
<!DOCTYPE html>
<html>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {
border: 3px solid #f1f1f1;
font-family: Arial;
}
.container {
padding: 20px;
background-color: #f1f1f1;
width: 560px;
}
input[type=text], input[type=submit] {
width: 100%;
padding: 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type=checkbox] {
margin-top: 16px;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
border: none;
}
input[type=submit]:hover {
opacity: 0.8;
}
</style>
<body>
<h2>CSS Newsletter</h2>
<form action="/action_page.php">
<div class="container">
<h2>Subscribe to our Newsletter</h2>
<p>Lorem ipsum text about why you should subscribe to our newsletter blabla. Lorem ipsum text about why you should subscribe to our newsletter blabla.</p>
</div>
<div class="container" style="background-color:white">
<input type="text" placeholder="Name" name="name" required>
<input type="text" placeholder="Email address" name="mail" required>
<label>
<input type="checkbox" checked="checked" name="subscribe"> Daily Newsletter
</label>
</div>
<div class="container">
<input type="submit" value="Subscribe">
</div>
</form>
</body>
</html>

s'il vous plaît ne pas utiliser le format de code pour l'explication de code - séparer

InformationsquelleAutor radx

Vous devez vous connecter pour publier un commentaire.