jQuery table td click not working properly - javascript

I have php code which generates a table. Inside td I have inserted img. When user click on td then it changes img inside it. But it is not working properly. Only even rows td element changes image while odd rows doesn't. Below is my code:
<div class="row" id="atten_list">
<div class="col-sm-offs-3 col-md1-6">
<table class="table table-bordered">
<thead>
<tr>
<td><?php echo get_phrase('roll');?></td>
<td><?php echo get_phrase('name');?></td>
<td><?php echo get_phrase('1');?></td>
<td><?php echo get_phrase('2');?></td>
<td><?php echo get_phrase('3');?></td>
<td><?php echo get_phrase('4');?></td>
<td><?php echo get_phrase('5');?></td>
<td><?php echo get_phrase('6');?></td>
<td><?php echo get_phrase('7');?></td>
<td><?php echo get_phrase('8');?></td>
<td><?php echo get_phrase('9');?></td>
<td><?php echo get_phrase('10');?></td>
<td><?php echo get_phrase('11');?></td>
<td><?php echo get_phrase('12');?></td>
<td><?php echo get_phrase('13');?></td>
<td><?php echo get_phrase('14');?></td>
<td><?php echo get_phrase('15');?></td>
<td><?php echo get_phrase('16');?></td>
<td><?php echo get_phrase('17');?></td>
<td><?php echo get_phrase('18');?></td>
<td><?php echo get_phrase('19');?></td>
<td><?php echo get_phrase('20');?></td>
<td><?php echo get_phrase('21');?></td>
<td><?php echo get_phrase('22');?></td>
<td><?php echo get_phrase('23');?></td>
<td><?php echo get_phrase('24');?></td>
<td><?php echo get_phrase('25');?></td>
<td><?php echo get_phrase('26');?></td>
<td><?php echo get_phrase('27');?></td>
<td><?php echo get_phrase('28');?></td>
<td><?php echo get_phrase('29');?></td>
<td><?php echo get_phrase('30');?></td>
<td><?php echo get_phrase('31');?></td>
</tr>
</thead>
<tbody>
<?php
$students = $this->db->get_where('student' , array('class_id'=>$class_id))->result_array();
foreach($students as $row):
?>
<tr class="gradeA" id="adata">
<td><?php echo $row['roll'];?></td>
<td><?php echo $row['name'];?></td>
<?php
for($i=1; $i<=31; $i++){ ?><?php
$datea = $i;
$full_date = $year.'-'.$month.'-'.$datea;
//inserting blank data for students attendance if unavailable
$verify_data = array( 'student_id' => $row['student_id'],
'date' => $full_date);
$query = $this->db->get_where('attendance' , $verify_data);
if($query->num_rows() < 1){
$this->db->insert('attendance' , $verify_data);}
//showing the attendance status editing option
$attendance = $this->db->get_where('attendance' , $verify_data)->row();
$status = $attendance->status;
$id = $attendance->attendance_id;
?>
<?php if ($status == 1):?>
<td align="center" id="status" title="<?php echo $id; ?>">
<img src="<?php echo base_url("/assets/images/present.png"); ?>" alt="StackOverflow" title="StackOverflow is the best!" />
</td>
<?php endif;?>
<?php if ($status == 2):?>
<td align="center" id="status" title="<?php echo $id; ?>">
<img src="<?php echo base_url("/assets/images/absent.png"); ?>" alt="StackOverflow" title="StackOverflow is the best!" />
</td>
<?php endif; ?><?php }?><?php $this->db->where('class_id',$class_id);
$this->db->from('student');
$nofs = $this->db->count_all_results(); ?>
<!-- Script for changing image on td click -->
<script>
$("table tbody tr#adata td#status").click(function() {
var img = $(this).find("img")[0];
if(img.src == '<?php echo base_url("/assets/images/present.png"); ?>'){
img.src = img.src.replace('<?php echo base_url("/assets/images/present.png"); ?>', '<?php echo base_url("/assets/images/absent.png"); ?>');
}
else if(img.src == '<?php echo base_url("/assets/images/absent.png"); ?>'){ img.src = img.src.replace('<?php echo base_url("/assets/images/absent.png"); ?>', '<?php echo base_url("/assets/images/present.png"); ?>');
}else{}
}); </script>
</tr>
<?php endforeach;?>
</tbody>
</table>
</div>
</div>

