I have to generate some text boxes after each line of row sent from database, so I have this user who have 2 rows:
And of course each row belongs to an id:
<td><?php echo $counter--; ?></td>
<td><?php echo $installment['date_now'] ?></td>
<td><?php echo $installment['payment'] ?> $</td></tr>
</tr>
<?php } ?>
<tr><th colspan="10" style="text-align: right;">Remaining:</th>
<th><?php echo ($cash['project_cost'] - $sum) ?> $</th>
</tr>
<tr id="<?php echo $cash['infoid']; ?>"><td colspan="8" style="text-align: right;">Add Payment</td>
<td><input type="date" class="form-control" id="date_pay_now[]"/></td>
<td><input class="form-control" type="text" id="pay_now"/></td>
<td><button id="add_payment" class="btn btn-success glyphicon glyphicon-plus"></button>
</tr>
<tr><td></td></tr><tr><td></td></tr>
<?php $sumCash = $sumCash + $cash['project_cost']; } ?>
<tr>
<th colspan="10">Cash Total</th><th id="final_cash"><?php echo $sumCash ?> $</th>
</tr>
</table>
</div>
<?php } else { ?>
No Payments available
<?php } ?>
Now, when select a date and type an amount, I should send those values into AJAX and but first I need to get the id of the row so I can send it too.
$("#add_payment").click(function()
{
var date_of_pay = $("#date_pay_now").val();
var pay_now = $("#pay_now").val();
var id_pay = $(this).closest('tr').attr('id');
console.log(id_pay);
if(date_of_pay == "" || pay_now == "")
{
$("#date_pay_now").css('border-color', 'red');
$("#pay_now").css('border-color', 'red');
}
if(date_of_pay != "" && pay_now != "")
{
$.ajax
({
//Still not typed
});
}
});
If you see the image, when I click on the first button, I see the id correctly at the console and if they are empty I can see the red color, but when I refresh the page and click directly on the second row button, I can't see any value at the console and no css color due to empty text box shown.
And here when I click on the next button, no color and no id at the console:
Related
I created an internal email system within the project. When I receive a new message the column with the subject name in my table is bolded to inform that the message has not yet been read.
code:
<?php
while($row = mysqli_fetch_array($result))
{
?>
<section id="s1">
<div class="div1" id="minhaDiv" style="float: left;">
<table class="table table-bordered">
<tr>
<th width="20%">De</th>
<th width="60%">Assunto</th>
<th width="10%">Prioridade</th>
<th width="10%">Recebido</th>
</tr>
<tr>
<th width="10%" colspan=4>Recebido: <?php echo $row["Data"]; ?></th>
</tr>
<tr>
<td><?php echo $row["De"]; ?></td>
<td class="td-info view_data" id="<?php echo $row["Id"]; ?>" data-toggle="modal" href="#dataModal" width="20%" style="font-weight:bold" onclick="this.style['font-weight'] ='normal'"><?php echo $row["Assunto"]; ?></td>
<td><?php echo $row["Prioridade"]; ?></td>
<td><?php echo $row["Hora"]; ?></td>
</tr>
<tr>
<?php
}
?>
</table>
</div>
</section>
In the image, which is surrounded by green already clicked to read, the red has not yet vliquei to read, so it is bold:
I use this code to put bold inside the td:
width="20%" style="font-weight:bold" onclick="this.style['font-weight'] ='normal'"
The problem is that if you refresh the page, even after reading the messages, they come back in bold and should not. After clicking once, they can not be left in bold
Solution to achieve the condition.
I created a Status field in the database table, where 1 is unread message and 0 message is read, now is to create the condition in td with if. In the javascript with which I open the modal I made the following change:
$('.td-info').click(function(){
var item_id = $(this).attr("id");
var status = $(this).attr("Status");
$.ajax({
url:"./fetchRAD",
method: "POST",
data:{item_id:item_id, status:status},
success:function(data){
}
});
});
In td I indicated the id of the record in the id of td:
id="<?php echo $row["Id"]; ?>"
file with php:
if(isset($_POST["item_id"]))
{
$query = "Update centrodb.Alertas SET Status = '0' WHERE Id = '".$_POST["item_id"]."'";
$result = mysqli_query($conn, $query);
}
Pata check in the td we put like this:
width="20%" <?php echo $row["Status"] == '1'?' style="font-weight:bold" ':' style="font-weight:normal" '?>
td complete:
<td class="td-info view_data" id="<?php echo $row["Id"]; ?>" data-toggle="modal" href="#dataModal" width="20%" <?php echo $row["Status"] == '1'?' style="font-weight:bold" ':' style="font-weight:normal" '?>><?php echo $row["Assunto"]; ?></td>
I am trying to delete the table entry without opening the .php file using jQuery post.
The whole thing works without problems when I just use the usual html post form.
The alert(data) does not trigger, it only adds ".../?player_id_del=1" or whatever ID click into the URL.
What am I doing wrong?
Here is some of my index.php, i get the whole data from a database:
<table class = "table table-hover">
<thead>
<tr>
<th>Player_ID</th>
<th>Username</th>
<th>First_Name</th>
<th>Last_Name</th>
<th>Rating</th>
<th>Country</th>
<th>Colour</th>
<th></th>
</tr>
</thead>
<tbody>
<? foreach($playerArray as $player):?>
<tr>
<td><? echo $player["PLAYER_ID"]; ?></td>
<td><? echo $player["USERNAME"]; ?></td>
<td><? echo $player["FIRST_NAME"]; ?></td>
<td><? echo $player["LAST_NAME"]; ?></td>
<td><? echo $player["RATING"]; ?></td>
<td><? echo $player["COUNTRY"]; ?></td>
<td><? echo $player["COLOUR"]; ?></td>
<td>
<form id="del-form">
<div>
<input type="number" id="player_id_del" name="player_id_del" value="<?php echo htmlspecialchars($player["PLAYER_ID"]); ?>" />
</div>
<div>
<button type="submit" id="submit-btn" class="btn btn-danger">Delete</button>
</div>
</form>
<script>
$("#submit-btn").click(function(){
$.post("deletePlayer.php", $("#del-form").serialize() , function(data) {
alert(data);
});
});
</script>
</td>
</tr>
<? endforeach ?>
</tbody>
</table>
Here is my deletePlayer.php:
<?php
//include DatabaseHelper.php file
require_once('DatabaseHelper.php');
//instantiate DatabaseHelper class
$database = new DatabaseHelper();
//Grab variable id from POST request
$player_id = '';
if(isset($_POST['player_id_del'])){
$player_id = $_POST['player_id_del'];
}
// Delete method
$error_code = $database->deletePlayer($player_id);
// Check result
if ($error_code == 1){
echo "Player with ID: '{$player_id}' successfully deleted!'";
}
else{
echo "Error can't delete Player with ID: '{$player_id}'. Errorcode: {$error_code}";
}
?>
Thank You in advance for any help!
By default jQuery's click event reload the document so, you should try using,
$("#submit-btn").click(function(e){
e.preventDefault();
e.stopPropagation();
});
Also instead of $.post, try using $.ajax
There are many issues in your code
E.g IDs for form and delete input button are repeating (id of element should not be same it should be unique),
The following code is the tested and working.
<?php
//include DatabaseHelper.php file
require_once('DatabaseHelper.php');
//instantiate DatabaseHelper class
$database = new DatabaseHelper();
$response = array();
//Grab variable id from POST request
$player_id = '';
if(isset($_POST['player_id_del'])){
$player_id = $_POST['player_id_del'];
}
// Delete method
$error_code = $database->deletePlayer($player_id);
// Check result
if ($error_code == 1){
$response["success"] = 1;
$response["id"] = $player_id;
$response["message"] = "Player with ID: '{$player_id}' successfully deleted!'";
}
else{
$response["success"] = 0;
$response["message"]= "Error can't delete Player with ID: '{$player_id}'. Errorcode: {$error_code}";
}
echo json_encode($response);
?>
<table class = "table table-hover" id="mPlayersTabel">
<thead>
<tr>
<th>Player_ID</th>
<th>Username</th>
<th>First_Name</th>
<th>Last_Name</th>
<th>Rating</th>
<th>Country</th>
<th>Colour</th>
<th></th>
</tr>
</thead>
<tbody>
<? foreach($playerArray as $player):?>
<tr id= "<? echo $player["PLAYER_ID"]; ?>">
<td><? echo $player["PLAYER_ID"]; ?></td>
<td><? echo $player["USERNAME"]; ?></td>
<td><? echo $player["FIRST_NAME"]; ?></td>
<td><? echo $player["LAST_NAME"]; ?></td>
<td><? echo $player["RATING"]; ?></td>
<td><? echo $player["COUNTRY"]; ?></td>
<td><? echo $player["COLOUR"]; ?></td>
<td>
<div>
<button type="submit" player-id="<? echo $player["PLAYER_ID"]; ?>" class="btn btn-danger" >Delete</button>
</div>
</td>
</tr>
<? endforeach ?>
</tbody>
</table>
<script>
$(document).ready(function(){
$(".btn-danger").on("click touchend" , function(){
var id = $(this).attr("player-id");
$.ajax({
url: 'deletePlayer.php',
type: 'POST',
data: {
player_id_del: id
},
dataType: 'json',
success: function (response) {
//Add this line and try
response = JSON.parse(JSON.stringify(response));
alert(response['message']);
switch (response['success']) {
case 1:
$("#mPlayer" + response['id']).remove();
break;
}
}
});
});
});
</script>
I need your help about my problem. I've two table with checkbox, the first is show all the record from DB (using MySQL) and the second table get the data after I checked and submit from the first table.So I want to disable my checkbox in the first table after I checked and submitted the data to the second table, but if I want cancel the copy I check the second table so the checkbox in the first table will be enabled and the data in the second table will erase (because it just temporary variable for store another DB). In this code I'm using disable but it can't work where is the problem?
// this code for checked the checkbox that be chosen first
session_start();
if (count($_POST)){
//save choices to session
$_SESSION['select_DB']=$_POST['select_DB'];
}
function was_checked($i) {
if ($_SESSION['select_DB']){
if(in_array($i,$_SESSION['select_DB']) ) {
return "checked='checked'";
}
}
return "";
}
?>
// this one if cancel the submit
<script>
function openCB() {
document.getElementById("balik_DB[]").disabled = false;
}
</script>
//i'm using this to disable checkbox after submit
<script>
function closeCB() {
document.getElementById("balik_DB[]").disabled = true;
}
</script>
<!-- This code show table with checkbox that its value get from DB-->
<tbody>
<?php
include "db_connect.php";
$sql_select = $dt_bas->prepare("SELECT id_pegawai, nm_pegawai, tmp_lahir FROM pegawai");
$sql_select->execute();
while($row = $sql_select->fetch(PDO::FETCH_ASSOC)){
$id = $row["id_pegawai"]; // id
$nm = $row["nm_pegawai"]; // employe name
$tmp = $row["tmp_lahir"]; // birthday
?>
<tr>
<td><input type="checkbox" name="select_DB[]" id="select_DB[]" value=<?php echo"$id";?> <?=was_checked($id)?>/></td>
<td><?php echo "$id";?></td>
<td><?php echo "$nm";?></td>
<td><?php echo "$tmp";?></td>
<td>
Ubah
Detail
</td>
</tr>
<?php } ?>
</tbody>
<!--this the second table that get its value from the first table-->
<form>
<table border="1">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Nama</th>
<th>TTL</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php
// this code for get the data that is chosen from checkbox
include "db_connect.php";
if(isset($_POST['select_DB'])){
foreach($_POST['select_DB'] as $select=>$option_id){
$sql_select2 = $dt_bas->prepare("SELECT id_pegawai, nm_pegawai, tmp_lahir FROM pegawai WHERE id_pegawai = '$option_id' ");
$sql_select2->execute();
while($row = $sql_select2->fetch(PDO::FETCH_ASSOC)){
$id = $row["id_pegawai"]; // id
$nm = $row["nm_pegawai"]; // employee name
$tmp = $row["tmp_lahir"]; // birth place
?>
<tr>
<td><input type="checkbox" id="balik_DB[]" value="<?php echo"$id";?>"/></td>
<td><?php echo"$id";?></td>
<td><?php echo"$nm";?></td>
<td><?php echo"$tmp";?></td>
<td>
Ubah
Detail
</td>
</tr>
<?php }
}
}
?>
</tbody>
<tfooter>
</tfooter>
</table>
<input type="submit" value="Balik" onclick="openCB()"/>
</form>
The problem in id="balik_DB[]" because you fetch data from the database and dynamically create checkbox so what will happen when more than one checkbox would have same 'id'(id should be unique).So instead of using id ,you need to use class = "balik_DB[]".
Here I've a drop-down and when user changes this drop-down, I want to show only specific table rows e.g. if Patient Type=Inpatient then JQuery will show only those records .The table rows are dynamically generated by php code. Please suggest me the way i'm new in JQuery.
My drop-down is:
<tr>
<td style="text-align:left"><label>Patient Type:</label></td>
<td>
<select id="patient_type">
<option>Select patient type</option>
<option>InPatient</option>
<option>OutPatient</option>
</select>
</td>
</tr>
The PHP code:
<table class="draw_table" id="datawtable" border="1" width="100%" cellspacing="0" cellpadding="0">
<tr>
<th>
Patient_name
</th>
<th>
Patient Type
</th>
<th>
Payment Type
</th>
<th>
Date
</th>
<th>Amount</th>
</tr>
<?php
$query="SELECT
doctor.doctor_name,inovoice.patient_name,inovoice.patient_type,inovoice.payment_type,inovoice.inovoice_date,inovoice.inovoice_amount from doctor,inovoice,prescription
where doctor.doctor_name=prescription.doctor_name and inovoice.patient_name=prescription.patient_name and doctor.doctor_name='$_SESSION[doctor_nm]' and inovoice.inovoice_date between '$_SESSION[from_dt]' and '$_SESSION[to_dt]' $sortingCode ";
$result=mysql_query($query);
while($row=mysql_fetch_array($result))
{
$newdate=date("d/m/Y", strtotime($row['inovoice_date']));
?>
<tr>
<td><?php echo $row['patient_name'];?></td>
<td id="<?php echo $row['patient_type'];?>"><?php echo $row['patient_type'];?></td>
<td id="<?php echo $row['payment_type'];?>"><?php echo $row['payment_type'];?></td>
<td><?php echo $newdate;?></td>
<td><?php echo $row['inovoice_amount'];?></td>
</tr>
<?php
}
?>
JQuery code:
$( document ).ready(function() {
$('#patient_type').change(function(){
if($(this).val() == "InPatient")
{
alert("hiiiii");
//show InPatient
}
})
});
First of all you should't use id, because it is possible that there are rows with the same id. An id should always be unique. The second thing is if you want to show/hide the rules you should use a identifier on rule (tr) level. If you are using jQuery you can use a data tag, for example:
<tr data-patientType="<?php echo $row['patient_type'];?>">
<td><?php echo $row['patient_name'];?></td>
<td><?php echo row['patient_type'];?></td>
<td><?php echo $row['payment_type'];?></td>
<td><?php echo $newdate;?></td>
<td><?php echo $row['inovoice_amount'];?></td>
</tr>
In jQuery you would get something like the code below:
$( document ).ready(function() {
$('#patient_type').change(function(){
var selectedValue = $("#patient_type option:selected").text();
$('table tr').each(function(){
if($(this).data('patientType') == selectedValue)
{
$(this).css('display', 'block');
}
else
{
$(this).css('display', 'hidden');
}
});
})
});
You need to find the selected option from the select, not it's value.
$( "#patient_type option:selected" ).text();
I have an HTML which displays data from a database table. There'a checkbox field, which stores id of the user. And when I click on a row, that ID has to be passed to another page using a JavaScript function. But I have encountered a few errors. I don't know where I went wrong.
This is my Javascript function. It is used to make the table rows clickable. SO when I click on a row, the corresponding ID is passed to editgroup.php page.
<script>
$('table.table tbody tr').click(function(event)
{
if(event.target.type === 'checkbox')
{
event.preventdefault()
}
else
{
window.location='edituser.php?val=<?php echo $id; ?>';
}
});
</script>
Below given is my table:
<table id="edituser" class="clickable"
<thead>
<th></th>
<th>UserID</th>
<th>Username</th>
</thead>
<tbody>
<?php
for($i=0; $i<$x; $i++)
{
$id= $val_array[$i]['id'];
$userName= $val_array[$i]['userName'];
?>
<tr>
<td class="text-center"><input type="checkbox" value="<?php echo $id; ?>"></td>
<td><?php echo $id; ?></td>
<td><?php echo $userName; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
you have to make some change
First in your tr add id like this
<?php
for($i=0; $i<$x; $i++)
{
$id= $val_array[$i]['id']; //data from database
$userName= $val_array[$i]['userName']; //data from database
?>
<tr id="<?php echo $id;?>"> <!-- add id here -->
<td ><input type="checkbox" value="<?php echo $id; ?>"></td>
<td><?php echo $id; ?></td>
<td><?php echo $userName; ?></td>
</tr>
<?php } ?>
now your JS
<script>
$('table.clickable tbody tr').click(function(event){
if(event.target.type === 'checkbox'){
event.preventdefault()
}else{
var val = $(this).attr('id');
window.location='edituser.php?val='+val;
}
}); </script>
Your Javascript will be
$('table.table tbody tr').click(function(event){
if(event.target.type === 'checkbox'){
event.preventdefault()
}else{
var value = (this).find("input[type='checkbox']").val(); /* Get value from clicked tr Checkbox */
window.location.replace('edituser.php?val='+value); /* Pass the value */
}
});
Create new function with dynamic id for your table row
<tr onclick="edit_user(<?php echo $id;?>)" >
....
</tr>
Then you can find your row of where you have to click
<script>
function edit_user(user_id) {
if(user_id != '') {
window.location='edituser.php?val='+user_id;
}
}
</script>
Or else
This is more even simple your code.
<input type="checkbox" value="<?php echo $id; ?>" onclick="document.location.href='edituser.php?val=<?php echo $id; ?>'">