We Keep Coding

php src value change in a hidden div

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>

Update bootstrap Table when Click Edit Button in Codeigniter

Here. I have codeigniter update code, it also worked but the problem is when i click the Edit button did not parsing After space data.
(After space Words did not fetch in update model).
How can I solve this problem.
vvIncome.php view
$(document).on('click','.btn_edit', function(e) {
$("#edit").val($(this).attr('edit_id'));
$("#in_dis").val($(this).attr("in_dis"));
$("#in_amnt").val($(this).attr('in_amnt'));
$("#confirm-edit").modal({show:'true'});
});
$(document).on('click', '#btn-ys', function() {
var income_id = $('#edit').val();
var in_dis = $('#in_dis').val();
var in_amnt = $('#in_amnt').val();
var result{"income_id":income_id,"in_dis":in_dis,"in_amnt":in_amnt};
$.ajax({
data:result,
type: "POST",
url:'<?php echo base_url(); ?>admin/income/editincome/'+income_id,
success: function(data){
$("#confirm-edit").modal('hide');
viewData();
}
});
});
View PHP Code
<div class="modal fade bs-example-modal-md" id="confirm-edit" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-md" 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="myModalLabel">EDIT CATEGORY</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="well">
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-12">
<input type="text"class="form-control" id="in_dis" placeholder="description">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="number" class="form-control" id="in_amnt" placeholder="amount">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="hidden" class="form-control" id="edit" placeholder="income_id">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btn-ys" class="btn btn-success">SUBMIT</button>
</div>
</form>
</div>
</div>
</div>
</div>
`
Income_resut.php
<thead>
<tr>
<th ><center>DESCRIPTION</center></th>
<th ><center>AMOUNT</center></th>
<th ><center>EDIT</center></th>
<th ><center>DELETE</center></th>
</tr>
</thead>
<?php foreach ($incm as $in_key) { ?>
<tr>
<td><center><?php echo $in_key->description;?></center></td>
<td><center><?php echo $in_key->amount;?></center></td>
<td>
<center><button type="button" title="edit" data-toggle="modal" edit_id=<?php echo $in_key->income_id;?> in_dis=<?php echo $in_key->description;?> in_amnt=<?php echo $in_key->amount;?> class="btn btn-info btn_edit"><i class="fa fa-pencil"></i></button></center>
</td>
<td>
<center><button type="button" title="delete" data-toggle="modal" del_id=<?php echo $in_key->income_id;?> class="btn btn-danger btn-delete"><i class="fa fa-trash-o"></i></button></center>
</td>
<?php } ?>
</table>
`
income.php Controller
public function editincome($income_id)
{
$udata['income_id'] = $this->input->POST('income_id');
$udata['description'] = $this->input->POST('in_dis');
$udata['amount'] = $this->input->POST('in_amnt');
$update = $this->income_model>update_income_details($udata,$income_id);
}
Income_Model.php Model
public function update_income_details($udata,$income_id)
{
$this->db->from('income', $udata);
$this->db->where('income_id',$income_id );
return $this->db->update('income',$udata);
}
This on view table
enter image description here
This is edit model
enter image description here

Try changing to this,
for eg, in_dis=<?php echo $in_key->description;?> to data-in_dis="<?php echo rawurlencode($in_key->description); ?>"
then
$("#in_dis").val($(this).attr("in_dis")); to $("#in_dis").val(decodeURIComponent($(this).data("in_dis")));
Use .data() instead of .attr()
Let me know if it works for you.

Passing PHP variable to bootstrap modal