Try this syntax ,
$('table').on('click','td',function(){
//Your code
});
Also use 'class' since 'ID' attrib should be unique

Related

delete confirmation message on anchor tag

As a new learner, i have some basic problems which i want to clear out.
1)i have shown student data, in tabular format.
2)in the last of below code i have provided two anchor tags.
3)among them first one redirects on update page whether the second one directly executes delete query on click without confirmation).
so what i want ,when i click on delete link, browser should ask me for confirmation,
if yes,
then delete and redirect to login page.
if no,
stay on same page
>> <tr>
<td><?php echo $result['id']; ?></td>
<td><?php echo $result['sname'];?></td>
<td><?php echo $result['class']; ?></td>
<td><?php echo $result['gname'];?></td>
<td><?php echo $result['contact']; ?></td>
<td><?php echo $result['gender']; ?></td>
<td><?php echo $result['email'];?></td>
<td><?php echo $result['bloodg']; ?></td>
<td><?php echo $result['address']; ?></td>
<td><?php echo $result['division'];?></td>
<td><?php echo $result['shift']; ?></td>
<td>
<a class= "action-e" href= "update.php?id=<?php echo $result['id']; ?>"><i class="fa fa-wrench" title="Update"></i></a>
<a class= "action-d" href= "delete.php?id=<?php echo $result['id'] ?>"><i class="fa fa-trash" title="Delete"></i></a>
</td>
</tr>
<tr>
<td><?php echo $result['id']; ?></td>
<td><?php echo $result['sname'];?></td>
<td><?php echo $result['class']; ?></td>
<td><?php echo $result['gname'];?></td>
<td><?php echo $result['contact']; ?></td>
<td><?php echo $result['gender']; ?></td>
<td><?php echo $result['email'];?></td>
<td><?php echo $result['bloodg']; ?></td>
<td><?php echo $result['address']; ?></td>
<td><?php echo $result['division'];?></td>
<td><?php echo $result['shift']; ?></td>
<td>
<a class="action-e" href="update.php?id=<?php echo $result['id']; ?>"><i class="fa fa-wrench" title="Update"></i></a>
<a class="action-d" href="delete.php?id=<?php echo $result['id'] ?>" onclick="return confirm('Are you sure?')"><i class="fa fa-trash" title="Delete"></i></a>
</td>
</tr>

how to output specific information in a modal from a database

