Topic: Modal not populating with PHP data.
Hi Guys,
I have been been trying to open a modal populated with data but I can't get both elements to work together.
Here is my code:
<td><a class="teal-text" href="admin.php?users&user_id=<?php echo $user_id; ?>" data-toggle="modal" data-target="#basicExample"><i class="fa fa-times"></i></a></td>
The code will open the modal but without the data as the url dosen't get the user_id but if I remove "data-toggle="modal" data-target="#basicExample" " the url gets the user_id and I can open the modal from another button.
I have tried various versions of this but nothing has worked so far.
Can anyone help with this?
Thanks
Tom
Add comment
Hi Rafal,
That was it :) Who knew my php was out of date!
Here is the completed code for anyone who needs it:
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="/mdb_gallery/public/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="/mdb_gallery/public/css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="/mdb_gallery/public/css/style.css" rel="stylesheet">
</head>
<body>
<?php
$conn = new mysqli('localhost', 'root', "", 'gallery');
$sql = "SELECT * FROM tbl_employee";
$result = $conn->query($sql) or trigger_error($conn->error."[$sql]");
?>
<br /><br />
<div class="container" style="width:700px;">
<h3 align="center">Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP</h3>
<br />
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th width="70%">Employee Name</th>
<th width="30%">View</th>
</tr>
<?php
while($row = $result->fetch_array(MYSQLI_ASSOC))
{
?>
<tr>
<td><?php echo $row["name"]; ?></td>
<td><button name=”view” value=”view” id="<?php echo $row['id']; ?>" class="btn btn-info btn-xs
view_data">view</button></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
<div id="dataModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Employee Details</h4>
</div>
<div class="modal-body" id="employee_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="/mdb_gallery/public/js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="/mdb_gallery/public/js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="/mdb_gallery/public/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="/mdb_gallery/public/js/mdb.min.js"></script>
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var employee_id = $(this).attr("id");
$.ajax({
url:"select.php",
method:"post",
data:{employee_id:employee_id},
success:function(data){
$('#employee_detail').html(data);
$('#dataModal').modal("show");
}
});
});
});
</script>
</body>
</html><?php
if(isset($_POST["employee_id"]))
{
$output = '';
$conn = new mysqli('localhost', 'root', "", 'gallery');
$sql = "SELECT * FROM tbl_employee WHERE id = '".$_POST["employee_id"]."'";
$result = $conn->query($sql) or trigger_error($conn->error.”[$sql]”);
Hi Tom,
I figure out, it's probably because you use outdated function mysql.
$result = query("SELECT * FROM tbl_employee");
confirm($result);$conn = new mysqli(addres, user, password, database);
$sql = "SELECT * FROM tbl_employee";
$result = $conn->query($sql) or trigger_error($conn->error."[$sql]");while($row = fetch_array($result))
to this:
while($row = $result->fetch_array(MYSQLI_ASSOC))
<input type="button" name="view" value="view" id="<?php echo $row["id"]; ?>" class="btn btn-info btn-xs view_data" />
to:
<button name="view" value="view" id="<?php echo $row['id']; ?>" class="btn btn-info btn-xs view_data">view</button>
and in select.php
`$result = query("SELECT * FROM tbl_employee WHERE id = '".$_POST["employee_id"]."'");
confirm($result);`
to:
`$conn = new mysqli(localhost, user, password, database);
$sql = "SELECT * FROM tbl_employee WHERE id = '".$_POST["employee_id"]."'";
$result = $conn->query($sql) or trigger_error($conn->error."[$sql]");`
while($row = fetch_array($result))
to
while($row = $result->fetch_array(MYSQLI_ASSOC))
If you will heve more problems please send me all files on mail r.rogulski@mdbootstrap.com (if you can of course). Then I will have this same problem what you, then it's easier to figure out what is wrong.
Regards
Hi Rafal,
I tried to replace all the css and js link with your but the model appears without the data.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="/mdb_gallery/public/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="/mdb_gallery/public/css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="/mdb_gallery/public/css/style.css" rel="stylesheet">
</head>
<body>
<?php
$result = query("SELECT * FROM tbl_employee");
confirm($result);
?>
<br /><br />
<div class="container" style="width:700px;">
<h3 align="center">Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP</h3>
<br />
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th width="70%">Employee Name</th>
<th width="30%">View</th>
</tr>
<?php
while($row = fetch_array($result))
{
?>
<tr>
<td><?php echo $row["name"]; ?></td>
<td><input type="button" name="view" value="view" id="<?php echo $row['id']; ?>" class="btn btn-info btn-xs view_data" /></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
<div id="dataModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Employee Details</h4>
</div>
<div class="modal-body" id="employee_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="/mdb_gallery/public/js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="/mdb_gallery/public/js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="/mdb_gallery/public/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="/mdb_gallery/public/js/mdb.min.js"></script>
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var employee_id = $(this).attr("id");
$.ajax({
url:"select.php",
method:"post",
data:{employee_id:employee_id},
success:function(data){
$('#employee_detail').html(data);
$('#dataModal').modal("show");
}
});
});
});
</script>
</body>
</html>
Hi Tom,
Style of MDBooststrap are overwritten by this lines:
`<title>Webslesson Tutorial | Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> `
Remove them. At the bottom move this scripts:
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var employee_id = $(this).attr("id");
$.ajax({
url:"select.php",
method:"post",
data:{employee_id:employee_id},
success:function(data){
$('#employee_detail').html(data);
$('#dataModal').modal("show");
}
});
});
});
</script></body>, and one more thing don't use quotation marks inside quotation marks:
<input type="button" name="view" value="view" id="<?php echo $row["id"]?>" class="btn btn-info btn-xs view_data" />
this should look
<input type="button" name="view" value="view" id="<?php echo $row['id']?>" class="btn btn-info btn-xs view_data" />
Regards
cont:
and on the select.php page:
<?php
if(isset($_POST["employee_id"]))
{
$output = '';
$result = query("SELECT * FROM tbl_employee WHERE id = '".$_POST["employee_id"]."'");
confirm($result);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">';
while($row = fetch_array($result))
{
$output .= '
<tr>
<td width="30%"><label>Name</label></td>
<td width="70%">'.$row["name"].'</td>
</tr>
<tr>
<td width="30%"><label>Address</label></td>
<td width="70%">'.$row["address"].'</td>
</tr>
<tr>
<td width="30%"><label>Gender</label></td>
<td width="70%">'.$row["gender"].'</td>
</tr>
<tr>
<td width="30%"><label>Designation</label></td>
<td width="70%">'.$row["designation"].'</td>
</tr>
<tr>
<td width="30%"><label>Age</label></td>
<td width="70%">'.$row["age"].' Year</td>
</tr>
';
}
$output .= "</table></div>";
echo $output;
}
?>
Hi Rafal,
I followed the link you left for me (thank you) and I eventually found my way to here:
I got it to work (very nice) but only if I used the stlye sheets and js scripts that came with it. I had to rem out the mdbootstrap ones which means I will loose out on your nice styling :(
It there any way to get the benefit of both?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<!-- <link href="/mdb_gallery/public/css/bootstrap.min.css" rel="stylesheet">-->
<!-- Material Design Bootstrap -->
<!-- <link href="/mdb_gallery/public/css/mdb.min.css" rel="stylesheet">-->
<!-- Your custom styles (optional) -->
<link href="/mdb_gallery/public/css/style.css" rel="stylesheet">
<title>Webslesson Tutorial | Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<?php
$result = query("SELECT * FROM tbl_employee");
confirm($result);
?>
<br /><br />
<div class="container" style="width:700px;">
<h3 align="center">Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP</h3>
<br />
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th width="70%">Employee Name</th>
<th width="30%">View</th>
</tr>
<?php
while($row = fetch_array($result))
{
?>
<tr>
<td><?php echo $row["name"]; ?></td>
<td><input type="button" name="view" value="view" id="<?php echo $row["id"]; ?>" class="btn btn-info btn-xs view_data" /></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
<!--
<div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
-->
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Employee Details</h4>
</div>
<div class="modal-body" id="employee_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.view_data').click(function(){
var employee_id = $(this).attr("id");
$.ajax({
url:"select.php",
method:"post",
data:{employee_id:employee_id},
success:function(data){
$('#employee_detail').html(data);
$('#dataModal').modal("show");
}
});
});
});
</script>
<!--/.Mask-->
<!-- SCRIPTS -->
<!-- JQuery -->
<!-- <script type="text/javascript" src="/mdb_gallery/public/js/jquery-3.1.1.min.js"></script>-->
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="/mdb_gallery/public/js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<!-- <script type="text/javascript" src="/mdb_gallery/public/js/bootstrap.min.js"></script>-->
<!-- MDB core JavaScript -->
<!-- <script type="text/javascript" src="/mdb_gallery/public/js/mdb.min.js"></script>-->
</body>
</html>
Hi Tom,
You have some page to edit users record (
admin.php?users&user_id=<?php echo $user_id; ?>), and we will use them. In links to edit or delet user porfile add new attribiute and bind them with user_id and add some class:
<a class="teal-text showmodal" data-userid="<?php echo $user_id; ?>" data-toggle="modal" data-target="#basicExample"></a>
In modal <div class="modal-body"> add id <div id="#usermanagment " class="modal-body">
And now is time for jQuery:
<script>
$(document).ready(function() {
$(document).on('click', '.showmodal', function() {
var userid = $(this).data('userid');
$("#usermanagment").html('<iframe src="admin.php?users&user_id='+userid+'"></iframe>');
});
});
</script>showmodal, script will take data from your attribute data-userid from clicked link, and add iframe with
your page.
In your way, you must generate modals for all users in PHP, or use AJAX, on this` link you can find how to do this.
Regards,
Hi Rafal,
What I hope to achieve is to have a modal open and populate a form so that the data fields can be edited.
I have moved the code since my first post so it looks a little different but does the same thing
The edit button is in a table that is brought through from my functions file:
$user = <<<DELIMETER
<tr>
<th scope="row">{$user_id}</th>
<td>{$username}</td>
<td>{$email}</td>
<td>{$password}</td>
<td>{$userrole}</td>
<td><a class="red-text" href="admin.php?delete_user_id={$user_id}"><i class="fa fa-times"></a></td>
<td><a class="teal-text" data-user_id="{$user_id}" data-toggle="modal" data-target="#basicExample"><i class="fa fa-pencil"></i></a></td>
</tr>
DELIMETER;
echo $user;<!-- Modal -->
<div class="modal fade" id="basicExample" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
</div>
<!--Body-->
<div class="modal-body">
<?php
if(isset($_GET['user_id'])){
$the_user_id = $_GET['user_id'];
$query = query(" SELECT * FROM users WHERE user_id = '{$the_user_id}' " );
confirm($query);
while($row = fetch_array($query)) {
$user_id = $row['user_id'];
$username = $row['username'];
$email = $row['email'];
$password = $row['password'];
$userrole = $row['user_role'];
?>
<form action="" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="title">User Name</label>
<input value="<?php echo $username; ?>" type="text" id="form41" class="form-control" name="username">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="title">Email</label>
<input value="<?php echo $email; ?>" type="text" id="form51" class="form-control" name="email">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="title">Password</label>
<input value="<?php echo $password; ?>" type="password" id="form61" class="form-control validate" name="password">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="title">User Role</label>
<input value="<?php echo $userrole; ?>" type="text" id="form71" class="form-control" name="userrole">
</div>
</div>
<div class="col-md-1" style="padding-top:25px;">
<div class="form-group">
<a><input class="btn btn-outline-primary btn-rounded waves-effect btn-sm" type="submit" name="update_user"></a>
</div>
</div>
</div>
</form>
<?php } } ?>
</div>
<!--Footer-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Modal -->
Hi Tom,
Can you explain my what do you want to achieve? But if you want to bind user_id to modal you can set your own attribute
data-userid="<?php echo $user_id; ?>"
Hi Rafal,
I apologise for not following your explanation too well but if I don't use Href then were in the the code do I put my php so that the Modal will open with user_id?
This link
<a class="teal-text" data-toggle="modal" data-target="#basicExample"><i class="fa fa-times"></i></a> should be use like a toggle for modal, you should avoid using hrefattribiut on it. data-target should contain id of div, in your case:
<div class="modal fade" id="basicExample" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<!-- Modal conntent -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>id="basicExample", it means if you press your link this modal will show up. Now in this code up, you can place all your data from admin.php?users&user_id=<?php echo $user_id; ?>
Hi Rafal,
I don't understanding what you mean with "div" my knowledge of Javascript is quite basic sorry.
Tom
You can't pass data in
href attribute, this link is used to toggle modal, data-toggle="modal" is use to bind this link to javascript function, and data-target="#basicExample". In this case, you must pass this data in #basicExamplediv
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No
Tags