So I checked a lot of topics about this title but couldn't find a good answer to it.
So basically I have this table:
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered tablesorter">
<thead>
<tr>
<th>Email <i class="fa fa-sort"></i></th>
<th>Akcje <i class="fa fa-sort"></i></th>
</tr>
</thead>
<tbody>
<?php
$subs = $conn->prepare("SELECT * FROM sub_permission WHERE id_bota=:id");
$subs->bindParam(":id",$ID);
$subs->execute();
?>
<form method="post">
<?php foreach($subs as $sub){ ?>
<tr>
<td>
<?php echo $sub['adminEmail']; ?>
</td>
<td>
<input type="hidden" name="id">
<button type="button" value="<?php echo $sub["adminEmail"]; ?>" class='btn btn-danger btn-xs' data-toggle="modal" data-target="#modal_DELETE" data-id="<?php echo $sub["adminEmail"]; ?>"> <span class="fa fa-times"> </span> </button><a> </a>
<button type="button" class='btn btn-warning btn-xs' data-toggle="modal" data-target="#myModalE"><span class="fa fa-edit"></span></button>
</td>
</tr>
<?php } ?>
</form>
</tbody>
</table>
</div>
</div>
So this is basically the table with users that have sub-admins and there's 1 action "Delete".
When someone clicks button delete, this modal will show:
<div class="modal fade" id="modal_DELETE" tabindex="-1" role="dialog" aria-labelledby="modal_nameDELETE">
<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="modal_nameDELETE">Sure?</h4>
</div>
<div class="modal-body">
Are you sure you want to remove sub-admin <label><?php echo $sub['adminEmail'];?></label> ?
<br>
</div>
<form method="post">
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal">No</button>
<button type="submit" class="btn btn-primary" name="delete">Yes</button>
</div>
</form>
</div>
</div>
</div>
The problem is when there's for example 3 people in the table and I click the delete button for user 3, the modal pops-up but the email is wrong.

Bootstrap Modal not showing properly

Here is my screenshot of this modal, its showing but hiden

Could you please check the below line.where it append exactly(inside your modal content or outside).
actually it should be in outside of your modal content
<div class="modal-backdrop fade in"></div>

<div class="row-fluid sortable">
<div class="box span12">
<div class="box-header">
<h2><i class="halflings-icon align-justify"></i><span class="break"></span>Manage All Category</h2>
<div class="box-icon">
<i class="halflings-icon wrench"></i>
<i class="halflings-icon chevron-up"></i>
<i class="halflings-icon remove"></i>
</div>
</div>
<div class="box-content">
<div id="flash" style="display: none;">
<img style="margin: 15% 0 0 50%; position: absolute;" src="<?php echo base_url(); ?>admin/img/ajaxloader.gif"/>
</div>
<table class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th>Category ID</th>
<th>Category Name</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php if (isset($links)) {
foreach ($all_category as $category) { ?>
<tr>
<td><?php echo $category->category_id; ?></td>
<td class="center"><?php echo $category->category_name; ?></td>
<?php if ($category->status == 1) { ?>
<td class="center">
<a id="btnpublish" data-value="<?php echo $category->category_id; ?>" href="javascript:void(0);" class="label label-important">Unpublish</a>
</td>
<?php } else { ?>
<td class="center">
<a id="btnunpublish" data-value="<?php echo $category->category_id; ?>" href="javascript:void(0);" class="label label-success">Publish</a>
</td>
<?php } ?>
<td class="center">
<a class="btn btn-small btn-inverse" href="#" data-toggle="modal" data-target="#myModal<?php echo $category->category_id; ?>">View</a>
<a class="btn btn-small btn-info" href="#">Edit</a>
<a id="deleteCat" class="btn btn-small btn-danger" data-value="<?php echo $category->category_id; ?>" href="javascript:void(0);">Delete</a>
<!--Start View Modal-->
<div class="modal fade" id="myModal<?php echo $category->category_id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel<?php echo $category->category_id; ?>">
<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="myModalLabel<?php echo $category->category_id; ?>">Category View</h4>
</div>
<div class="modal-body">
<p><b>Category ID:</b> <?php echo $category->category_id; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--End View Modal-->
</td>
</tr>
<?php }
} ?>
</tbody>
</table>
<div class="pagination pagination-centered">
<?php echo $links; ?>
</div>
</div>
</div><!--/span-->
</div>

Which version of Bootstrap are you using?
There was a ticket for that on GH in an earlier version of Bootstrap.
https://github.com/twbs/bootstrap/issues/16148

Every thing is good just one thing...put modal div outside to the td of the table, keep it inside body but out side to the table.
Modal is not displaying because you are repeating modal with same id of the modal in for each loop(like buttons are repeating).
I have answered this the way you can achieve it at link below.
dynamically created bootstrap3 modals do not work

Passing data using jquery or javascript in modal bootstrap

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>