script executen via ui-dialog button
ik heb via PHP een WHILE loop die telkens in een DIV gegevens toont.
via een link klik ik op die div en opent die div in dialoog op het scherm met titel "bent u zeker deze post te verwidjeren?"
hoe kan ik nu via die ja button de gegevens vrwijderen? of een PHP query aanroepen?
elke div bevat ook een hidden field met het post id in zodat ik het ID kan gebruiken om de juiste post te verwijderen. ik zit enkel vast om via een dialog button een script aan te roepen.
iemand die me kan helpen ?
hidden field heet ID
form heet IDKE
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
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
<?php
<script>
$(document).ready(function() {
$('.timeline_shout_buttons').click(function() {
$('#nodig').dialog({
width: 625,
height: 'auto',
buttons: {
Ok: function() {
$.ajax({
type: "POST",
url: "delete.php?id=document.getElementById(#id).value",
data: $("idke").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
}
}
});
});
});
</script>
?>
<script>
$(document).ready(function() {
$('.timeline_shout_buttons').click(function() {
$('#nodig').dialog({
width: 625,
height: 'auto',
buttons: {
Ok: function() {
$.ajax({
type: "POST",
url: "delete.php?id=document.getElementById(#id).value",
data: $("idke").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
}
}
});
});
});
</script>
?>
het wil maar niet lukken
Gewijzigd op 16/05/2013 17:29:08 door anthony de meulemeester
Code (php)
1
$("idke").serialize()
Zo selecteer je idke element. Dat bestaat niet, dus je zal neem ik aan een id op het form hebben:
Code (php)
1
$("#idke").serialize()
Toevoeging op 16/05/2013 17:40:39:
En dit zal ook niet werken, aangezien javascript niet aan variable expansion doet:
Code (php)
1
url: "delete.php?id=document.getElementById(#id).value"
Maak hiervan
Code (php)
1
url: "delete.php?id="+$(id).val()
Waarbij je nog wel even moet kijken waar variabele id vandaan komt. Dat komt nu een beetje uit de lucht vallen.
stap1 dit is mijn WHILE loop = OK
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<?php
echo "<div class='timeline_shout_wrap'>";
echo "<div id='nodig' class='timeline_shout_innerwrap'>";
echo "<div class='timeline_shout_profilepic'><a href='user_profile?username=".$row['username']."'><img id='fotoprev' src='profielfotos/".$thepic['profielfoto']."' width='60' height='60'/></a></div>";
echo "<div class='timeline_shout_text'><span style='color: #000; font-weight: bold;'>" . $row['username'] . "</span> <span style='color: #09F'>@" . $row['vakgebied'] . "</span><span style='float:right; color: #666; font-size:12px'>" . $row['datum'] . "</span><br />" . $row['shouts'] . "<br /><span style='font-size:10px; color:#666'>Reshout</span><div class='timeline_shout_buttons'><form id='idke' method='post' name='idke'><input id='id' name='id' type='hidden' value=' ".$row['id']." '/></form>verwijder</div></div></div></div>";
}
?>
echo "<div class='timeline_shout_wrap'>";
echo "<div id='nodig' class='timeline_shout_innerwrap'>";
echo "<div class='timeline_shout_profilepic'><a href='user_profile?username=".$row['username']."'><img id='fotoprev' src='profielfotos/".$thepic['profielfoto']."' width='60' height='60'/></a></div>";
echo "<div class='timeline_shout_text'><span style='color: #000; font-weight: bold;'>" . $row['username'] . "</span> <span style='color: #09F'>@" . $row['vakgebied'] . "</span><span style='float:right; color: #666; font-size:12px'>" . $row['datum'] . "</span><br />" . $row['shouts'] . "<br /><span style='font-size:10px; color:#666'>Reshout</span><div class='timeline_shout_buttons'><form id='idke' method='post' name='idke'><input id='id' name='id' type='hidden' value=' ".$row['id']." '/></form>verwijder</div></div></div></div>";
}
?>
ik krijg dan 40 resultaten op het scherm alemaal mooi in een divs
stap2 klik op de link verwijder die de dialog opener is en open een dialog met de results van die div bv, shout nr 36 met zijn foto en text = OK
stap3 klik op de dialog button ok om de post te verwijderen = niet OK
hoe weet de jquery terwijl #id 40 keer is ge echo'd welk id nummer hij nu moet nemen of is dat automatisch doordat ik de juiste div met text in dialog heb? snapje?
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div class="timeline_shout_wrap">
<input type="submit" class="timeline_shout_buttons" data-id="1" value="SHOUT">
</div>
<div class="timeline_shout_wrap">
<input type="submit" class="timeline_shout_buttons" data-id="2" value="SHOUT">
</div>
<div class="timeline_shout_wrap">
<input type="submit" class="timeline_shout_buttons" data-id="3" value="SHOUT">
</div>
<input type="submit" class="timeline_shout_buttons" data-id="1" value="SHOUT">
</div>
<div class="timeline_shout_wrap">
<input type="submit" class="timeline_shout_buttons" data-id="2" value="SHOUT">
</div>
<div class="timeline_shout_wrap">
<input type="submit" class="timeline_shout_buttons" data-id="3" value="SHOUT">
</div>
Merk op dat ik elke button een custom attribuut heb gegeven waarin het id staat.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$(document).ready(function(){
$('.timeline_shout_buttons').click(function(e){
e.preventDefault();
var id = $(this).attr('data-id');
});
});
$('.timeline_shout_buttons').click(function(e){
e.preventDefault();
var id = $(this).attr('data-id');
});
});
Je zal dus aan de hand van de geklikte button (welke je altijd in de event handler met this kan opvragen) het id moeten ophalen. Staat het id in een andere element dan zal je dus met behulp van jquery functies door de DOM moeten gaan zoeken naar dat element (via parent(), closest(), find(), etc).
ik gebruik nu de clone functie om de div te clonen in de dialog
maar hoe krijg ik die erna weg enkel de clone niet de dialog div.
$(document).ready(function() {
$('.timeline_shout_buttons').click(function() {
$(this).closest('#wrappy').clone().appendTo('#nodig');
var id = $('#id').val();
$("#id").serialize();
$('#nodig').dialog({
width: 625,
height: 'auto',
buttons: {
Ok: function() {
$(this).dialog('close');
$.ajax({
type: "GET",
url: "delete.php?id="+$(id).val(),
data: $("#id").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
}
}
});
});
});
Code (php)
1
2
3
4
5
2
3
4
5
var clone = $(this).closest('#wrappy').clone();
clone.appendTo('#nodig');
//dan later als je het niet meer nodig hebt
clone.remove();
clone.appendTo('#nodig');
//dan later als je het niet meer nodig hebt
clone.remove();
Toevoeging op 16/05/2013 20:19:31:
shit ik kan mijn ID niet fetchen hij geeft altijd 28 aan
de laatste result in de rij
ik heb in code var id = $(this).find('#id').val(); geprobeerd met closest ook maar altijd 28
dit is het laatste dan is alles prima ok
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<?php
echo "<div class='timeline_shout_wrap'>";
echo "<div id='wrappy' class='timeline_shout_innerwrap'><input id='id' name='id' type='hidden' value=' ".$row['id']." '/>";
echo "<div class='timeline_shout_profilepic'><a href='user_profile?username=".$row['username']."'><img id='fotoprev' src='profielfotos/".$thepic['profielfoto']."' width='60' height='60'/></a><form id='idke' method='post' name='idke'></form></div>";
echo "<div class='timeline_shout_text'><span style='color: #000; font-weight: bold;'>" . $row['username'] . "</span> <span style='color: #09F'>@" . $row['vakgebied'] . "</span><span style='float:right; color: #666; font-size:12px'>" . $row['datum'] . "</span><br />" . $row['shouts'] . "<br /><span style='font-size:10px; color:#666'>Reshout</span><div class='timeline_shout_buttons'>Reshout</div></div></div></div>";
}
?>
echo "<div class='timeline_shout_wrap'>";
echo "<div id='wrappy' class='timeline_shout_innerwrap'><input id='id' name='id' type='hidden' value=' ".$row['id']." '/>";
echo "<div class='timeline_shout_profilepic'><a href='user_profile?username=".$row['username']."'><img id='fotoprev' src='profielfotos/".$thepic['profielfoto']."' width='60' height='60'/></a><form id='idke' method='post' name='idke'></form></div>";
echo "<div class='timeline_shout_text'><span style='color: #000; font-weight: bold;'>" . $row['username'] . "</span> <span style='color: #09F'>@" . $row['vakgebied'] . "</span><span style='float:right; color: #666; font-size:12px'>" . $row['datum'] . "</span><br />" . $row['shouts'] . "<br /><span style='font-size:10px; color:#666'>Reshout</span><div class='timeline_shout_buttons'>Reshout</div></div></div></div>";
}
?>
Toevoeging op 16/05/2013 21:06:47:
alert(id) geeft de correcte nummer
aleen ik krijg het niet verzonden met ajax
$(document).ready(function() {
$('.timeline_shout_buttons').click(function(e) {
e.preventDefault();
var id = $(this).attr('data-id');
var clone = $(this).closest('#wrappy').clone();
clone.appendTo('#nodig');
alert(id);
$('#nodig').dialog({
width: 625,
height: 'auto',
buttons: {
Ok: function() {
clone.remove();
$(this).dialog('close');
$.ajax({
type: "GET",
url: "delete.php?id="+$(id).val(),
// serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
}
}
});
});
});
Code (php)
1
2
3
4
5
2
3
4
5
<input class='shout_id' type='hidden' value='...'/>
//en dan moet je even puzzelen hoe bij het element te komen
//dit zal denk ik niet werken, maar je html is te ondoorzichtig voor mij om het te bepalen
var id = $(this).closest('.shout_id').val();
//en dan moet je even puzzelen hoe bij het element te komen
//dit zal denk ik niet werken, maar je html is te ondoorzichtig voor mij om het te bepalen
var id = $(this).closest('.shout_id').val();
Vervolgens moet je ook nog even het volgende veranderen:
Code (php)
1
2
3
4
5
2
3
4
5
//van:
url: "delete.php?id="+$(id).val(),
//naar:
url: "delete.php?id="+id,
url: "delete.php?id="+$(id).val(),
//naar:
url: "delete.php?id="+id,
Gewijzigd op 17/05/2013 10:26:19 door Erwin H