how to make javascript works after php database query? - javascript

I am using bootstrap framework, javascript(jquery) and php for my website.
So basic I want to press a button, by pressing it, we query database and return result, the results will be displayed in the bootstrap javascript powered modal: because popup modal is written in javascript and its run after php, the $row is always shown as undefined. I am wondering if there is a way to make php runs before js?
<form action="" method="post">
<input type="text" id="field" name="field">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" name="submit" id="submit">
Launch demo modal
</button>
</form>
<?php
if(isset($_POST['submit'])){
$link = mysqli_connect("myhost","myuser","mypassw","mybd") or die("Error " . mysqli_error($link));
//consultation:
$query = "SELECT name FROM mytable" or die("Error in the consult.." . mysqli_error($link));
//execute the query.
$result = mysqli_query($link, $query);
//display information:
if ($row = mysqli_fetch_array($result)) {
?>
<!-- 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 class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<?php echo $row["name"] . "<br>"; ?>
</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>
<?php
}
}
?>

You are better off separating this request for data to an AJAX request, and then open the modal in the AJAX success callback.
example:
ajax_handler.php:
if(isset($_POST['submit'])){
$link = mysqli_connect("myhost","myuser","mypassw","mybd") or die("Error " . mysqli_error($link));
//consultation:
$query = "SELECT name FROM mytable";
//execute the query.
$result = mysqli_query($link, $query);
$rows = mysqli_fetch_array($result);
//always wrap a response in an 'object' (associative array)
//more infor here: http://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx/
echo json_encode(array('result' => $rows));
}
js code:
$("#submit").on('click', function(){
$.post('ajax_handler.php', {submit: true}, function(data){
var data = JSON.parse(data), markup = '';
for(var i = 0; i < data.result.length; i++){
markup = markup + '<div>' + data.result[i] + '</div>';
}
$('myModal').modal('open');
$('.modal-body').append(markup)
});
});
markup:
<button class="btn btn-primary btn-lg" id="submit">

Related

I don't want to reload the page with post request

I create form, the popup window (in the same file with the form) and the script that creates the post request when the user clicks the button, but when I click the button the page relaoded automatically and the popup window never appears
*I want to pass a parameter from the form to popup window in order to identify the product that the user selected.
My code is below:
*The form is inside of a loop in order to create many items
index.php
while($row = mysqli_fetch_assoc($select_all_products)) {
$product_id = $row['id'];
$product_name = $row['name'];
$product_price1 = $row['price1'];
$product_price2 = $row['price2'];
$product_price3 = $row['price3'];
$product_image= $row['photo'];
?>
<div class="col-lg-6 col-md-6 item-entry mb-4">
<form method="post" >
<a href="#" class="product-item md-height bg-gray d-block">
<?php echo "<img width='300px' height='300px' src='images/$product_image' alt='Image' class='img-fluid'>"; ?>
</a>
<h2 class="item-title"><?php echo $product_name; ?></h2>
<input id="id" type="hidden" name="id" value="<?php echo $product_id; ?>">
<label>shop1: </label>
<strong class="item-price"><?php echo $product_price1 ."\xE2\x82\xAc".str_repeat(' ', 5) ; ?></strong>
<label>shop2 </label>
<strong class="item-price"><?php echo $product_price2 ."\xE2\x82\xAc".str_repeat(' ', 5) ; ?></strong>
<label>shop3 </label>
<strong class="item-price"><?php echo $product_price3 ."\xE2\x82\xAc" .str_repeat(' ', 3) ; ?></strong>
<button type="submit" onclick="loadData(this.getAttribute('data-id'));" data-id="<?php echo $product_id; ?>" class="btn btn-primary btn-sm rounded" data-toggle="modal" data-target="#myModal">Change Price<i class="fas fa-tags"></i></button>
</form>
</div>
<?php
}
?>
popup window :
<!-- 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 class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</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>
script :
<script type="application/javascript">
function loadData(id) {
id.preventDefault();
$.ajax({
url: "price.php",
method: "POST",
data: {get_data: 1, id: id},
success: function (response) {
console.log(response);
}
});
}
</script>
From the console log I found that the post request send it but with reload page and for this reason the the popup window never appears. 1
What I can do in order the page not reloaded ,the pop up appeared get the post request?
Thank you
To prevent the form from being submitted and hence the page refresh, you should call preventDefault on the form's onsubmit event, like this: <form method="post" onsubmit="event.preventDefault()">. It also works returning false like this: <form method="post" onsubmit="return false">.
I've made an example with the php part removed so you can see. Hope this helps.

