Bootstrap Modal + PHP + AJAX -
so can attest idiot/newb/. looking simple way have ajax transfer id modal. takes modal has php , provides necessary variables shown.
ex.
table
=============================== [button] | data | data | data | =============================== [click button(id)] -> modal pops -> name: data , email: data, username: data
i don't know if kinda helps out. able figure out how have modal add information database can't seem figure out how pull data id modal , populate it.
thanks can get!
edit: (update) index page displays phone inventory. "view" pops modal gives me random information, active id not 1 current order.
hope helps. ( i'll take or criticism )
<?php include "../includes/db_connect.php"; $page = "chauffeur"; $pdo = database::connect(); if($_session['loggedin'] == 1){ } elseif($_session['loggedin'] == "") { header("location: http://wcl-wamp/"); } ?> <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>wcl webapp</title> <link href="../css/bootstrap.css" rel="stylesheet"> <link href="../css/td/style.css" rel="stylesheet"> <style> .body{margin: 0 40px; } </style> </head> <body> <?php include('../nav.php'); ?> <div class="body"> <div class="row"> <h3><b>phone inventory</b></h3> <div id="modal-results" ></div> <?php try { $stmt = $pdo->prepare('select * phone_inventory'); $stmt->execute(); $result = $stmt->fetchall(); if(count($result)) { foreach($result $row){ } } } catch (exception $e) { echo 'error: ' . $e->getmessage(); } ?> <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-hidden="true">×</button> <h3 class="modal-title" id="mymodallabel"><b>phone profile - id <?= $row['id']; ?></b></h3> </div> <div class="modal-body"> <form class="test" role="form"> <div class="form-group"> <label for="phone_number">phone # <input type="text" class="form-control" id="phone_number" name="phone_number" value="<?= $row['phone_number']; ?>"></label> <label for="device_id">device id <input type="text" class="form-control" id="device_id" name="device_id" value="<?= $row['device_id']; ?>"></label> <label for="device_manufacturer">device manufacturer <input type="text" name="device_manufacturer" id="device_manufacturer" class="form-control" value="<?= $row['device_manufacturer']; ?>" /></label> <label for="device_model">device model <input type="text" name="device_model" id="device_model" class="form-control" value="<?= $row['device_model']; ?>"/></label> <label for="phone_alias">phone alias <input type="text" name="phone_alias" id="phone_alias" class="form-control" value="<?= $row['phone_alias']; ?>"/></label> <label for="chauffeur_number">chauffeur # <input type="text" name="chauffeur_number" id="chauffeur_number" class="form-control" value="<?= $row['chauffeur_number']; ?>"/></label> </div> </form> </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="update">check out</button> </div> </div> </div> </div> <div class="row"> <table class="table table-striped table-condensed table-hover"> <thead> <tr> <th></th> <th>phone #</th> <th>device id</th> <th>device manufacturer</th> <th>device model</th> <th>phone alias</th> <th>chauffeur #</th> </tr> </thead> <tbody> <?php $sql = 'select * phone_inventory order id asc'; foreach ($pdo->query($sql) $row) { echo '<tr>'; echo '<td><a class="btn btn-xs btn-primary" data-toggle="modal" data-id="'. $row['id'] .'" href="#mymodal" >view</a></td>'; echo '<td>'. $row['phone_number'] .'</td>'; echo '<td>'. $row['device_id'] .'</td>'; echo '<td>'. $row['device_manufacturer'] .'</td>'; echo '<td>'. $row['device_model'] .'</td>'; echo '<td>'. $row['phone_alias'] .'</td>'; echo '<td>'. $row['chauffeur_number'] .'</td>'; echo '</tr>'; } database::disconnect(); ?> </tbody> </table> </div> </div> <?php include('../includes/js_scripts.php'); ?> <script> $(document).ready(function() { $('.table').datatable( { "spaginationtype": "bootstrap", "idisplaylength": 10 } ); } ); $(".device").click(function(){ var id = $(this).attr('data-id'); $("#mymodal").find("#id").val(id); $("#mymodal").dialog("open"); }) $(".alert").delay(200).addclass("in").fadeout(4000); $(function() { //twitter bootstrap script $("button#update").click(function(){ $.ajax({ type: "post", url: "test.php", data: $('form.test').serialize(), success: function(msg){ $("#modal-results").html(msg) $("#mymodal").modal('hide'); }, error: function(){ alert("failure"); } }); }); }); </script> </body> </html>
alright. think understand need. you've got results page, , want have link in each of results, bring detail page of result in modal.
so let's take 1 step @ time. link detail page working. once works correctly, hijack ajax, , display page in modal.
bootstrap ajax modals easily, @ remote option:
http://getbootstrap.com/javascript/#modals-usage
<a href="detail.php?id=123" data-toggle="modal" href="remote.html" data-target="#modal" data-target="#modal">link text</a>
let me know how goes, no shame in being new :d
Comments
Post a Comment