I have a list created dinamically using php
while($row = $result->fetch_assoc()){ //$row is a row fetched from my database
<tr>
<td><?php echo $row['id']?></td>
<td><?php echo $row['name']?></td>
<td><?php echo $row['surname']?></td>
<td><a href="#Modal" <?php echo "id= " . $row['username'] ?> class="btn btn-small btn-info" data-toggle="modal" > Vedi</a></td>
</tr>
}
Modal is something like this:
<div id="Modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-header">
<a class="close" data-dismiss="modal" aria-hidden="true">×</a>
<h3 id="myModalLabel">user information</h3>
</div>
<div class="modal-body" id="loadInfo">
<div class="row-fluid">
<div class="span12">
<!-- my php code here -->
</div>
</div>
</div>
</div>
My php code must be referred to a precise user. So I need that the Modal can receive this the id of the in order to execute the proper php code.
How can I obtain this result?
assign the values of the user info to javascript variables. Add a data attribute to the modal toggle buttons like data-user_id=<?php echo $row['id']; ?> and make a jquery click handler to update the modal's content to match the button you clicked.
Related
I have a table showing the summary for every ticket submitted from user.
Every line of this table has a "Charge Exp" button, that opens a modal that allows to load the expenses for every ticket opened from the user.
<table id="ticketList" class="table table-striped table-hover">
<thead>
<!-- header fields -->
</thead>
<tbody>
<?php
if($numrows_ticket > 0 ) {
if($numrows_ticket < $limit){
$limit = $numrows_ticket;
}
for($i = $paginationStart; $i < ($paginationStart+$limit);$i++){
?>
<tr>
<td><?php echo $arr[$i]['jira_id'];?></td>
<td><?php echo $arr[$i]['project'];?></td>
<td><?php echo date_format(date_create($arr[$i]['data']), "d/m/y H:i");?></td>
<td><?php echo $arr[$i]['id_user'];?></td>
<td><?php echo "xXstatusXx";?></td>
<td><button id="btnExp" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#chargeExpenses"><?php echo "Charge Exp"?></button>
<!-- Modal -->
<div class="modal" id="chargeExpenses" tabindex="-1" role="dialog" aria-labelledby="expensesForm" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">
<?php include "load_expenses.php";?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
When I write the data into the fields of the modal (without submitting), the same content appears if I close, go to a different line and open a new modal. When I submit, multiple forms for every line of the table are submitted.
load_expenses.php:
<?php error_log("counter load exp: ".$i);?>
<form action="xxx.php" method="post" id="exp_form-<?php echo $i?>" class="spellcheck exclusive save" name="dett2-<?php echo $i?>" enctype="multipart/form-data">
In the log I have $i from 0 to 9, as I'd expect. The id and name of the form is however always 0.
What's wrong and what could be the best way to do it?
you have only one modal and whenever you add something to it it stays there just gets hide when you close the modal .
There can be some options to do it one of them can be that you use modal id different for each modal like
<div class="modal" id="chargeExpenses[$x]" tabindex="-1" role="dialog" aria-labelledby="expensesForm" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">
<?php include "load_expenses.php";?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and when you open up the modal just pass the id of the row you clicked
so i have a while loop and i am fethcing the name and the description of them from my db
so when ever i click on one of the parts i want the modal to display the name of the item that i clicked on in the modal i hope this picture would describe it better
below is the code i have so far
at the moment when i click on the modal i get displayed the name of the item which is first on the list no matter where i click
while($row = mysqli_fetch_assoc($result))
{
$name= $row['name_of_product'];
$description = $row['description']
?>
<a href="#" data-toggle="modal" data-target="#mymodal">
<div class="col-sm-4">
<?php echo name; ?>
<?php echo description ; ?>
</div>
</a>
<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">Modal Header</h4>
</div>
<div class="modal-body">
<p><?php echo $name; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php } ?>
You are not doing things the way you have to do. You are re-creating your mymodal for every iteration of your while loop which is not a better way to achieve what you want.
Follow these steps:
Create your mymodal outside of your while loop.
Pass the ID of current row to a javascript function and populate the data of that id using javascript.
I have set the things which needs to be done. Try the following code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--- display table header row-->
<table style="width:100%">
<tr>
<th>name</th>
<th>description</th>
<th>Action</th>
</tr>
<?php
while($row = mysqli_fetch_assoc($result))
{
$name= $row['name_of_product'];
$description = $row['description'];
$id = $row['id']; // I am assuming that your table has auto incremented primary key column by the name of id, if not then replace that by $row['your_id_column']
?>
<!--- desplay the data in a table row -->
<tr>
<td id="<?php echo "name_".$id; ?>"><?php echo $name; ?></td>
<td id="<?php echo "description_".$id; ?>"><?php echo $description ; ?></td>
<td><div href="#" data-toggle="modal" data-target="#mymodal" onClick="showModal(<?php echo $id ; ?>)">Edit</div></td>
</tr>
<?php } ?>
</table>
<!--- Your 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">Modal Header</h4>
</div>
<div class="modal-body">
<p id="name"></p> <!--- name will be shown here-->
<p id="description"></p><!--- description will be shown here-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
function showModal(id)
{
// setting the values of clicked item in the bootstrap Modal
$("#name").text($("#name_"+id).text());
$("#description").text($("#description_"+id).text());
}
</script>
Looks like you are not serializing the modals... If you wanted to do things that way your code should be something like;
<!-- language-all: lang-html -->
while($row = mysqli_fetch_assoc($result)) {
$procuct_id = $row['ID'];
$name = $row['name_of_product'];
$description = $row['description']
?>
<a href="#" data-toggle="modal" data-target="#mymodal_<?php echo $procuct_id;?>">
<div class="col-sm-4">
<?php echo name; ?>
<?php echo description ; ?>
</div>
</a>
<div id="mymodal_<?php echo $procuct_id;?>" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p><?php echo $name; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php }
<--
A Better way to do it would be to write a javascript function to show the generic modal window, then run an ajax call to load your info into the "modal-body" div. You would have to pass a unique id to the call in order to have your ajax script hit the db and get the info to display.
It's been almost 4 years but I'm writing for everyone; change data-target(id) as row id.
edited code:
while($row = mysqli_fetch_assoc($result))
{
$name= $row['name_of_product'];
$description = $row['description']
?>
<a href="#" data-toggle="modal" data-target="#<?php echo $row['id']; ?>">
<div class="col-sm-4">
<?php echo name; ?>
<?php echo description ; ?>
</div>
</a>
<div id="<?php echo $row['id']; ?>" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p><?php echo $name; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php } ?>
I have a html table with list of Product Name and ID, upon clicking the Product Name Link I wanted to open a Modal and show the Item with respect to ID.
I wanted to pass $code to the Model and retrieve data. How should I do?
My code below..
Product 1
Product 2
<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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<?
$code_id = isset($_GET['code']) ? $_GET['code'] : false;
$result = $db->prepare("SELECT * FROM $tbl_name WHERE id=:code LIMIT 1");
$result->bindValue(':code', $code_id, PDO::PARAM_STR);
$result->execute();
$row = $result->fetch(PDO::FETCH_ASSOC);
$unit = $row['unit']; $name = $row['name']; $price = $row['price'];
?>
<table class="table">
<tr>
<th style="text-align: center;">#</th>
<th style="text-align: center;">Unit</th>
<th style="text-align: center;">Product Name</th>
<th style="text-align: center;">Price</th>
</tr>
<tr>
<td><? echo $i; ?></td>
<td><? echo $unit; ?></td>
<td><? echo $name; ?></td>
<td><? echo $price; ?></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
I realized Logan's answer wouldn't work because he was targeting classes instead of Ids. data-target for each link to modal should be a unique id. I created a variable $uid (unique identifier), and initialised it to one (alternatively you could use your primary key). Each modal will have an id of myModal+$uid, and each link will point to a specific modal's id.
<?php
$code_id = isset($_GET['code']) ? $_GET['code'] : false;
$result = $db->prepare("SELECT * FROM $tbl_name WHERE id=:code LIMIT 1");
$result->bindValue(':code', $code_id, PDO::PARAM_STR);
$result->execute();
//checks if there are results before sending it to the while loop
if ($result->num_rows > 0) {
$uid = 1;//alternatively you can use your primary key from the table
while($row = $result->fetch_assoc()){
?>
Product <?echo $uid?>
<!-- start modal, realise the id of each modal -->
<div class="modal fade" id="myModal<?php echo $uid; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal fade">
<!--the rest of your code-->
</div>
<?php
$uid = $uid +1;//increase uid
}// end while
}//end if statement ?>
The data-target of your link would determine what modal to open. So you have to link the attribute of data-target by having the class attribute of your modal the same with the data-target attribute of your link.
Try this:
while(/* YOUR CONDITION FOR FETCHING DATA FROM YOUR DB */){
?>
Product 1
<?php
<!-- START OF MODAL -->
<div class="modal fade myModal<?php echo $uniqueid; ?>" .....>
<!-- REST OF MODAL CODE -->
</div>
} /* END OF LOOP */
Just replace the $uniqueid with your primary key.
I have a list of database records on my page. Each record have there own edit button. When i click on the edit button a modal shows up and i can do my process there in a form. But i can't figure out how i can get the selected record to my update query.
For now i have 3 records with an project name. Lets say i want to edit the second record in the list, I always get the values from the first record but i want the second record. So i would like to know how i can get the values from a selected record.
<!-- Get all projects in the database -->
<?php $result = mysqli_query($connection, "SELECT project_name, project_completion FROM project");
while ($project = mysqli_fetch_assoc($result)){ ?>
<tr>
<td><span class="glyphicon glyphicon-ok"></span></td>
<td><?php echo $project["project_name"]; ?></td>
<td>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</td>
<td><?php echo $project["project_completion"]?>%</td>
<!-- edit button on click to modal -->
<td><a data-toggle="modal" data-target="#myModalEdit" class="btn-sm btn btn-warning"><span class="glyphicon glyphicon-pencil"></span></a>
<!-- remove button -->
<span class="glyphicon glyphicon-remove"></span></td>
<!-- Modal -->
<div class="modal fade" id="myModalEdit" 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>
<h4 class="modal-title" id="myModalLabel"> Edit project</h4>
</div>
<div class="modal-body">
<!-- do process with selected record -->
</div>
</div>
<div class="modal-footer">
<input type="submit" name="saveProject" value="Add" class="btn btn-success"/>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</tr>
<?php } ?><!-- end while -->
Assign different id to every popup.
<?php $i++; ?>
<a data-toggle="modal" data-target="#myModalEdit-<?php echo $i;?>" class="btn-sm btn btn-warning"><span class="glyphicon glyphicon-pencil"></span></a>
Assign $i=0; before while loop start.
Then also change modal popup id like below:
<div class="modal fade" id="myModalEdit-<?php echo $i;?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Update above edit and modal popup line. Then try.
You have to use some type of identification. For example lets say you has the following code for a button
<button type="button" class="btn btn-primary editor" data-target=<?php echo $project['id']; ?>>Edit Something</button>
<div id="returnbuffer" style="display: none;"></div>
Then in javascript later on you have the following code
<script>
$(document).ready(function() {
$('editor').click(function() {
$('#returnbuffer').load('editRecord.php?id=' + $(this).attr('data-target'));
});
});
</script>
Then you just have a php file in the same directory that usses get protocol and changes the database.
Just to explain what is actually happening here, when the button is clicked javascript runs a php file and sends information on which record (with what ID) should be changed.
There are different ways for this to do. like :-
When creating the list of records in your php loop apply a "onclick" event to your edit button which will have records primary key as parameter. When ever edit button is clicked this function will be called and through ajax you can fetch data of this record and display. And at the time of saving the data again call ajax and save the data. In this you have to call two ajax method i.e for saving and for fetching the data.
Or you can use same page with different Post variables. Like when edit button is cliked reload the same page with id appended to it url. Check the url if its appended with any records id variable, if yes then show form to edit, make changes and submit or else show only records.
Try this:
Step 1: In your select query, get auto increment value also (for example - any id)
step 2: Then set one hidden field which contains your increment id
for example:
<input type="hidden" name="test" value="<?php echo your id value?>">
when submit your form you will get which row will be updated
Some changes in your code:
<?php $result = mysqli_query($connection, "SELECT project_id,project_name, project_completion FROM project"); ?>
..........................
..........................
<div class="modal-footer">
<form>
<input type="hidden" name="projectid" value="<?php $project['project_id'] ?>">
<input type="submit" name="saveProject" value="Add" class="btn btn-success"/>
</form>
</div>
i have a problem. I have some php script that create list of post in my database.
this is the code
<td><?php echo "$r[date_create]"; ?></td>
<td><?php echo "$r[date_update]"; ?></td>
<td><?php echo "$r[hitcount]"; ?></td>
<td>
<i class="icon-pencil"></i>
<a href="#myModal" role="button" data-toggle="modal" id="<?php $r[id]; ?>">
<i class="icon-remove"></i></a>
</td>
This syntax is calling a modal called MyModal
as you can see, the anchor (
<a href="#myModal"
) getting some id based on database
But i can't by pass the value generated from the php script to my modal window
here's the modal window syntax
<div class="modal small hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Delete Confirmation</h3>
</div>
<div class="modal-body">
<p class="error-text">Are you sure you want to delete the post?</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<a class="btn btn-danger" data-dismiss="modal" href="delete.php?id=THE ID SHOULD BE HERE ">Delete</a>
</div>
</div>
I want to the ID from anchor above is place on the delete.php?id=THE ID SHOULD BE HERE
how to do that?
thank you in advance
You will have to manually open the modal box, instead of relying on the data attributes to do the job. A pseudo-code could be like this:
$(function() {
// Attach a click handler to your link
$('#modal_opener').click(function() {
// Open the modal box
$('#myModal').modal('show');
// Set the id to the hidden field
$('#id_on_your_modal').val("<?php print $r[id] ?>");
});
});
Remember that the javascript code must be in the same page of your html code, so you can have access to your php variables.