I am trying to display more information about the user in my table. The goal is to see more information about the user in a modal, than you can see in the table overview. Unfortunately, I don't manage to display only the information of the respective user in the modal. I already have the following code which doesn't work like i want. At the moment, the modal stays emtpy.
Greetings
admin.php
<?php
include('connection.php');
if( !empty($_POST) ){
foreach( $_POST as $key_post => $value_post ){
if (preg_match('/delete_/i',$key_post) ) {
$id_to_delete = (integer) str_replace('delete_','', $key_post);
$deleteQuery = "DELETE FROM card WHERE id = " . $id_to_delete;
$statement = $pdo->prepare($deleteQuery);
$statement->execute();
}
}
}
include('read.php');
if( !empty($_POST) ){
foreach( $_POST as $key_post => $value_post ){
if (preg_match('/viewDetail_/i',$key_post) ) {
$id_to_view = (integer) str_replace('viewDetail_','', $key_post);
$viewQuery = "SELECT * FROM card WHERE id = " . $id_to_view;
$statement = $pdo->prepare($viewQuery);
$statement->execute();
$viewResult = $statement->fetchAll();
}
}
}
?>
<form action="admin.php" method="post">
<div class="table-wrapper">
<div class="table-scroll">
<table id="myTable">
<tr>
<th>ID</th>
<th>Kartentyp</th>
<th>Absender</th>
<th>Empfänger</th>
<th>Sendedatum</th>
<th id="smallCol">Verschickt</th>
<th id="smallCol">Bestätigung</th>
<th>Edit</th>
</tr>
<?php
foreach ($result as $row) {
if ($row['Dispatched'] == 0) {
$dispatched = 'Pending';
} else {
$dispatched = 'Versendet';
}
?>
<tr class="Alle <?php echo $row['Category']; ?> <?php echo $row['Dispatched']; ?>">
<td><?php echo $row['ID']; ?></td>
<td><?php echo $row['Category']; ?></td>
<td><?php echo $row['Sender']; ?></td>
<td><?php echo $row['Receiver']; ?></td>
<td><?php echo $row['SendDate']; ?></td>
<td><?php echo $dispatched; ?></td>
<td>Placeholder</td>
<td>
<input type="submit" name="delete_<?php echo $row['ID']; ?>" value="delete" >
<input type="submit" name="viewDetail_<?php echo $row['ID']; ?>" value="modal" data-target="modal1" class="modal-trigger">
</td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</form>
<br>
<div class="row">
<button class="btn waves-effect waves-light" type="submit" name="action">Absenden
<i class="material-icons right">send</i>
</button>
</div>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<div class="table-wrapper">
<div class="table-scroll">
<table id="myTable">
<tr>
<th>ID</th>
<th>Kartentyp</th>
<th>Absender</th>
<th>Empfänger</th>
<th>Sendedatum</th>
<th id="smallCol">Verschickt</th>
<th id="smallCol">Bestätigung</th>
</tr>
<?php
foreach ($viewResult as $row){ ?>
<tr>
<td><?php echo $row['ID']; ?></td>
<td><?php echo $row['Category']; ?></td>
<td><?php echo $row['Sender']; ?></td>
<td><?php echo $row['Receiver']; ?></td>
<td><?php echo $row['SendDate']; ?></td>
<td><?php echo $dispatched; ?></td>
<td>Placeholder</td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</div>
<div class="modal-footer">
Zurück
</div>
</div>
read.php
<?php
include('connection.php');
$statement = $pdo->prepare("SELECT * FROM card ORDER BY ID ASC");
$statement->execute();
$result = $statement->fetchAll();
if ($statement->rowCount() > 0) {
foreach ($statement->fetchAll() as $row) {
$id = $row['ID'];
$imagePath = $row["ImagePath"];
$sender = $row["Sender"];
$senderEmail = $row["SenderEmail"];
$receiver = $row["Receiver"];
$receiverEmail = $row["ReceiverEmail"];
$subject = $row["Subject"];
$text = $row["Text"];
$sendDate = $row["SendDate"];
$dispatched = $row["Dispatched"];
$category = $row['Category'];
}
}
?>

Extract data from a table created by a loop (PHP)

I have the following problem: I'm creating an HTML table with a PHP for-loop. There is data and a button in each row. When the user presses the button (id="detail"), the "id"-field of the corresponding row (id="patID") is supposed to be stored in a PHP variable. Every attempt I have made failed because javascript simply takes the first element on the page with the id "patID" and (to my knowledge) I don't have a way to select this element in PHP. This is my code:
<?php
if (isset($_POST['search']))
{
//irrelevant details of MySQL PDO-connection omitted
$result = $statement->fetchAll();
if ($result && $statement->rowCount() > 0)
{ ?>
<h2>Ergebnisse</h2>
<table>
<thead>
<tr>
<th>#</th>
<th>Vorname</th>
<th>Nachname</th>
<th>Geburtstag</th>
<th>Klasse/Kurs</th>
<th>Vorerkrankungen</th>
<th>Allergien</th>
<th>Anmerkung</th>
<th>Aktualisiert</th>
<th> Optionen</th>
</tr>
</thead>
<tbody>
<?php
foreach ($result as $row)
{ ?>
<tr id="row">
<td id="patID"><?php echo escape($row["id"]); ?></td>
<td><?php echo escape($row["firstName"]); ?></td>
<td><?php echo escape($row["lastName"]); ?></td>
<td><?php echo escape($row["birthday"]); ?></td>
<td><?php echo escape($row["course"]); ?></td>
<td><?php echo escape($row["preIllnesses"]); ?></td>
<td><?php echo escape($row["allergies"]); ?> </td>
<td><?php echo escape($row["note"]); ?> </td>
<td><?php echo escape($row["created"]); ?> </td>
<td>
<button id="detail">Mehr</button>
</td>
</tr>
<? } ?>
</tbody>
</table>
<?php
}
else
{ ?>
<blockquote><b>Keine Ergebnisse gefunden.</b></blockquote>
<?php
}
}
?>
The 'id' attribute can only be given once to an html-element. You should you a class instead:
<button class="detail">Mehr</button>
You should store the id in an extra attribute if you want to grab it later in javascript. For example, if you are using jQuery, you can use a data attribute:
<button class="detail" data-id="some_id">Mehr</button>
<script>
$('.detail').click(function () {
var id = $(this).data('id');
// do something with id
});
</script>
This will add a click-listener to all elements with the 'detail' class. So if a user clicks on an element having that class , it will execute the given function with this pointing to the clicked element. And since that element has the 'data-id' attribute, we can use jQuery's data function to get the contents of that attribute.
Your way if you change ID to class
<tr class="row">
<td class="patID"><?php echo escape($row["id"]); ?></td>
<td><?php echo escape($row["firstName"]); ?></td>
<td><?php echo escape($row["lastName"]); ?></td>
<td><?php echo escape($row["birthday"]); ?></td>
<td><?php echo escape($row["course"]); ?></td>
<td><?php echo escape($row["preIllnesses"]); ?></td>
<td><?php echo escape($row["allergies"]); ?> </td>
<td><?php echo escape($row["note"]); ?> </td>
<td><?php echo escape($row["created"]); ?> </td>
<td>
<button class="detail">Mehr</button>
</td>
</tr>
<script>
$(function() {
$('.detail').click(function(){
// var id = $(this).parents('.row').find('.patID').html();
alert($(this).parents('.row').find('.patID').html());
});
});
</script>

How to disable an edit button for the records older than 3 days

I have a table where all the daily records are displayed.
I want to disable the edit button if the records are 3 days older. How can i obtain this. i have current date and 3 day ago date using php date function. can it be done using php only or javascript can be used??
<?php $current_date = date('Y-m-d');// current date
$days_ago = date('Y-m-d', strtotime('-3 days', strtotime($current_date)));
//3 days older date
I am displaying the records like this:
foreach($records as $rec){
$count = $count+1;
?>
<tr>
<td><?php echo $count; ?></td>
<td><?php echo $rec['client_name']; ?></td>
<td><?php echo $rec['address']; ?></td>
<td><?php echo $rec['task']; ?></td>
<td><?php echo $rec['fiber_length']; ?></td>
<td><?php echo $rec['phone_number']; ?></td>
<td><?php echo $rec['package']; ?></td>
<td><?php echo $rec['result']; ?></td>
<td><?php echo $rec['date']; ?></td>
<td><?php echo $rec['team_name']; ?></td>
<td><?php echo $rec['remarks']; ?></td>
<td>Edit</td>
<td>Delete</td>
</tr>
<?php
}?>
if(strtotime($current_date) > time()-(60*60*24*3))

HTML Tags not rendered properly when passing to view PHP-JS

Hi i am using codeigniter framework ,
i am using an ajax request to get data from db and to show in view.
var from_date = jQuery('#form_date').val();
var to_date = jQuery('#to_date').val();
jQuery.ajax({
url:base_url+"index.php/eod_report/search_to_date",
type:"POST",
data:{from_date:from_date,to_date:to_date},
//datatype:'json',
success:function(data){
jQuery("#report_container").html(data);
}
my controler is
public function search_to_date()
{
$from_date = $this->input->post('from_date');
$to_date = $this->input->post('to_date');
$where_array = array('eod.created_time >='=>$from_date,'eod.created_time <='=>$to_date);
$eod_report_data = $this->eod_data->get_eod_report_data($where_array);
$eod_total_report_data = $this->eod_data->get_eod_total_report_data($where_array);
$formated_eod_report_data = $this->format_eod_report_array($eod_report_data);
krsort($formated_eod_report_data);
$formated_eod_all_report_data= $this->format_all_eodreport_array($eod_total_report_data);
krsort($formated_eod_all_report_data);
$data = array('eod_data'=>$formated_eod_report_data,'eod_all_data'=>$formated_eod_all_report_data);
$html = $this->load->view('eod-report-partial',$data,true);
echo json_encode($html);
}
eod-report-partial view
<table width="100%" align="center" border="1">
<thead>
<tr>
<td>ShopCode</td>
<td>Submitted By</td>
<td>RMS</td>
<td>ORM</td>
<td>ORM Profit</td>
<td>Total</td>
<td>Cash</td>
<td>Card</td>
<td>Opening Balance</td>
<td>Purchase Today</td>
<td>Final Total</td>
<td>T.Till Cash</td>
<td>Difference</td>
<td>Nxt Day Op Balance</td>
<td>Petty Cash</td>
<td>Banking</td>
</tr>
</thead>
<tbody>
<?php foreach($eod_data as $key=>$eods) {?>
<tr><td colspan="8""><?php echo $key; ?></tr>
<?php foreach($eods as $eod) { ?>
<tr>
<td><?php echo $eod['shop_code']; ?></td>
<td><?php echo $eod['first_name']; ?></td>
<td><?php echo $eod['rms_sell'];?></td>
<td><?php echo $eod['orm_repair']; ?></td>
<td><?php echo $eod['orm_repair'];?></td>
<td><?php echo $eod['total']; ?></td>
<td><?php echo $eod['cash']; ?></td>
<td><?php echo $eod['card']; ?></td>
<td><?php echo $eod['opening_bal']; ?></td>
<td><?php echo $eod['purchases']; ?></td>
<td><?php echo $eod['final_total']; ?></td>
<td><?php echo $eod['till_total']; ?></td>
<td><?php echo $eod['difference']; ?></td>
<td><?php echo $eod['nextday_opening_bal']; ?></td>
<td></td>
<td><?php echo $eod['banking']; ?></td>
</tr>
<?php } ?>
<tr>
<td></td>
<td>Total:</td>
<td><?php echo $eod_all_data[$key]['sum_rms_sell'];?></td>
<td><?php echo $eod_all_data[$key]['sum_orm_repair']; ?></td>
<td><?php echo $eod_all_data[$key]['sum_orm_repair'];?></td>
<td><?php echo $eod_all_data[$key]['total']; ?></td>
<td><?php echo $eod_all_data[$key]['sum_cash']; ?></td>
<td><?php echo $eod_all_data[$key]['sum_card']; ?></td>
<td><?php echo $eod_all_data[$key]['sum_opening_bal']; ?></td>
<td><?php echo $eod_all_data[$key]['sum_purchases']; ?></td>
<td><?php echo $eod_all_data[$key]['final_total']; ?></td>
<td><?php echo $eod_all_data[$key]['sum_till_total']; ?></td>
<td><?php echo $eod_all_data[$key]['difference']; ?></td>
<td><?php echo $eod_all_data[$key]['sum_next_day_bal']; ?></td>
<td></td>
<td><?php echo $eod_all_data[$key]['sum_banking']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
the problem is the view rendering to the page is
how to render my html properly , thanks in advance
You need to decode the json object before setting it as the html in the container.
var html_data = jQuery.parseJSON(data);
jQuery("#report_container").html(html_data);
Please note the use of jQuery.parseJSON function for backwards compatibility for browsers that don't have a JSON object.
Also you have a typo in your from_date variable. It reads #form_date where it should read #from_date.
EDIT
Here's a dirty way to deal with it for now:
html_data = jQuery.parseJSON(data);
html_data = html_data.replace("\r\n", "").replace("\", "");
jQuery("#report_container").html(html_data);

Categories

Resources