How to pass data for Bootstraps modal

Trying to pass the value of my button to my bootstrap modal and modal is not receiving any data. The button has its data inside but using the same variable for the modal is not working. Here is my code.
<?PHP
$query = "SELECT * FROM tbl_posts INNER JOIN tbl_user ON tbl_posts.userID = tbl_user.userID WHERE postStatus = 'Show' ORDER BY postDateTime DESC;";
$result = mysqli_query($conn, $query);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<div class="container post" style="border: 1px solid black;">
<h4><?PHP echo $row['userFirstname'] . " " . $row['userLastname']; ?></h4>
<p class="time"><?PHP echo time_elapsed_string($row['postDateTime']); ?></p>
<p class="post"><?PHP echo $row['postDetail'];?></p>
<button data-toggle="modal" data-target="#myModal" type="submit" class="btn btn-lg btn-block" name="postDetail" value="<?PHP echo $row['postID'] ?>"><?PHP echo $row['postID']; ?></button>
<Br>
</div>
<?PHP
?>
<!-- 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">×</button>
<h4 class="modal-title"><?PHP echo $row["postID"]; ?></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal content-->
</div>
</div>
<!-- Modal -->
<?PHP
}
}
?>
The modal is showing but the <?PHP echo $row["postID"]; ?> is showing me only the last row of the database.
your $row is effective in while loop.
if yout want to use only one modal and reuse, you will need to use ajax when click the button.
or move modal section to inside while loop.
pair modal div's id and button's data-target.
each modal must has different id. in your case, postID will be good identifier.
<?PHP
$query = "SELECT * FROM tbl_posts INNER JOIN tbl_user ON tbl_posts.userID = tbl_user.userID WHERE postStatus = 'Show' ORDER BY postDateTime DESC;";
$result = mysqli_query($conn, $query);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<div class="container post" style="border: 1px solid black;">
<h4><?PHP echo $row['userFirstname'] . " " . $row['userLastname']; ?></h4>
<p class="time"><?PHP echo time_elapsed_string($row['postDateTime']); ?></p>
<p class="post"><?PHP echo $row['postDetail'];?></p>
<button data-toggle="modal" data-target="#myModal_<?PHP echo $row['postID']; ?>" type="submit" class="btn btn-lg btn-block" name="postDetail" value="<?PHP echo $row['postID'] ?>"><?PHP echo $row['postID']; ?></button>
<Br>
</div>
<!-- Modal -->
<div id="myModal_<?PHP echo $row['postID']; ?>" 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">×</button>
<h4 class="modal-title"><?PHP echo $row["postID"]; ?></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal content-->
</div>
</div>
<!-- Modal -->
<?PHP
}
}
?>
Try this code:
<?PHP
$query = "SELECT * FROM tbl_posts INNER JOIN tbl_user ON tbl_posts.userID = tbl_user.userID WHERE postStatus = 'Show' ORDER BY postDateTime DESC;";
$result = mysqli_query($conn, $query);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<div class="container post" style="border: 1px solid black;">
<h4><?PHP echo $row['userFirstname'] . " " . $row['userLastname']; ?></h4>
<p class="time"><?PHP echo time_elapsed_string($row['postDateTime']); ?></p>
<p class="post"><?PHP echo $row['postDetail'];?></p>
<button data-toggle="modal" data-target="#myModal" type="submit" class="btn btn-lg btn-block" name="postDetail" value="<?PHP echo $row['postID'] ?>"><?PHP echo $row['postID']; ?></button>
<Br>
</div>
<?PHP
}
}
?>
<!-- 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">×</button>
<h4 class="modal-title"><?PHP echo $_POST["postID"]; ?></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal content-->
</div>
</div>
<!-- Modal -->
Try to change your button to this:
<button class="btn btn-lg btn-block btn-my-button" name="postDetail" data-title="<?php echo $row['postID']; ?>"><?php echo $row['postID']; ?></button>
just put the value that you need with the data-* in the button then add jquery with the class of your button.
jquery:
$('.btn-my-button').click(function(){
$('#myModal .modal-title').text($(this).data('title'));
$('#myModal').modal('show');
});

Insert data from modal to database

