Delete a row javascript using row id - javascript

Hi guys I have a table created by php in this way:
foreach ($query as $row): ?>
<tr id="<?php echo $row->aic;?>" >
<td><?php echo $row->aic; ?></td>
<td><?php echo $row->denominazione ?></td>
<td><?php echo $row->quantita; ?></td>
<td><?php echo $row->alert; ?></td>
<td>
<a id="bt_modifica"
class="btn btn-default btn-xs"
data-toggle="tooltip"
data-placement="top"
title=""
data-original-title="Modifica">
<img src="<?php echo base_url(); ?>template/images/Modifica.png">
</a>
<a id="bt_elimina>"
class="btn btn-default btn-xs"
data-toggle="tooltip"
data-placement="top"
title=""
data-original-title="Elimina"
onclick="deleteRow(<?php echo $row->aic ?>))">
<img src="<?php echo base_url(); ?>template/images/Elimina.png">
</a>
</td>
</tr>
<?php
endforeach; ?>
</tbody>
I need to delete row by rowId. This table has the dynamics id.
The columns ids are the same id of the sql table; in effect aic is id of sql table! In this way I are sure that the HTML row id is unique.
This is script
function deleteRow(rowID)
{ var row = document.getElementById(rowID);
row.parentElement.removeChild(row);
alert(rowID);
}
}
this code don't delete row.

Change this:
onclick="deleteRow(deleteRow(<?php echo $row->aic ?>))">
to
onclick="deleteRow(<?php echo $row->aic ?>)">
Another potential issue is that this:
<?php echo $row->aic ?>
may not be a number. So, you need to quote it. That is, change:
onclick="deleteRow(<?php echo $row->aic ?>)">
to:
onclick="deleteRow(\"<?php echo $row->aic ?>\")">

2 issues -
The one that might be causing issue - Incorrect Function Name
Other one - Calling deleteRow() twice - within each other (this should not cause any issue though)
So, just change -
function eliminaProdotto(rowID)
to -
function deleteRow(rowID)
Edit:
Based on modified question -
Is $row->aic a string? If yes, then add quotes around it...
onclick="deleteRow('<?php echo $row->aic ?>')"

Related

How to display the databases content in a popover by ID (with Foreach)

I have a table containing list of users, when i hover selector button "myuser" it is necessary that a popover is displayed with the mail of user select.
The problem is if I click on button: the popover displays the email of all users each time.
<td
class="classgroup"
tabindex="0"
id="classgroup"
data-html="true"
data-toggle="popover"
data-trigger="hover"
data-trigger="focus"
title="<?php foreach ($client as $person): ?><?php echo $person->nom; ?><?php endforeach;?>"
data-content="<?php foreach ($client as $person): ?><?php echo $person->email; ?><?php endforeach;?>">
myuser
</td>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
<?php foreach ($client as $person): ?>
<td
class="classgroup"
tabindex="0"
id="classgroup"
data-html="true"
data-toggle="popover"
data-trigger="hover"
data-trigger="focus"
title="<?php echo $person->nom; ?>"
data-content="<?php echo $person->email; ?>">
myuser
</td>
<?php endforeach;?>
moving the foreach loop out will create as many table cells as items in the array you are looping. Adapt it to your desired output (like splitting in multiple lines)

JQuery Adding of row in table not working

I'm trying to add a row in a table from a data from another table. it says uncaught reference error.
here's the function
function addItem(id, name){
bootbox.confirm("Are you sure?", function(result) {
if (result) {
$('#ingredients_table').append("<tr><td>"+name+"</td></tr>");
}
});
}
here's the table where I'm calling the js function
<?php foreach($inventory as $row): ?>
<tr style="cursor: pointer;" data-toggle="tooltip" data-placement="top" title="Add ingredient" onclick="javascript:addItem(<?php echo $row->inventory_id; ?>, <?php echo $row->name; ?>)">
<td><?php echo $row->name; ?></td>
</tr>
<?php endforeach; ?>
The ID is showing in the table when I switch them, but the name is not.
Hope this will help you :
use '' (quotes) for javascript function arguments
<?php foreach($inventory as $row): ?>
<tr style="cursor: pointer;" data-toggle="tooltip" data-placement="top"
title="Add ingredient"
onclick="javascript:addItem('<?php echo $row->inventory_id; ?>', '<?php echo $row->name; ?>')">
<td><?php echo $row->name; ?></td>

