delete data of table on image click
Dat is hoe de pagina eruit ziet, en als je op dat kruisje drukt, moet de data van die rij worden verwijderd. Maar dat is moeilijker door dit (denk ik):
Je kan hier geen form doen, zodat die de data kan met method"POST" of method "GET" kan gebruiken. Enige ideeën hoe ik kan zorgen dat als je op dat plaatje drukt dat de data verwijderd wordt met een SQL met het id wat daar links staat bij 'id'.
Mvg,
Rob
Gewijzigd op 28/11/2016 19:33:02 door - Rob -
- Item verwijderd wordt
- Het item in de HTML ook direct verdwijnt?
In dat geval kan je prima met jQuery en AJAX werken:
http://papermashup.com/jquery-ajax-delete/
Gewijzigd op 28/11/2016 19:42:27 door - Rob -
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>Gebruikersnaam</th>
<th>Promotag</th>
<th>Gegeven door</th>
<th>Gekregen op</th>
<th>Verwijder</th>
</tr>
</thead>
<tbody></code>
<?php $result = mysqli_query($con,"SELECT * FROM paneel_promotags");
$i = 0;
while($row = $result->fetch_assoc())
{
if ($i == 0) {
$i++;
echo "<tr>";
foreach ($row as $key => $value) {
echo "";
}
echo "</tr>";
}
echo "<tr>";
$row['verwijder'] = '<img src="http://countrywidesucks.co.uk/images/tick-no.png" draggable="false" style="width: 15px; height: 15px;" border="0" />';
foreach ($row as $value) {
echo "<td>" . $value . "</td>";
}
echo "</tr>";
}
?>
</code> <tfoot>
<tr>
<th>ID</th>
<th>Gebruikersnaam</th>
<th>Promotag</th>
<th>Gegeven door</th>
<th>Gekregen op</th>
<th>Verwijder</th>
</tr>
</tfoot>
</table>
</div>
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>Gebruikersnaam</th>
<th>Promotag</th>
<th>Gegeven door</th>
<th>Gekregen op</th>
<th>Verwijder</th>
</tr>
</thead>
<tbody></code>
<?php $result = mysqli_query($con,"SELECT * FROM paneel_promotags");
$i = 0;
while($row = $result->fetch_assoc())
{
if ($i == 0) {
$i++;
echo "<tr>";
foreach ($row as $key => $value) {
echo "";
}
echo "</tr>";
}
echo "<tr>";
$row['verwijder'] = '<img src="http://countrywidesucks.co.uk/images/tick-no.png" draggable="false" style="width: 15px; height: 15px;" border="0" />';
foreach ($row as $value) {
echo "<td>" . $value . "</td>";
}
echo "</tr>";
}
?>
</code> <tfoot>
<tr>
<th>ID</th>
<th>Gebruikersnaam</th>
<th>Promotag</th>
<th>Gegeven door</th>
<th>Gekregen op</th>
<th>Verwijder</th>
</tr>
</tfoot>
</table>
</div>
Toevoeging op 28/11/2016 19:58:29:
O ik zie dat die HTML niet meepakt, welke tags moet ik gebruiken daarvoor?
Gewijzigd op 28/11/2016 20:17:12 door - Rob -
Zie ook de Veelgestelde Vragen.
Gewijzigd op 28/11/2016 20:13:40 door - Ariën -
Gewijzigd op 28/11/2016 20:18:23 door - Rob -
Of nog mooier, refresh-loos met AJAX waar ik al heen linkte.
Gewijzigd op 28/11/2016 20:44:20 door - Rob -
Quote:
The variable ‘id’ is then set with the value of the delete button id which would could be the id of the row in the database that you want to delete. This is then posted to the page delete.php.
Met andere woorden: Er wordt dus delete.php aangeroepen, waarin je dan een DELETE-query uitvoert om je ID te verwijderen.
Gewijzigd op 28/11/2016 20:56:14 door - Ariën -
Code (php)
1
$row['verwijder'] = '<img class="remove" id="567" src="http://countrywidesucks.co.uk/images/tick-no.png" draggable="false" style="width: 15px; height: 15px;" border="0" />';
De img heeft nu een class die gebruikte wordt voor een click functie met jquery. Daarna heeft deze een id (567) gekregen, is id uit database. Nu kan je het volgende doen in jquery
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready(function()){
$('.remove').on('click', function()){
// krijg element waarop je klikt met this
var remove_id = $(this).attr('id');
// ajax request
$.ajax({
url:"hier_script_die_delete_query doet",
type : 'POST',
// Type data dat je terug verwacht van php script, in dit geval json
dataType : "json",
// stuur als post request param, die je kan gebruiken in je php script
data : param : {id : remove_id },
// callback function data (data is de response die je van php krijgt)
success:function(data) {
// hier heb je meerdere opties::
// pagina refreshen
// met jquery de row verwijderen
}
});
});
}
$('.remove').on('click', function()){
// krijg element waarop je klikt met this
var remove_id = $(this).attr('id');
// ajax request
$.ajax({
url:"hier_script_die_delete_query doet",
type : 'POST',
// Type data dat je terug verwacht van php script, in dit geval json
dataType : "json",
// stuur als post request param, die je kan gebruiken in je php script
data : param : {id : remove_id },
// callback function data (data is de response die je van php krijgt)
success:function(data) {
// hier heb je meerdere opties::
// pagina refreshen
// met jquery de row verwijderen
}
});
});
}
Ik heb de code zo even uit me hoofd getypt kunnen foutjes in zitten, hoop dat je hier wat aan hebt.
Code (php)
JavaScript
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script type="text/javascript">
$(document).ready(function() {
$('').hide();
});
$(function() {
$(".delete").click(function() {
$('').fadeIn();
var commentContainer = $(this).parent();
var id = $(this).attr("id");
var string = 'id='+ id ;
$.ajax({
type: "POST",
url: "verwijderen.php",
data: string,
cache: false,
success: function(){
commentContainer.slideUp('slow', function() {$(this).remove();});
$('').fadeOut();
}
});
return false;
});
});
</script>
$(document).ready(function() {
$('').hide();
});
$(function() {
$(".delete").click(function() {
$('').fadeIn();
var commentContainer = $(this).parent();
var id = $(this).attr("id");
var string = 'id='+ id ;
$.ajax({
type: "POST",
url: "verwijderen.php",
data: string,
cache: false,
success: function(){
commentContainer.slideUp('slow', function() {$(this).remove();});
$('').fadeOut();
}
});
return false;
});
});
</script>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>Gebruikersnaam</th>
<th>Promotag</th>
<th>Gegeven door</th>
<th>Gekregen op</th>
<?php
if($PaneelLevel['toegang_admin'] == 1){
echo '<th>Verwijder</th>';
}
?>
</tr>
</thead>
<tbody>
<?php $result = mysqli_query($con,"SELECT * FROM paneel_promotags");
$i = 0;
while($row = $result->fetch_assoc())
{
if ($i == 0) {
$i++;
echo "<tr>";
foreach ($row as $key => $value) {
echo "";
}
echo "</tr>";
}
echo "<tr>";
if($PaneelLevel['toegang_admin'] == 1){
$row['verwijder'] = '<a id="'. $row['id'] .'" class="delete" href="#"><img src="http://countrywidesucks.co.uk/images/tick-no.png" draggable="false" style="width: 15px; height: 15px;" border="0" /></a>';
}
foreach ($row as $value) {
echo "<td>" . $value . "</td>";
}
echo "</tr>";
}
?> <tfoot>
<tr>
<th>ID</th>
<th>Gebruikersnaam</th>
<th>Promotag</th>
<th>Gegeven door</th>
<th>Gekregen op</th>
<?php
if($PaneelLevel['toegang_admin'] == 1){
echo '<th>Verwijder</th>';
}
?>
</tr>
</tfoot>
</table>
</div>
</div>
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>Gebruikersnaam</th>
<th>Promotag</th>
<th>Gegeven door</th>
<th>Gekregen op</th>
<?php
if($PaneelLevel['toegang_admin'] == 1){
echo '<th>Verwijder</th>';
}
?>
</tr>
</thead>
<tbody>
<?php $result = mysqli_query($con,"SELECT * FROM paneel_promotags");
$i = 0;
while($row = $result->fetch_assoc())
{
if ($i == 0) {
$i++;
echo "<tr>";
foreach ($row as $key => $value) {
echo "";
}
echo "</tr>";
}
echo "<tr>";
if($PaneelLevel['toegang_admin'] == 1){
$row['verwijder'] = '<a id="'. $row['id'] .'" class="delete" href="#"><img src="http://countrywidesucks.co.uk/images/tick-no.png" draggable="false" style="width: 15px; height: 15px;" border="0" /></a>';
}
foreach ($row as $value) {
echo "<td>" . $value . "</td>";
}
echo "</tr>";
}
?> <tfoot>
<tr>
<th>ID</th>
<th>Gebruikersnaam</th>
<th>Promotag</th>
<th>Gegeven door</th>
<th>Gekregen op</th>
<?php
if($PaneelLevel['toegang_admin'] == 1){
echo '<th>Verwijder</th>';
}
?>
</tr>
</tfoot>
</table>
</div>
</div>
Toevoeging op 28/11/2016 21:33:50:
Mr Beronne op 28/11/2016 21:23:51:
Ik zal het ongeveer zo doen, heb ik even snel gemaakt
De img heeft nu een class die gebruikte wordt voor een click functie met jquery. Daarna heeft deze een id (567) gekregen, is id uit database. Nu kan je het volgende doen in jquery
Ik heb de code zo even uit me hoofd getypt kunnen foutjes in zitten, hoop dat je hier wat aan hebt.
Code (php)
1
$row['verwijder'] = '<img class="remove" id="567" src="http://countrywidesucks.co.uk/images/tick-no.png" draggable="false" style="width: 15px; height: 15px;" border="0" />';
De img heeft nu een class die gebruikte wordt voor een click functie met jquery. Daarna heeft deze een id (567) gekregen, is id uit database. Nu kan je het volgende doen in jquery
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready(function()){
$('.remove').on('click', function()){
// krijg element waarop je klikt met this
var remove_id = $(this).attr('id');
// ajax request
$.ajax({
url:"hier_script_die_delete_query doet",
type : 'POST',
// Type data dat je terug verwacht van php script, in dit geval json
dataType : "json",
// stuur als post request param, die je kan gebruiken in je php script
data : param : {id : remove_id },
// callback function data (data is de response die je van php krijgt)
success:function(data) {
// hier heb je meerdere opties::
// pagina refreshen
// met jquery de row verwijderen
}
});
});
}
$('.remove').on('click', function()){
// krijg element waarop je klikt met this
var remove_id = $(this).attr('id');
// ajax request
$.ajax({
url:"hier_script_die_delete_query doet",
type : 'POST',
// Type data dat je terug verwacht van php script, in dit geval json
dataType : "json",
// stuur als post request param, die je kan gebruiken in je php script
data : param : {id : remove_id },
// callback function data (data is de response die je van php krijgt)
success:function(data) {
// hier heb je meerdere opties::
// pagina refreshen
// met jquery de row verwijderen
}
});
});
}
Ik heb de code zo even uit me hoofd getypt kunnen foutjes in zitten, hoop dat je hier wat aan hebt.
Als je op het plaatje drukt gebeurt er dus niks... Enig idee waarom?
Hoe ziet je HTML in je browser eruit?
Gewijzigd op 28/11/2016 21:44:59 door - Ariën -
Code (php)
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Toevoeging op 28/11/2016 21:51:29:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
if($PaneelLevel['toegang_admin'] == 1){
$row['verwijder'] = '<form action="" method="POST"><button type="submit" name="submit" class="remove" id="'. $row['id'] .'"><img src="http://countrywidesucks.co.uk/images/tick-no.png" draggable="false" style="width: 15px; height: 15px;" border="0"></button></form>';
}
foreach ($row as $value) {
echo "<td>" . $value . "</td>";
}
echo "</tr>";
if(isset($_POST['submit'])){
$sql = "DELETE FROM paneel_promotags WHERE id='". $row['id'] ."'";
if (mysqli_query($con,$sql) === true) {
echo '<meta http-equiv="refresh" content="0">';
} else {
}
$row['verwijder'] = '<form action="" method="POST"><button type="submit" name="submit" class="remove" id="'. $row['id'] .'"><img src="http://countrywidesucks.co.uk/images/tick-no.png" draggable="false" style="width: 15px; height: 15px;" border="0"></button></form>';
}
foreach ($row as $value) {
echo "<td>" . $value . "</td>";
}
echo "</tr>";
if(isset($_POST['submit'])){
$sql = "DELETE FROM paneel_promotags WHERE id='". $row['id'] ."'";
if (mysqli_query($con,$sql) === true) {
echo '<meta http-equiv="refresh" content="0">';
} else {
}