I want to make a form appear on a popup window when I click "Add" button. So I am using a modal to show a PHP form but when I tried to save the data inserted into the form into database, it does not work. When I clicked save, a weird URL came out as so :
.../pembelitkatakutest.php?image=025pikachu_xy_anime_3.png&save=
I am not sure, but I think the URL should not have the "image=025pikachu_xy_anime_3.png&" part.
My code is as below:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Add Tongue Twister</button><br><br><br>
<!-- 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 class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Add Tongue Twister</h4>
</div>
<div class="modal-body">
<form method = "POST">
<div class="form-group">
<label for="usr">Please Choose a Picture:</label>
<input type="file" name="image">
<script type="text/javascript">
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
</script>
</div>
<div class="form-group">
<label for="pwd">Please write the tongue twister:</label>
<input type="text" rows = "3" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="save">Save changes</button>
<?php if(isset($_POST['save']))
{
//target folder to keep the media
$target = "images/".basename($_FILES['image']['name']);
//get all submitted data from form
$image = $_FILES['image']['name'];
$text = $_POST['text'];
if(!empty($_FILES['image']['name']))
{
$sql = "INSERT INTO pembelitkataku(image, text) VALUES ('$image','$text')";
mysqli_query($db, $sql);
}
else
{
$message = "Sila pilih semua fail";
echo "<script type='text/javascript'>alert('$message');</script>";
}
move_uploaded_file($_FILES['image']['tmp_name'], $target);
}
?>
</div>
</form>
</div>
May I know what went wrong in my code and what can I do to fix it ?
If it is possible, I want to avoid using Javascript as it is very confusing to understand.
Thank you.
Use <form method="POST" enctype="multipart/form-data">
Because by default your code is making GET request but your PHP code want to receive a POST request. You can see it in this line of code :
if(isset($_POST['save']))

Show data based of selected id on modal popup window after click a button php mysql