modal is triggered when i go to another page

i have three buttons (view,update,delete) , the view button is an href that goes to another page and brings an id with it, while my update triggers a modal. my problem is that when i click the view button it goes to the other page but it also triggers the update modal.
home.php
<?php
foreach($schedRow as $row)
{
?>
<tr>
<td><?php echo $row['subject_db']; ?></td>
<td><?php echo $row['section_db']; ?></td>
<td><?php echo $row['sched_day']; ?></td>
<td><?php $stime=$row['start_time'];
$etime=$row['end_time']; echo "".date('h:i a',strtotime($stime))." ~ ".date('h:i a',strtotime($etime))."";?></td>
<td>
View
<a href="#" class="btn btn-warning" data-toggle="modal"
data-target="#updateModal-<?php echo $row['sched_id']; ?>">Update</a>
Delete
<?php include'modal_update_sched.php'; ?>
</td>
</tr>
<?php
}
?>
heres the id of my modal
id="updateModal-<?php echo $row['sched_id']; ?>"
i solved it, the problem is that i called the modal in my view.php thats why it keeps triggering, note that i separated the code for my modal in another php file named modal_update_sched.php , i somewhat had an include 'modal_update_sched.php'; in my view.php, deleting it solved my problem.

X-editable in loop

I have this code in view:
<?php foreach ($display as $disp): ?>
<td><a href="#" id="name" data-type="text" data-pk="<?php echo $disp->id;?>" data-url="<?php echo Yii::$app->request->baseUrl;?>/product/update" ><?=$disp->name?></a></td>
<?php endforeach;?>
This shows all the names but only first name is editable with x-editable.
here is the javascripts used:
$.fn.editable.defaults.mode = 'inline';
$(document).ready(function() {
$('#name').editable();
});
The ID must be unique. this could have done with class.
<?php foreach ($display as $disp): ?>
<td><a href="#" class="name" data-type="text" data-pk="<?php echo $disp->id;?>" data-url="<?php echo Yii::$app->request->baseUrl;?>/product/update" ><?=$disp->name?></a></td>
<?php endforeach;?>
and,
$('.name').editable();

Removing a tr widens other tds

I am trying to remove a table row in Javascript but when the row does disappear, the first column of the table widens, I can't figure why.
Does anyone can help me?
Here is my HTML:
<table id="todos">
<?php foreach ($todos as $row) : ?>
<tr todoid="<?php echo $row['id']; ?>">
<td class="isDone"><input type="checkbox" name="done" /></td>
<td class="title" <?php if ($row['dueDate'] == null) echo "colspan='2'"; ?>><i class="delete fa fa-trash-o"></i> <?php echo $row['title']; ?></td>
<?php if ($row['dueDate'] != null) : ?>
<td class="dueDate"><?php echo relativeDate($row['dueDate']); ?></td>
<?php else : ?>
<td></td>
<?php endif; ?>
</tr>
<?php endforeach; ?>
</table>
And here is my js:
$("tr[todoid] td.title .delete").click(deleteTodoHandler);
...
function deleteTodoHandler(event) {
console.log("deleteTodoHandler");
$(event.target).parents("tr").remove();
}
Thanks!
If you do not specify widths of the cells, they will expand to fit the content.
I removed the top row and the other rows adjusted since the second cell did not need a lot of space due to the large string.
If you do not want the shifting to occur, you need to set widths.

Categories