'Bootstrap Modal + PHP + AJAX
So I can attest that I am an idiot/newb/. I am looking for a simple way to have ajax transfer an ID to a modal. Which then takes that modal that has php and provides the necessary variables to be shown.
Ex.
Table
===============================
[Button] | Data | Data | Data |
===============================
[Click Button(ID)] -> Modal Pops up -> Name: Data , Email: Data, Username: Data
I don't know if this kinda helps out. I was able to figure out how to have the modal add information to a database but I can't seem to figure out how to pull data from the ID to modal and populate it.
Thanks for any help I can get!
EDIT: (UPDATE) This is my index page that displays all phone inventory. The "View" pops up the modal but gives me random information, it is an active ID but not the one that is current to the order.
Hope this helps. ( I'll take any help 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 * FROM phone_inventory');
$stmt->execute();
$result = $stmt->fetchAll();
if(count($result)) {
foreach($result as $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 * FROM phone_inventory ORDER BY id ASC';
foreach ($pdo->query($sql) as $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>
Solution 1:[1]
Alright. I think I understand what you need. You've got a results page, and you want to have a link in each of the results, that will bring up the detail page of the result in a modal.
So let's take it one step at a time. Get your link to the detail page working. Once that works correctly, we hijack it with AJAX, and display the page in the modal.
Bootstrap does AJAX modals easily, look at the 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 it goes, no shame in being new to something :D
Solution 2:[2]
Alright. I think I understand what you need. You've got a results page, and you want to have a link in each of the results, that will bring up the detail form in edit in use a single model open and field in the row edit data.
please follow this script to Edit(Update) data in a single model.
<script type="text/javascript">
/* if double click on table row then open model and fill all data in form */
$('#table-id tbody').on('dblclick', 'tr', function() {
var table = $('#table-id').DataTable();
var data = table.row(this).data();
$("#phone_number").val(data.phone_number);
$("#device_manufacturer").val(data.device_manufacturer);
$("#device_model").val(data.device_model);
$("#phone_alias").val(data.phone_alias);
$("#chauffeur_number").val(data.chauffeur_number);
$("#device_model").val(data.device_model);
$("#modal-resultsl").modal('show');
});
/* if model close then all field is blank in open model in form */
$('#con-close-modal').on('hidden.bs.modal',function() {
/*Clear all input type="text" box*/
$('#Form-id input[type="text"]').val('');
/*Clear all input type="number" box*/
$('#Form-id input[type="number"]').val('');
});
</script>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | emptywalls |
| Solution 2 | Kaushik Kothiya |