I have this table:
Here's code of this page:
<?php
include('footer.php');
include('../models/fetchQuotes.php');
$content = file_get_contents("http://test/MY_API/getAllTopics");
$arrayId = array();
$arrayName = array();
$arrayImg = array();
foreach (json_decode($content, true) as $eventrType => $events) {
array_push($arrayId, $events[id]);
array_push($arrayName, $events[name]);
array_push($arrayImg, $events[img]);
}
?>
<div class="container">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Img</th>
<th>Option 1</th>
</tr>
</thead>
<tbody>
<?php for ($i=0;$i<count($arrayId);$i++) { ?>
<tr>
<td><?php echo ($arrayId[$i])." "; ?></td>
<td><?php echo ($arrayName[$i])." "; ?></td>
<td><img src="<?php echo ($arrayImg[$i])." ";?>" alt="" width="75", heigth="75"></td>
<td> <button class="btn btn-danger" id="deleteById" value=<?= ($arrayId[$i]); ?> onclick="myFunction()">DELETE</button>
<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>
<h4 class="modal-title" id="myModalLabel">Ошибка</h4>
</div>
<div class="modal-body" id ="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div></td>
</tr><?php } ?>
</tbody>
</table>
</div>
<script>
function myFunction(){
var deleteById = document.getElementById('deleteById').value;
alert(deleteById);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
I parse my own API and then fill it into a table. Now when I click on any button DELETE, every time I have the same alert "12". I understand why its happen, but i can't figure out how make it correct.
How do I associate each button with the corresponding cell ID?
Sorry for language mistakes and thanks for helping.
The problem is that you can only have only one id in a page, but as you are giving that button an id inside a loop different elements are getting same id.
To fix this, you can always use class. But your according to your approach use something like this.
<button class="btn btn-danger" onclick="myFunction(<?= ($arrayId[$i]); ?>)">DELETE</button>
And in javascript
function myFunction(id){
alert(id);
}
I hope this helps you.
Cheers :)
I advise you to pass current ID as a function parameter:
<button class="btn btn-danger" value=<?= ($arrayId[$i]); ?> onclick="myFunction(<?= ($arrayId[$i]); ?>)">DELETE</button>
And function signature will be:
function myFunction(idToDelete){
alert(idToDelete);
}
Also I delete id attribute from button as it's not required. And if you want to use same id for multiple elements in future - don't, as id must be unique on html-page.
please change your code as per image it will work
Related
I'm trying to get the file name of pdf/image to display it in a table locally. When I get the name of the file, I want it to be in a <a> tag which then href to the hidden pop out div inside it is <embed>. The problem is that the value of the src does not change and all the file names are the same (it takes the first name for all)
Here is my code:
while($row=mysql_fetch_assoc($search)){
?>
<div aria-hidden="true" role="dialog" tabindex="-1" id="login-forms" class="modal leread-modal fade in">
<div class="modal-dialog">
<div class="modal-header">
<button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true">X</span>
</button>
</div>
<div class="modal-body" name="place">
<embed src="stuUploads/<?php echo $row['upload'];?>" id="up" type="application/pdf" width="600px" height="500px" />
</div>
<div class="modal-footer footer-box">
</div>
</div>
</div>
I used jQuery to change the value of the src attribute in the <embed> tag, but the result is the last name of the file (last row in the database)
Here is the code
<script>
$(document).ready(function(){
$('#up').attr('src',"stuUploads/<?php echo $row['upload'];?>");
});
</script>
Here is the whole loop
if(mysql_num_rows($search)>0){ ?>
<div class="container-table10">
<div class="wrap-table100">
<div class="table100">
<table>
<thead>
<tr class="table100-head">
<th class="column1">appeal date</th>
<th class="column2">course code</th>
<th class="column3">date of exam </th>
<th class="column4">reason</th>
<th class="column5">course title</th>
<th class="column6">AY</th>
<th class="column7">semester</th>
<th class="column8">student id</th>
<th class="column8">Lecturer
<br>Name</th>
<th class="column9">upload</th>
<th class="column9">Eligibility</th>
</tr>
</thead>
<tbody>
<?php
while($row=mysql_fetch_assoc($search)){
?>
<div aria-hidden="true" role="dialog" tabindex="-1" id="login-forms" class="modal leread-modal fade in">
<div class="modal-dialog">
<div class="modal-header">
<button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true">X</span></button>
</div>
<div class="modal-body" name="place">
<embed src="stuUploads/<?php echo $row['upload'];?>" class="up" type="application/pdf" width="600px" height="500px" />
<script>
$(document).ready(function() {
$('.up').attr('src', "stuUploads/<?php echo $row['upload'];?>");
});
</script>
</div>
<div class="modal-footer footer-box">
</div>
</div>
</div>
<tr>
<td class="column1">
<?php echo $row['appealm_date'];?>
</td>
<td class="column2">
<?php echo $row['course_code'];?>
</td>
<td class="column3">
<?php echo $row['date_of_exam'];?>
</td>
<td class="column4"><a class="login modal-form" data-target="#login-form" data-toggle="modal" href="#">show</a></td>
<td class="column5">
<?php echo $row['course_title'];?>
</td>
<td class="column6">
<?php echo $row['appealm_ay'];?>
</td>
<td class="column7">
<?php echo $row['appealm_sem'];?>
</td>
<td class="column8">
<?php echo $row['student_id'];?>
</td>
<td class="column8">
<?php echo $row['lecturer_name'];?>
</td>
<td class="column9">
<a class="login modal-form" id="aaa" data-toggle="modal" href="#login-forms">
<?php echo $row['upload'];?>
</a>
</td>
<td class="column8">
<input type="checkbox" name="eli" id="">
</td>
</tr>
<div aria-hidden="false" role="dialog" tabindex="-1" id="login-form" class="modal leread-modal fade in">
<div class="modal-dialog">
<div id="login-content" class="modal-content">
<div class="modal-header">
<button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Reason</h4>
</div>
<div class="modal-body">
<p class="p">
<?php echo $row['appealm_reason'];?>
</p>
</div>
<div class="modal-footer footer-box">
</div>
</div>
</div>
</div>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
<?php
}}
}}
?>
If there is another way to have the file pop out in the same page, please suggest it.
Appreciate any help.
use class instead of id .Id is unique
<embed src="stuUploads/<?php echo $row['upload'];?>" class="up" type="application/pdf" width="600px" height="500px" />
And change the respective js element id to class
$(document).ready(function(){
$('.up').attr('src',"stuUploads/<?php echo $row['upload'];?>");
});
Use the class attribute instead of id. An ID is supposed to be unique (this means only used once).
You can only access $row[] inside your while loop, since you're looping through $search which is a multi-dimensional array.
in your loop use XXX
If you are using bootstrap, add
$('#login-forms').on('shown.bs.modal', function (e) {
var $invoker = $(e.relatedTarget);
$("#up").attr("src", $invoker.data("url"));
});
Keep in mind that $row['upload'] is only one value, that changes each time through the while loop. When you changed up to a class from an id, you made your script essentially redefine the src for every up already on the page each time it runs. A better solution would be to define a better id, since you're only intending to change a single embed. Would it be possible to use $row['upload'] as your id?
<embed src="stuUploads/<?php echo $row['upload'];?>" id="<?php echo $row['upload'];?>" type="application/pdf" width="600px" height="500px" />
Then you could change your script to:
<script>
$(document).ready(function(){
$('#'+<?php echo $row['upload'];?>).attr('src',"stuUploads/<?php echo $row['upload'];?>");
});
</script>
Here is my code of table. I want to get ID of each row in opened modal when press button "EDIT". How can I send ID of selected row to modal? In my case bellow i am getting only first row ID.
Thank you for attention.
JS for modal form
<script>
$(".btn[data-target='#myModal']").click(function() {
var columnHeadings = $("thead th").map(function() {
return $(this).text();
}).get();
columnHeadings.pop();
var columnValues = $(this).parent().siblings().map(function() {
return $(this).text();
}).get();
var modalBody = $('<div id="modalContent"></div>');
var modalForm = $('<form role="form" name="modalForm" action="putYourPHPActionHere.php" method="post"></form>');
$.each(columnHeadings, function(i, columnHeader) {
var formGroup = $('<div class="form-group"></div>');
formGroup.append('<label for="'+columnHeader+'">'+columnHeader+'</label>');
formGroup.append('<input class="form-control" name="'+columnHeader+i+'" id="'+columnHeader+i+'" value="'+columnValues[i]+'" />');
modalForm.append(formGroup);
});
modalBody.append(modalForm);
$('.modal-body').html(modalBody);
});
$('.modal-footer .btn-primary').click(function() {
$('form[name="modalForm"]').submit();
});
</script>
<table class="simple-little-table table" cellspacing='0'>
<tr>
<th><p>№</p></th>
<th><p>Name, Surname</p></th>
<th>Own number</th>
<th>Company Number</th>
</tr>
<?php
$result =mysql_query("SELECT * FROM `my_table` WHERE 1 and status=1");
while ($row = mysql_fetch_array($result, MYSQL_NUM))
{
$id=$row["0"];
echo '<tr>
<td><p>'.$row[1].' '.$row[2].'</p></td>
<td><p>'.$row[4].'</p></td>
<td><p>'.$row[5].'</p></td>';
?>
<td><?php echo '<button class="btn btn-success" data-toggle="modal" data-target="#myModal" contenteditable="false" value=".$id.">'.$id.'</button>';?></td>
<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 class="modal-dialog">
<div class="modal-content"></div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true" class="">? </span><span class="sr-only">Close</span>
</button>
<!--Here I am trying to echo ID-->
<h4 class="modal-title" id="myModalLabel"><?php echo $row[0]; ?></h4>
</div>
<div class="modal-body"> sadasdas</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>
<?php
}
?>
Here is picture of table
I need to get ID of row in modal
This is what you can do . i am not using your data but assuming that you have enough understanding to use this according to your need.
Basically I am just using a trick.
<table>
<?php $sr=1;
while(your condition){?>
<tr>
<td id="td_<?=$sr++;?>">value you want in model</td>
<td><button id="<?=$sr;?>">Edit</button></td>
</tr>
<?php } ?>
</table>
you will get something like this
<table>
<tr>
<td id="td_1"></td> <!--see the id of this td and button--->
</td><button class="myclass" id="1"></button></td>
</tr>
<tr>
<td id="td_2"></td>
</td><button class="myclass" id="2"></button></td>
</tr>
now use this jquery
$('.myclass').click(function(){
var btn_id = $(this).attr('id'); //getting the btn's id
var row_id = "#td_"+btn_id; // by this you got the id of that td
$('#id_in_modal_where_you_need_this').text($(row_id).text());
});
function getValue(id){
$('#myModalLabel').text(id);
$('#myModal').modal('show');
}
and call this function on button click
instead of using this
<button class="btn btn-success" data-toggle="modal" data-target="#myModal" contenteditable="false" value=".$id.">
use
<button class="btn btn-success" onclick='getValue(".$id.");' contenteditable="false" value=".$id.">
You shouldn't create html for modal for each row, but instead just create one modal, which will be used when every row is clicked.
Then, using jquery in click method you can set different fields for modal, such as id or something else, like this for example:
$("btn").click(function(event) {
id = event.target.id;
$(#myModalIdField).text = id;
});
use this :
first, give a table id="name",
use your own table and data and if ur using a database or normal table;
use button modal as -
<table id="table">
<thead>
<tr>
<th>Your data </th>
</thead>
<tbody>
<tr>
<td>Your Data </td>
<td><button type="button" class="btn btn-primary" onclick='getValue(".$rindex.")' contenteditable="false" value=".$rindex.""> </td>
<div class=" modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header" id="myModalLabel">
<h4 class="modal-title">Enter Remarks:</h4>
<!-- <button type="button" class="close" data-dismiss="modal">×</button>-->
</div>
<!-- Modal body -->
<div class="modal-body">
<form action="" method="post">
<div class="form-group">
<label for="comment">Remarks:</label>
<textarea class="form-control" rows="3" name="comment" id="comment"></textarea>
</div>
<div class="form-group">
<input type="submit" name="msub" id="" class="btn btn-primary">
</div>
</form>
</div>
</div>
</div>
</div>
</button>
</td>
</tr>
</tbody>
</table>
Use this jquery :
var table = document.getElementById('table'), rindex;
for (var i = 0; i < table.rows.length; i++) {
table.rows[i].onclick = function getValue(rindex) {
rindex = this.rowIndex;
$('#myModalLabel').text(rindex);
$('#myModal').modal('show');
}
}
When I click edit, 'id' should pass to own page and modal should pop up. But it doesn't work. Please help me
PHP and Bootstrap
<tr>
<td><?php echo $row['name']; ?></td>
<td><a data-toggle="modal" data-target="#myModal" href='?id=<?php echo $row['id']; ?>'>Edit</a> </td>
</tr>
Modal
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
------
-----
-----
</div>
</div>
Create a class Edit in <a></a> tag. Use this class to call modal. And, add data-Id="<?echo $row['id'];?>"
<tr>
<td><?php echo $row['name']; ?></td>
<td>
<a class='Edit' data-toggle="modal" href="#form_modal" data-target="#myModal" data-Id="<?php echo $row['id'];?>">Edit</a>
</td>
</tr>
Place this code in footer
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
</div>
</div>
</div>
JS
<script>
$('.Edit').click(function(){
var Id=$(this).attr('data-Id');
$.ajax({url:"SomePage.php?Id="+Id,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
Create somepage.php (If you want to change this page name. Change in <script></script> too. Both are related.)
SomePage.php
<?php
$Id=$_GET['Id'];
?>
<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"></h4>
</div>
<div class="modal-body">
<?php echo $Id;?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
For more info, click Show data based of selected id on modal popup
I have a table that represented from SQL Table that looping all data with PHP.
HTML
<tbody>
<?php
$no = 1;
foreach($data_request as $data) {
?>
<tr>
<td class="center"><?php echo $no++.". ";?> </td>
<td class="sorting1"><?php echo $data['id_request'];?> </td>
<td class="center"><?php echo "$nama"; ?></td>
<td class="right">
<a class="btn btn-danger" href="#">
<i class="halflings-icon white trash"></i> Close</a>
<a class="btn btn-success" href="#" id="print"?>">
<i class="halflings-icon pencil"></i> Preview </a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Print Preview</h3>
</div>
<div class="modal-body">
/*This would be a preview*/
</div>
<div class="modal-footer">
Make it to PDF
Close
</div>
</div>
My problem is, I wanna display a row data to modal bootstrap if users clicked the preview button.
So, if user click the button in row 1, modal would be displaying all field/data in first row of table.
Untill now, I have success passing data using jquery like this :
<script>
$('.btn-success').click(function(){
var address = [];
$(this).closest('tr').find('td').not(':last').each(function() {
var textval = $(this).text(); // this will be the text of each <td>
address.push(textval);
});
alert(address.join('\n'));
});
</script>
I am confusing to pass the data from script to modal, anyone can help ?
Better to give unique ids to the rows while rendering it from SQL DB.
<tbody>
<?php
$no = 1;
foreach($data_request as $data) {
?>
<tr id="row_<?php echo $data['id_request']; ?>">
<td class="center"><?php echo $no++.". ";?> </td>
<td class="sorting1"><?php echo $data['id_request'];?> </td>
<td class="center"><?php echo "$nama"; ?></td>
<td class="right">
<a class="btn btn-danger" href="#">
<i class="halflings-icon white trash"></i> Close</a>
<a class="btn btn-success" href="#" id="print_<?php echo $data['id_request']; ?>"">
<i class="halflings-icon pencil"></i> Preview </a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Print Preview</h3>
</div>
<div class="modal-body">
/*This would be a preview*/
</div>
<div class="modal-footer">
Make it to PDF
Close
</div>
</div>
Script:
<script>
$('.btn-success').click(function(){
var address = [];
var trId = $(this).attr('id').split('_')[1];
$('#row_'+trId).find('td').each (function() {
address.push($(this).text());
});
alert(address.join('\n'));
$('#myModal > .modal-body').html(address.join('\n'));
$('#myModal').modal('show');
});
</script>
I would like to pass an row ID from one section of the page to another in the following way:
The user will click on the trash can and a delete confirmation message will come up. The following code shows how I retrieve the list from the database:
<?php while($row = mysql_fetch_array($query_set)) { ?>
<tr>
<td><?php echo $row['cover_name'] ?></td>
<td><?php echo 'R '.$row['sum_insured'] ?></td>
<td><?php echo $row['info'] ?></td>
<td>
<i class="fa fa-pencil"></i>
<i class="fa fa-trash-o"></i><!-- This is the link for the trash can to pass the id -->
</td>
</tr>
<?php } ?>
After clicking on the following <i class="fa fa-trash-o"></i><!-- This is the link for the trash can to pass the id -->
The following pop will come up:
and it has the following code:
<div class="modal small 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 id="myModalLabel">Delete Confirmation</h3>
</div>
<div class="modal-body">
<p class="error-text"><i class="fa fa-warning modal-icon"></i>Are you sure you want to delete the cover?<br>This cannot be undone.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
<a href="delete-cover.php?id=<?php echo $coverid ?>" class="btn btn-danger" >Delete</a><!-- I would like to pass the id from that trash can button this the delete button -->
</div>
</div>
</div>
</div>
I would like to pass the id from the trash can link to the delete button that pops up. Any assistance will be appreciated
This is surely not good:
onclick="<?php $coverid = $row['coverid'] ?>"
It should be somethig like that:
onclick="jsfunctionname(<?php echo $row['coverid'];?>);"
Or if you use jQuery on selector, then add a data-id="<?php echo $row['coverid'];?>" to the link, and get like $(this).data('id');