Affichage des données PHP dans Bootstrap Modal

J'ai un site d'arbre de base qui a chaque personne comme suit:Affichage des données PHP dans Bootstrap Modal

<a href="extract.php?id=John Dice" class="md-trigger" data-modal="modal-3" id ="Mohammed Ishaq Sharief">John Dice</a>

Le extract.php est un script php de base qui prend la id de l'étiquette href et extrait que les personnes informations de la base de données. Le script php affiche maintenant les données de manière simple (arrière-plan blanc et texte noir). Si vous regardez attentivement comme à la « ` href » étiquette, il devrait afficher une modale qui est codé comme suit:

<div class="md-modal md-effect-1" id="modal-3"> 
    <div class="md-content"> 
     <h3>Person Information</h3> 
     <div> 
      <ul> 
       <li><strong>Name:</strong> John Dice.</li> 
       <li><strong>DOB:</strong> 28th July 1995.</li> 
       <li><strong>BirthPlace:</strong> Chicago.</li> 
       <li><strong>Occupation:</strong> Student.</li> 
       <li><strong>About:</strong> Information.</li> 
       <li><strong>Contact:</strong> Contact stuff.</li> 
      </ul> 
      <button class="md-close">Close </button> 
     </div> 
    </div> 
</div>

Pour l'instant je les valeurs codés en dur, mais je veux les données que j'extrait du php à être affiché à l'intérieur de ce modal sur la même page. Je suis passé par quelques questions et je sais qu'un modal est chargé dès que la page est chargée mais elle est cachée et le seul moyen de transmettre des données via Ajax et Javascript dont je n'ai aucune idée. Toute aide avec cela sera grandement appréciée.

Note: Ceci n'est pas un projet académique et je ne le téléchargerai pas sur un serveur.

Source

2014-07-10 Beginner

alors qu'est-ce que c'est? – HTTP

auto-éducation et oui numérisation des dossiers de la famille – Beginner

Vous pouvez séparer le résultat en créant une page pour le résultat

result.php:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>Remote file for Bootstrap Modal</title> 
</head> 
<body> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h4 class="modal-title">Modal title</h4> 
     </div> 
      <!-- /modal-header --> 
     <div class="modal-body"> 

       <?php 
        ///fetch from DB 
        $id = $_GET['id']; //to test it works with php GET 

       ?> 

      <!--put the result from DB here---> 

      <ul> 
      <li><strong>Name:</strong><?php echo $id;?> John Dice.</li> 

       <!--put the result from DB here---> 

       <ul> 
       <li><strong>Name:</strong> John Dice.</li> 
       <li><strong>DOB:</strong> 28th July 1995.</li> 
       <li><strong>BirthPlace:</strong> Chicago.</li> 
       <li><strong>Occupation:</strong> Student.</li> 
       <li><strong>About:</strong> Information.</li> 
       <li><strong>Contact:</strong> Contact stuff.</li> 
      </ul> 

     </div> 
      <!-- /modal-body --> 
     <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> 
      <!-- /modal-footer --> 
</body> 
</html>

Et votre déclencheur Modal

<!DOCTYPE html> 
    <html> 
    <head> 
     <link href="bootstrap.css" rel="stylesheet"> 
     <script src="jquery-1.10.2.min.js"></script> 
     <script src="bootstrap.js"></script> 
    </head> 

    <a data-toggle="modal" class="btn btn-info" href="result.php?id=123" data-target="#myModal">Click me !</a> 

<!-- Modal --> 
    <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><!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<!-- /.modal --> 
    </body> 
</html>

Source

2014-07-10 05:11:46 ngakak

Votre question est vaste que je ne savoir comment commencer. Mais Tout d'abord, vous ne pouvez pas exécuter ceci si vous ne téléchargez pas sur un serveur avec un PHP Apache et mysql en cours d'exécution. Deuxièmement, si vous ne savez pas comment manipuler les données du serveur en utilisant php/mysql, je vous recommande de l'apprendre à partir du here. Troisièmement, si vous voulez apprendre ajax, et bootstrap, semble que c'est une recherche avec everybody's friend.

je vous recommande d'utiliser jquery pour la partie ajax parce que vous ne pouvez pas utiliser le modal bootstrap sans jquery inclus afin de prendre un avantage que l'on comme,

$('your-button').on('click', function() { 
    //send your .post request here similar to ajax request 
    $.post('request.php', { id: 'the value of id that was clicked', function(data) { 
     $('.modal-body').html(data); 
     $('your modal selector').modal(); 
    }); 
});

Dans votre request.php, faire une requête pour que le filtrage le passé id qui était cliquer et faire une liste non ordonnée pour les données que vous aviez est déjà écrit. \

Hope it helps :)

Source

2014-07-10 05:33:31 HTTP

Oh, j'ai un serveur wamp et je l'utilise pour les scripts php. Juste que je ne vais pas le déployer sur un serveur Web – Beginner

Je ne pense pas que vous avez vraiment compris ma question. Vous avez donné des réponses pour tout ce que j'ai déjà. Je voulais juste analyser le contenu de 'php' dans le modal. Je ne manipule pas les données de la base de données, son extraction de base et son affichage. Je demandais une solution sans Ajax, s'il n'y a pas moyen de le faire avec juste php, puis aller sur Ajax – Beginner

pouvez essayer cette?

html:

<a class="ajax_modal" href="modal.php?data=ini datanya">Open Modal</a>

jQuery:

modal.php

<?php 
$data = $_GET["data"]; 
?> 

<div id="custom-content" class="modal-block modal-block-md"> 
    <section class="panel"> 
    <header class="panel-heading bg-primary"><h2 class="panel-title" style="color: #ffffff;"><span class="fa fa-info-circle fa-lg"></span>&nbsp;&nbsp;Modal Header</h2></header> 
    <div class="panel-body"> 
     <div class="row"> 
     <div class="col-md-12"> 
      Data diterima : '<strong><?php print $data; ?></strong>' 
     </div> 
     </div> 
    </div> 
    <footer class="panel-footer bg-default" style="padding: 10px;"> 
     <div class="row"> 
     <div class="col-md-12 text-right"> 
      <div class="col-xs-8" align="left"><strong>Modul information</strong></div> 
      <div class="col-xs-4" align="right"><button type="button" class="btn btn-sm btn-primary modal-dismiss"><strong>Close</strong></button></div> 
     </div> 
     </div> 
    </footer> 
    </section> 
</div>

Hope this aide.

Source

2016-01-28 19:37:19 aelan

Affichage des données PHP dans Bootstrap Modal

Répondre

Questions connexes