On my website, when the button is clicked, it will prompt to a popup window. Im using the modal popup window. My problem is, I cant get the right data that being retrieved based on the id of the button. Below is my code:
The html table:
<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family";
$result = $conn->query($data);
while($ser=mysqli_fetch_array($result))
{
?>
<tr>
<td><center><?php echo $counter;
$counter++; ?></center></td>
<td><center><?php echo $ser['fam_id'];?></center></td>
<td><center><?php echo $ser['fam_name']; ?></center></td>
<td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>
The fam_id is the primary key.
Then, below is the code for modal popup window
<!-- Modal -->
<form id="form1" method="post">
<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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="fam_id">Name <?php echo $ser['fam_name'];?></h4>
</div>
<div class="modal-body">
<b>Details</b>
<hr></hr>
Address: <?php echo $ser['fam_add']; ?><p></p>
Phone_num: <?php echo $ser['fam_phone']; ?><p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
Moreover, Im doing them in one file. In conclusion, it is like below:
<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family";
$result = $conn->query($data);
while($ser=mysqli_fetch_array($result))
{
?>
<tr>
<td><center><?php echo $counter;
$counter++; ?></center></td>
<td><center><?php echo $ser['fam_id'];?></center></td>
<td><center><?php echo $ser['fam_name']; ?></center></td>
<td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>
<!-- Modal -->
<form id="form1" method="post">
<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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="fam_id">Name <?php echo $ser['fam_name'];?></h4>
</div>
<div class="modal-body">
<b>Details</b>
<hr></hr>
Address: <?php echo $ser['fam_add']; ?><p></p>
Phone_num: <?php echo $ser['fam_phone']; ?><p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</td>
</tr>
<?php
}
?>
</tbody>
<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family";
$result = $conn->query($data);
while($ser=mysqli_fetch_array($result))
{
?>
<tr>
<td><center><?php echo $counter; $counter++; ?></center></td>
<td><center><?php echo $ser['fam_id'];?></center></td>
<td><center><?php echo $ser['fam_name']; ?></center></td>
<td>
<center>
<a class="modalLink" href="#myModal" data-toggle="modal" data-target="#myModal" data-id="<?php echo $ser["fam_id"]; ?>" data-addr="<?php echo $ser['fam_add']; ?>" data-phone="<?php echo $ser['fam_phone']; ?>" data-name="<?php echo $ser['fam_name']; ?>">
<button class="btn btn-primary btn-sm">
Edit Attendance Status
</button>
</a>
</center>
Place this code in footer.php or end of this page.
<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>
</div>
</div>
Call your 'somepage.php' (Separate page.Where modal-body is present) through ajax. Place this <script></script> in your JS file.
<script>
$('.modalLink').click(function(){
var famID=$(this).attr('data-id');
var famAddr=$(this).attr('data-addr');
var famPhone=$(this).attr('data-phone');
var famName=$(this).attr('data-name');
$.ajax({url:"somepage.php?famID="+famID+"&famAddr="+famAddr+"&famPhone="+famPhone+"&famName="+famName,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
somepage.php
Create somepage.php (If you want to change this page name. Change in <script></script> too. Both are related.)
<?
$famID=$_GET['famID'];
$famAddr=$_GET['famAddr'];
$famPhone=$_GET['famPhone'];
$famName=$_GET['famName'];
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="fam_id">Name <?php echo $famName;?></h4>
</div>
<div class="modal-body">
<form id="form1" method="post">
<b>Details</b>
<hr></hr>
Address: <p><?php echo $famAddr;?></p>
Phone_num: <p><?php echo $famPhone;?></p>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

Retrieving PHP variables to Bootstrap Modal

Okay, so i am developing a class project and I'm building a website with basic functionality. I'm new to php and javascript.
So here is the problem. I have created a database in phpMyAdmin called 'itemdb'. I am able to add items to it through html+php and also delete them. Now what i want to do is to edit the data in the database and that is where I can't find a fix for it.
This is what my idea is.
1. clicks on edit button.
2. Opens Bootstrap Modal.
3. Displays the item information.
4. Hits save changes. Database updated.
My problem is If I set the button/input type to "submit" surrounded with a form tag the modal will crash.
However, the current code below does not have a form tag and the button is set as type"button" and when I click the button, it only displays one item's information even if I click another button(same data).
Here is my code.
for testing purpose, I have created a table displaying "hello" in the first row and a button in the second row, and when I click the button, it shall display the info in the modal.
<div class = "row col-xs-10 col-sm-10 col-md-10 col-lg-10 ">
<?php
include 'connectDB.php';
$query = "SELECT * FROM `itemdb`;";
$result = mysqli_query($dbconnect, $query);
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{?>
<table>
<tr>
<td>Hellow</td>
<td>
<?php
echo "
<button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#exampleModal\"
data-whatever=\"editDB[" . $row['itemID'] . "]\" onclick=\"window.Socation.href = 'adminItems3.php?value=" . $row['itemID'] . "'\";>Edit</button>
";?>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<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" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<?php
if(!empty($row['itemID'])){
$ID = $row['itemID'];
echo $ID;
$query1 = "SELECT * FROM `trademe`.`itemdb` WHERE `itemdb`.`itemID` = $ID;";
$result1 = mysqli_query($dbconnect, $query1);
if(mysqli_num_rows($result1) > 0){
$row1 = mysqli_fetch_assoc($result1);
echo "
<table class=\"table-striped\">
<tr>
<td class = \"imgBoxCol\">
<img class=\"imgBox img-rounded imgBox\"src=\"" . $row1['img_path'] . "\"></img>
</td>
<td>
<p >Ad Title: <input name=\"editadTitle\" value=\"" . $row1['adTitle'] . "\"/></p>
<p>Item Name:<input name=\"edititemName\" value=\" " . $row1['itemName'] . "\"/> </p>
<p>Condition:<textarea name=\"editcond\" type=\"text\" >" . $row1['cond'] . "</textarea></p>
<p>Description:<textarea name=\"editdescription\" type=\"text\" > " . $row1['description'] . " </textarea></p>
<p>Method:<input name=\"editmethod\" value=\"" . $row1['method'] . " \"/></p>
<p>Category:<input name=\"editcategory\" value=\"" . $row1['category'] . " \"/></p>
</td>
</tr>
</table>
";
}}?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
<?php//opening php// ending html code.
}
}
?>
</div>
script
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var Eid = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + Eid)
modal.find('.modal-body input').val(Eid)
// document.location="adminItems3.php?idSelected=" + Eid
})
I have been trying to fix this for days. If you guys have better ideas of passing at least the item ID somehow, so that my modal will be able to retrieve it, then that would be really great!
Is there any way to pass the variable, so that i can retrieve it through my modal without crashing?
[Image of the 3rd button when clicked][2]
it displays the information of the first buton
Thanks again !!
enter image description here
I've given the simplest way to open a modal dialog of bootstrap. It will help. Work according to this calmly. Keep patience. Follow the code as it is. It will help you.
<div class = "row col-xs-10 col-sm-10 col-md-10 col-lg-10 ">
<?php
include 'connectDB.php';
$query = "SELECT * FROM `itemdb`;";
$result = mysqli_query($dbconnect, $query);
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{?>
<table>
<tr>
<td>Hellow</td>
<td>
<a class="ItemID" href="#exampleModal" data-toggle="modal" data-whatever="<?echo $row['itemID'];?>">
<input type='button' class='btn btn-primary' value="Edit">
</a>
</td>
</tr>
</table>
<?php//opening php// ending html code.
}
}
?>
</div>
In Your Footer, Place this code
<div id="exampleModal" class="modal fade" aria-hidden="true" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
In Script
<script>
$('.ItemID').click(function(){
var ItemID=$(this).attr('data-whatever');
$.ajax({url:"NewPage.php?ItemID="+ItemID,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
NewPage.php
([NOTE: Remember, this page name is also used in script tag. So, if you change this name of page. You have to change the same page name in script tag which i gave])
<?
include 'connectDB.php';
?>
<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" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<?php
if(!empty($_GET['ItemID']))
{
$ID = $_GET['ItemID'];
echo $ID;
$query1 = "SELECT * FROM `trademe`.`itemdb` WHERE `itemdb`.`itemID` = $ID;";
$result1 = mysqli_query($dbconnect, $query1);
if(mysqli_num_rows($result1) > 0)
{
$row1 = mysqli_fetch_assoc($result1);
echo "
<table class=\"table-striped\">
<tr>
<td class = \"imgBoxCol\">
<img class=\"imgBox img-rounded imgBox\"src=\"" . $row1['img_path'] . "\"></img>
</td>
<td>
<p >Ad Title: <input name=\"editadTitle\" value=\"" . $row1['adTitle'] . "\"/></p>
<p>Item Name:<input name=\"edititemName\" value=\" " . $row1['itemName'] . "\"/> </p>
<p>Condition:<textarea name=\"editcond\" type=\"text\" >" . $row1['cond'] . "</textarea></p>
<p>Description:<textarea name=\"editdescription\" type=\"text\" > " . $row1['description'] . " </textarea></p>
<p>Method:<input name=\"editmethod\" value=\"" . $row1['method'] . " \"/></p>
<p>Category:<input name=\"editcategory\" value=\"" . $row1['category'] . " \"/></p>
</td>
</tr>
</table>
";
}
}?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
All your modals have the same ID "exampleModal" so only the first one is shown when modal is triggered.
Try to make ID like
$myModalID = "exemplaModal_".$row['ID'];
in both
data-target=\"#<?php echo $myModalID?>\" //I forget to let the hastag here, my bad
AND
class="modal fade" id="<?php echo $myModalID?>".
PS : you have a mistake
onclick=\"window.Socation.href"
Its not Socation but Location
EDIT :
<div class = "row col-xs-10 col-sm-10 col-md-10 col-lg-10 ">
<?php
include 'connectDB.php';
$query = "SELECT * FROM `itemdb`;";
$result = mysqli_query($dbconnect, $query);
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{
// HERE you declare your modal ID
$myModalID = "exemplaModal_".$row['ID'];
?>
<table>
<tr>
<td>Hellow</td>
<td>
<?php
///!\ HERE : Dont forget to let the hashtag in data-taget : data-target="# <---
echo "
<button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#<?php echo $myModalID?>\"
data-whatever=\"editDB[" . $row['itemID'] . "]\" onclick=\"window.Socation.href = 'adminItems3.php?value=" . $row['itemID'] . "'\";>Edit</button>
";
?>
<!-- And Here juste add the normal echo $myModalID -->
<div class="modal fade" id="<?php echo $myModalID?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<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" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<?php
if(!empty($row['itemID'])){
$ID = $row['itemID'];
echo $ID;
$query1 = "SELECT * FROM `trademe`.`itemdb` WHERE `itemdb`.`itemID` = $ID;";
$result1 = mysqli_query($dbconnect, $query1);
if(mysqli_num_rows($result1) > 0){
$row1 = mysqli_fetch_assoc($result1);
echo "
<table class=\"table-striped\">
<tr>
<td class = \"imgBoxCol\">
<img class=\"imgBox img-rounded imgBox\"src=\"" . $row1['img_path'] . "\"></img>
</td>
<td>
<p >Ad Title: <input name=\"editadTitle\" value=\"" . $row1['adTitle'] . "\"/></p>
<p>Item Name:<input name=\"edititemName\" value=\" " . $row1['itemName'] . "\"/> </p>
<p>Condition:<textarea name=\"editcond\" type=\"text\" >" . $row1['cond'] . "</textarea></p>
<p>Description:<textarea name=\"editdescription\" type=\"text\" > " . $row1['description'] . " </textarea></p>
<p>Method:<input name=\"editmethod\" value=\"" . $row1['method'] . " \"/></p>
<p>Category:<input name=\"editcategory\" value=\"" . $row1['category'] . " \"/></p>
</td>
</tr>
</table>
";
}}?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
<?php//opening php// ending html code.
}
}

Categories