I have searched a lot and am still having some trouble passing a Unique Id to a Value and then using that ID for a PHP MySQL Query to get the book info.
I currently am passing the unique ID to the Modal and Displaying it through an input type text. I am just having a hard time figuring out how to put the id into a php Variable
Here is my HTMl/PHP code
echo '<a data-toggle="modal" data-id="' . $book_id .'" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">View Info</a>';?>
<!-- Modal -->
<div class="modal hide" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Book Info</h3>
</div>
<div class="modal-body">
<p>some content</p>
<?php
echo $test = '<input type="text" name="bookId" id="bookId"/>';
$book_info = get_book_info($book_id);
while($row1 = mysqli_fetch_array($book_info))
{
$email = $row['email'];
echo "<p><strong>Title: </strong>" . $row1['title'] . "</p>";
echo "<p><strong>Author: </strong>" . $row1['author'] . "</p>";
echo "<p><strong>Edition: </strong>" . $row1['edition'] . "</p>";
echo "<p><strong>ISBN: </strong>" . $row1['isbn'] . "</p>";
echo "<p><strong>Price: </strong>" . $row1['price'] . "</p>";
echo "<p><strong>Seller's Name: </strong>" . $row1['name'] . "</p>";
echo "<p><strong>Seller's E-mail: </strong><a href='mailto:$email'>$email</a></p>";
}?>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
here is my jquery
$(document).on("click", ".open-AddBookDialog", function () {
var myBookId = $(this).data('id');
$(".modal-body #bookId").val( myBookId );
});
You need to echo the value:
data-id="<?php $book_id ?>"
Use this instead:
data-id="<?php echo $book_id; ?>"
You could do something like this by javascript/coffee script.
($ "a[data-toggle=modal]").click ->
target = ($ #).attr('data-target')
url = ($ #).attr('href')
($ target).load(url)
URL = unique ID
Related
I currently have a Bootstrap Table displaying some data from a SQL DB with the ability to edit each row seperately with the options Consign, Edit and Delete. Consign simply changes the consign value in the DB from No to Yes.
It's more likely that multiple rows will be consigned at once so the aim is to be able to select mutiple using the built in checkboxes and then click the Consign button on the toolbar. This would then open a modal to confirm the action and then apply the changes to the DB - i.e. change all the selected rows consign value from No to Yes.
I've managed to get the button to only work when the checkboxes are selected and I've also created a modal which appears when clicking the button if it's active. There are a couple of hidden inputs in there for the DB update (a select option showing Yes and today's date).
I guess I'm stuck at the point of how do I get the IDs (called no here) of my rows over to allow the DB to be updated. I've tried to MacGyver a few suggestions on here together but nothing has worked so far, so any suggestions would be immensly appreciated.
This is the code I have so far.
HYML Table - records.php
<div class="datatable-dashv1-list custom-datatable-overright">
<div id="toolbar">
<button id="consigned" class="btn btn-warning btn-md" data-toggle="modal" data-target="#modal_form" disabled><i class="glyphicon glyphicon-check"></i> Consign Selected</button>
</div>
<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<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">Consign Multiple Entries</h4>
</div>
<form action="#" id="form" class="form-horizontal">
<div class="modal-body form">
<input type="hidden" value="" name="no"/>
<div class="form-body">
<div class="form-group">
<p class="text-center">Are you sure you want to consign the selected items?</p>
<div class="col-md-9">
<select class="form-control" name="consigned" style="visibility:hidden;" required readonly>
<option value="Yes">Yes</option>
</select>
</div>
</div>
<div class="form-group">
<!-- below list_check shows the IDs of the rows selected -->
<label class="control-label col-md-3">* This is supposed to be hidden value</label>
<div class="col-md-9">
<input name='list_check'>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<button type="submit" id="btnConsign" class="btn btn-success"><span class="glyphicon glyphicon-check"></span> Consign</button>
</div>
</form>
</div>
</div>
</div>
<table id="table" data-toggle="table" data-id-field="no" data-select-item-name="no" data-sort-name="no" data-sort-order="asc" data-pagination="true" data-page-list="[10, 25, 50, 100, 200, All]" data-search="true" data-searchable="true" data-show-columns="true" data-show-pagination-switch="true" data-key-events="true" data-show-toggle="true" data-resizable="true" data-cookie="true"
data-cookie-id-table="saveId" data-show-columns-toggle-all="true" data-show-export="true" data-export-types="['xlsx', 'pdf']" data-export-options="{}" data-click-to-select="true" data-filter-control="true" data-filter-control-visible="true" data-filter-show-clear="true" data-show-refresh="false" data-maintain-meta-data="true" data-cookie="true" data-cookie-id-table="wasteId" data-cookie-expire="3h" data-toolbar="#toolbar">
<thead>
<tr>
<th data-field="selected" data-checkbox="true">Select</th>
<th data-field="no" data-sortable="true" data-sorter="dateSorter" data-visible="false">No</th>
<th data-field="location" data-sortable="true" data-filter-control="select" data-filter-control-placeholder="Select Location">Location</th>
<th data-field="name" data-visible="false">Name</th>
<th data-field="area" data-visible="false">Area</th>
<th data-field="sendto" data-visible="false">Send To</th>
<th data-field="reference">Reference</th>
<th data-field="consigned" data-filter-control="select" data-filter-default="No">Consigned</th>
<th data-field="date_consigned" data-visible="false">Date Consigned</th>
<th data-field="action" class="col-lg-2">Action</th>
</tr>
</thead>
<tbody>
<?php
include 'include/fetch-data.php';
?>
</tbody>
</table>
</div>
PHP fetch-data.php
<?php
include 'include/dbconnect.php';
$sql = "SELECT * FROM Sendlist";
$result = $conn->query( $sql );
if ( $result->num_rows > 0 ) {
while ( $row = $result->fetch_assoc() ) {
echo '<tr>';
echo '<td></td>';
echo '<td>' . $row[ "no" ] . '</td>';
echo '<td>' . $row[ "location" ] . '</td>';
echo '<td>' . $row[ "name" ] . '</td>';
echo '<td>' . $row[ "area" ] . '</td>';
echo '<td>' . $row[ "sendto" ] . '</td>';
echo '<td>' . $row[ "reference" ] . '</td>';
echo '<td>' . $row[ "consigned" ] . '</td>';
echo '<td>' . $row[ "date_consigned" ] . '</td>';
if ( $row[ 'consigned' ] == 'Yes' ) {
echo "<td>
<a href='#consign_" . $row[ 'no' ] . "' class='btn btn-warning btn-sm hide' data-toggle='modal' id='consign' name='consign'><span class='glyphicon glyphicon-check'></span> Consign</a>
<a href='#unconsign_" . $row[ 'no' ] . "' class='btn btn-warning btn-sm' data-toggle='modal' id='unconsign' name='unconsign'><span class='glyphicon glyphicon-check'></span> Unconsign</a>
<a href='#edit_" . $row[ 'no' ] . "' class='btn btn-success btn-sm' data-toggle='modal'><span class='glyphicon glyphicon-edit'></span> Edit</a>
<a href='#delete_" . $row[ 'no' ] . "' class='btn btn-danger btn-sm' data-toggle='modal'><span class='glyphicon glyphicon-trash'></span> Delete</a>
</td>";
}
echo "</tr>";
include( 'include/edit-delete-modal.php' );
echo "</tr>";
}
}
?>
<script>
var $table = $('#table')
var $consigned = $('#consigned')
$(function() {
$table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function () {
$consigned.prop('disabled', !$table.bootstrapTable('getSelections').length)
})
$consigned.click(function () {
var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
return row.id
})
$table.bootstrapTable('getSelections', {
field: 'no',
values: ids
})
$consigned.prop('disabled', true)
})
})
</script>
Just so others can find the answer if needed in the future, I used the following script to get the IDs of my selected rows to pass them through a hidden input in the modal which will then be later used (with explode) to update SQL entries.
<script type="text/javascript">
var $table = $('#table');
function getRowSelections() {
return $.map($table.bootstrapTable('getSelections'), function(row) {
return row;
})
}
$('#consigned').click(function() {
var selectedRows = getRowSelections();
var selectedItems = '\n';
$.each(selectedRows, function(index, value) {
selectedItems += value.no + ',';
});
$('#modal_form').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggers the modal
var recipient = button.data('whatever'); // Extract info from data-* attributes
var modal = $(this);
modal.find(".modal-body input[name='list_check']").val(selectedItems);
});
});
</script>
I am creating my first php app and running into an issue on how I should try and edit a sql entry. I was planning on trying to get a modal window to pop up in order to edit.
When I select the edit link to open the modal window the variable says it is undefined. I am thinking it is because the Modal and variable are added to DOM before I click the link to edit and the variable never gets set. How do I get around this?
<?php
$sql = "SELECT id, image, name, score, points FROM teams";
$result = mysqli_query($conn, $sql);
if(mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result)){
$teams_id = $row["id"];
$teams_image = $row["image"];
$teams_name = $row["name"];
$teams_score = $row["score"];
$teams_points = $row["points"];
// echo "id: " . $teams_id . " image path: " . $teams_image . " name: " . $teams_name . " score " . $teams_score . " points " . $teams_points . "</br>";
echo "<div class='row'>";
echo "<div class='row oval'>";
echo "<div class='col-4 flag {$teams_image}'>";
echo "</div>";
echo "<div class='col-8 text'>";
echo "<p>{$teams_name}</p>";
echo "</div>";
echo "</div>";
// edit and delete button
echo "<a href='add_teams_working.php?edit={$teams_id}' class='btn btn-outline-light btn-sm ml-4 align-self-center' data-toggle='modal' data-target='#editModal'>edit</a>";
echo "<button class='btn btn-outline-light btn-sm ml-1 align-self-center'>delete</button>";
echo "</div>";
}
}else {
echo "No teams added yet";
}
?>
<!-- SET VARIABLE for MODAL -->
<?php
if(isset($_GET['edit'])) {
$edit_id = $_GET['edit'];
$query = "SELECT * FROM teams WHERE id = $edit_id ";
$select_team = mysqli_query($conn, $query);
while($row = mysqli_fetch_assoc($select_team)) {
$edit_id = $row['id'];
$edit_image = $row['image'];
$edit_name = $row['name'];
}
}
?>
Here is modal if needed.
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3>Edit <?php echo $edit_name; ?> </h3>
</div>
<div class="modal-body">
<?php echo $edit_name; ?>
<?php echo $edit_image; ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button class="btn btn-primary" type="button">Save Changes</button>
</div>
</div>
</div>
</div>
I have a problem with my comment system. At the moment it is just simple adding to database sorting and showing under right post on the blog. I am creating, I will implement ajax etc later.
The issue I am having right now is that it shows the last comment on the post below the one I added comment on. So lets say I am adding comment on post 10, it will show comment on post 10 and 11. It sorts correctly, but it duplicates to the post below too. (It doesn't duplicate in database just the way it displays.)
<?php
// Connect to the database
include('../acp/db/db.php');
$link = mysql_connect($dbhost, $dbuser, $dbpassword, $dbname);
mysql_select_db($dbname);
if (!$link) {
die('Could not connect: ' . mysql_error());
}
$result = mysql_query('SELECT * FROM `posts` ORDER BY id DESC') or die(mysql_error());
while($row = mysql_fetch_array($result)) {
$id_post = $row['id'];
echo " <!-- Blog Post Content Column -->
<h1> " . $row['post_title'] . " </h1><p class='lead'>
by <a href='#'>Matt</a></p> <hr>
<p><span class='glyphicon glyphicon-time'>" . $row['date_created'] . "</span></p>
<img class='img-responsive' style='width: 900px;height: 300px;' src=" . $row['post_img'] . "> <hr>
<p class='lead'>" . $row['post_first'] . "</p>
<p>" . $row['post_second'] . "</p> <hr>
<!-- Comments Form -->
<div class='well'>
<h4>Leave a Comment:</h4>
<form id='form'method='POST'action='php/insert-comment.php'>
<input type='hidden' name='post_id' value='$id_post'>
<input type='text' id='comment-name' name='name' placeholder='Your name' />
<input type='text' id='comment-mail' name='mail' placeholder='Your e-mail adress' />
<textarea type='text' name='comment' class='the-new-com' rows='3'></textarea>
<input type='submit' id='submit' class='bt-add-com' value='Submit Comment'></input>
</form>
</div>
<hr>
<div class='media comment-block'>
<a class='pull-left' href='#'>
<img class='media-object' src=' $grav_url' >
</a>
<div class='media-body'>$name
<h4 class='media-heading'>
<small>$date</small>
</h4>
$comment
</div>
</div>";
$resultcomments = mysql_query("SELECT * FROM `comment` WHERE post_id = '$id_post'") or die(mysql_error());
while($affcom = mysql_fetch_assoc($resultcomments)){
$name = $affcom['name'];
$email = $affcom['mail'];
$comment = $affcom['comment'];
$date = $affcom['date'];
$default = "mm";
$size = 35;
$grav_url = "http://www.gravatar.com/avatar/".md5(strtolower(trim($email)))."?d=".$default."&s=".$size;
echo"
<!-- Posted Comments -->
<!-- Comment -->
<div class='media comment-block'>
<a class='pull-left' href='#'>
<img class='media-object' src=' $grav_url' >
</a>
<div class='media-body'>$name
<h4 class='media-heading'>
<small>$date</small>
</h4>
$comment
</div>
</div>";
}
}
?>
I am slowly learning PHP so be easy on me. I feel like the issue is easy to fix, and it is right there I just cannot work out what it is.
I am trying to echo a bootstrap modal with php . I have some data from table database and if I click on button and try to echo modal on If(isset) condition, the modal is not showing.
see my Code Here:
<?php
//insert in persnaol user table
$sql = "SELECT id,date,status FROM $x order by id DESC;";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<div class='border'> ";
echo "";
echo "<form action='#' method='POST'>";
$id = $row['id'];
echo "<input type='show' name='statusid' value='$id' >";
echo "<p> " . $row["status"] ."</p><br>";
echo "<a class='pull-right' ><input type='submit' value='Edit Post' class='btn1' name='editbtn' data-toggle='modal' data-target='#qModal' ></a>";
echo "<small> " . $row["date"]. "</small><br>";
$editid= $row['id'];
echo "</form><br>";
echo "</div>";
echo "<br>";
echo'
<script>
$("form").submit(function(e){
e.preventDefault();
});
</script>';
}
} else {
echo "hello";
}
?>
and my modal html code is here. modal window is not established.
<?php
require'db.php';
if(isset($_POST['editbtn'])){
$x = $_SESSION['username'];
$id=$_POST["statusid"];
echo '<div class="modal fade" id="qModal" role="dialog" >';
echo ' <div class="modal-dialog" style="z-index:1000;">';
echo '<div class="modal-content">';
echo '<div class="modal-header">';
echo ' <button type="button" class="close" data-dismiss="modal">×</button>';
echo ' <h4 class="modal-title">Post Editing.</h4>';
echo ' </div>';
echo ' <div class="modal-body">';
echo ' <P>';
echo $id;
echo '</p>';
echo ' <form>';
echo ' <textarea value="" >hello</textarea>';
echo ' </form>';
echo '</div>';
echo ' <div class="modal-footer">';
echo ' <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
echo ' </div> </div> </div> </div>';
}
?>
Your form is actually submited so you should see the screen blinking, modal display but the page is reloaded.
To prevent this you can prevent the default form submit action with jQuery for example or remove your form.
As you have Bootstrap activated for your modal I assume you also have jQuery, try to add this at the end of your php script:
echo'
<script>
$("form").submit(function(e){
e.preventDefault();
});
</script>';
EDIT1:
I made a test file and It works for me, here is what's in my file:
<?php
echo '
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>';
$id=7;
echo '<div class="modal fade" id="qModal" role="dialog" >';
echo ' <div class="modal-dialog" style="z-index:1000;">';
echo '<div class="modal-content">';
echo '<div class="modal-header">';
echo ' <button type="button" class="close" data-dismiss="modal">×</button>';
echo ' <h4 class="modal-title">Post Editing.</h4>';
echo ' </div>';
echo ' <div class="modal-body">';
echo ' <P>';
echo $id;
echo '</p>';
echo ' <form>';
echo ' <textarea value="" >hello</textarea>';
echo ' </form>';
echo '</div>';
echo ' <div class="modal-footer">';
echo ' <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
echo ' </div> </div> </div> </div>';
echo "<div class='border'> ";
echo "";
echo "<form action='#' method='POST'>";
$id = 2;
echo "<input type='show' name='statusid' value='$id' >";
echo "<p> " . "here" ."</p><br>";
//**edit button is here**
echo "<a class='pull-right' ><input type='submit' value='Edit Post' class='btn1' name='editbtn' data-toggle='modal' data-target='#qModal' ></a>";
echo "<small> " . "date". "</small><br>";
$editid= 2;
echo "</form><br>";
echo "</div>";
echo "<br>";
echo'
<script>
$("form").submit(function(e){
e.preventDefault();
});
</script>';
I have a page displaying data from an array. When the user click on one of the picture displayed, I would need to save the value $row["Rif"] as I'd need to display the item details in another page.
I was looking around but it seems that Jquery, Ajax are the only available solutions but I don't know these.
Is there any way to implement it using just PHP?
Thank you!
<?php
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<div class='col-md-3 col-sm-6 col-xs-12'>
<div class='property-container'>
<div class='property-image'>
<img src='img/img02.jpg' alt='test theme'>
<div class='property-price'>
" . $row["DescCom"] . "<br>
<span>" . "€ ". $row["Pre"] . " </span>
</div>
<div class='property-status'>
<span>" . $row["Rif"] . "</span>
</div>
</div>
<div class='property-features'>
<span><i class='fa fa-home'></i> " . $row["Mq"] . " m<sup>2</sup></span>
<span><i class='fa fa-hdd-o'></i> " . $row["Cam"] . " Cam</span>
<span><i class='fa fa-male'></i> Piano " . $row["Pia"] . " </span>
</div>
<div class='property-content'>
<h3>" . $row["TIP"] . "<small>" . $row["Fra"] . "</small></h3>
<button type='submit' name='submit' class='btn btn-default btn-warning btn-xs pull-right btn-dettagli'>Details</button>
</div>
</div>
</div>";
}
} else {
echo '0 results';
}
$conn->close();
?>
Assuming the data is stored in $row["Rif"]
<?php
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<div class='col-md-3 col-sm-6 col-xs-12'>
<div class='property-container'>
<div class='property-image'>
// if this is the image you can hyper-link it to next page that will carry the id as well.
<img src='img/img02.jpg' alt='test theme'>
<div class='property-price'>
" . $row["DescCom"] . "<br>
<span>" . "€ ". $row["Pre"] . " </span>
</div>
<div class='property-status'>
<span>" . $row["Rif"] . "</span>
</div>
</div>
<div class='property-features'>
<span><i class='fa fa-home'></i> " . $row["Mq"] . " m<sup>2</sup></span>
<span><i class='fa fa-hdd-o'></i> " . $row["Cam"] . " Cam</span>
<span><i class='fa fa-male'></i> Piano " . $row["Pia"] . " </span>
</div>
<div class='property-content'>
<h3>" . $row["TIP"] . "<small>" . $row["Fra"] . "</small></h3>
<button type='submit' name='submit' class='btn btn-default btn-warning btn-xs pull-right btn-dettagli'>Details</button>
</div>
</div>
</div>";
}
} else {
echo '0 results';
}
$conn->close();
?>
if this is the image you can hyper-link it to next page that will carry the id as well.
<img src='img/img02.jpg' alt='test theme'>