Jquery dialog wilt niet helemaal lukken.
Ik heb het voor elkaar gekregen om een erg mooie dialog popup op mijn scherm te krijgen volgens de volgende tutorial: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/build-a-popup-modal-window-using-the-jquery-reveal-plugin/
Ik genereer vanuit PHP een html table met daarin een delete linkje.
Nu geef ik aan dit linkje een id mee genaamd delete.
Dan in mijn jquery zeg ik:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
$(document).ready(function()
{
$('#delete').click(function(e)
{
// Button which will activate our modal
$('#dialog-modal').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 600, // how fast animtions are
closeonbackgroundclick: true, // if you click background will modal close?
dismissmodalclass: 'close' // the class of a button or element that will close an open modal
});
return false;
});
});
</script>
$(document).ready(function()
{
$('#delete').click(function(e)
{
// Button which will activate our modal
$('#dialog-modal').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 600, // how fast animtions are
closeonbackgroundclick: true, // if you click background will modal close?
dismissmodalclass: 'close' // the class of a button or element that will close an open modal
});
return false;
});
});
</script>
Dit is de PHP code die de tabel genereerd en de dialog html:
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
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
<?php while($row = mysql_fetch_array($result))
{
$publishDate = $row['published_date'];
$author = $row['author'];
switch ($row['publish_status'])
{
case 0:
$status = '<a href="http://localhost/cms/admin/pages/content/page-overview?id='.$row['id'].'&action=publish¤tpage='.$currentpage.'"><img src="/cms/admin/images/icons/16x16/delete.png" name="unpublished" /></a><span> Inactive</span>';
break;
case 1:
$status = '<a href="http://localhost/cms/admin/pages/content/page-overview?id='.$row['id'].'&action=unpublish¤tpage='.$currentpage.'"><img src="/cms/admin/images/icons/16x16/accept.png" name="published" value="'.$row['id'].'"/></a><span> Active</span>';
break;
}
$actions = '<a href="http://localhost/cms/admin/pages/content/edit-page?id='.$row['id'].'"><img src="/cms/admin/images/icons/16x16/page_white_edit.png"><span>edit</span></a>
<a id="delete" href="#"><img src="/cms/admin/images/icons/16x16/page_white_delete.png"><span>delete</span></a>';
echo "<tr><td><input type='checkbox' name=page[] id='".$row['id']."' value='".$row['id']."'>
</td><td>" . $status . "</td><td>" . $row['title'] . "</td><td>" . $publishDate . "</td><td>" . $author . "</td><td>" . $actions . "</td></tr>";
}
//http://localhost/cms/admin/pages/content/page-overview?id='.$row['id'].'&action=delete¤tpage='.$currentpage.'
echo "</tbody> </table>";
echo '<div id="dialog-modal">
<div id="heading">
Are you sure you want to do that?
</div>
<div id="content">
<p>Clicking yes will make Comic Sans your new system<br> default font. Seriously, have you thought this through?</p>
<a href="#" class="button green close"><img src="images/tick.png">Yes, do it now!</a>
<a href="#" class="button red close"><img src="images/cross.png">No, I’m insane!</a>
</div>
</div>'; ?>
{
$publishDate = $row['published_date'];
$author = $row['author'];
switch ($row['publish_status'])
{
case 0:
$status = '<a href="http://localhost/cms/admin/pages/content/page-overview?id='.$row['id'].'&action=publish¤tpage='.$currentpage.'"><img src="/cms/admin/images/icons/16x16/delete.png" name="unpublished" /></a><span> Inactive</span>';
break;
case 1:
$status = '<a href="http://localhost/cms/admin/pages/content/page-overview?id='.$row['id'].'&action=unpublish¤tpage='.$currentpage.'"><img src="/cms/admin/images/icons/16x16/accept.png" name="published" value="'.$row['id'].'"/></a><span> Active</span>';
break;
}
$actions = '<a href="http://localhost/cms/admin/pages/content/edit-page?id='.$row['id'].'"><img src="/cms/admin/images/icons/16x16/page_white_edit.png"><span>edit</span></a>
<a id="delete" href="#"><img src="/cms/admin/images/icons/16x16/page_white_delete.png"><span>delete</span></a>';
echo "<tr><td><input type='checkbox' name=page[] id='".$row['id']."' value='".$row['id']."'>
</td><td>" . $status . "</td><td>" . $row['title'] . "</td><td>" . $publishDate . "</td><td>" . $author . "</td><td>" . $actions . "</td></tr>";
}
//http://localhost/cms/admin/pages/content/page-overview?id='.$row['id'].'&action=delete¤tpage='.$currentpage.'
echo "</tbody> </table>";
echo '<div id="dialog-modal">
<div id="heading">
Are you sure you want to do that?
</div>
<div id="content">
<p>Clicking yes will make Comic Sans your new system<br> default font. Seriously, have you thought this through?</p>
<a href="#" class="button green close"><img src="images/tick.png">Yes, do it now!</a>
<a href="#" class="button red close"><img src="images/cross.png">No, I’m insane!</a>
</div>
</div>'; ?>
Bij het eerste delete linkje krijg ik inderdaad de dialog, maar bij de rest krijg ik helemaal niets.... waar kan dit aan liggen?
Tevens zou het fantastisch zijn als iemand een jquery truukje weet om automatisch de url mee te geven aan de yes button van de dialog, nu moet ik handmatig aangeven waar deze heen moet linken, bij de default dialog confirm box volgt die gewoon de actie en hoef je niet te zeggen dat die bijv naar www.google moet doorlinken..
Ik kijk erg uit naar reacties!
Alvast bedankt.
Dus, jij genereert verschillende elementen met de zelfde id. id moet uniek zijn !!!!!!
Als het niet uniek is, gebruik je class.
Dus iets als
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<?php
while($row = mysql_fetch_array($result)) {
...
$actions = ' ... <a class="delete" href="#" data-id="' . $row['id'] . '"> ... ';
...
?>
while($row = mysql_fetch_array($result)) {
...
$actions = ' ... <a class="delete" href="#" data-id="' . $row['id'] . '"> ... ';
...
?>
En dan
Code (php)
1
2
3
4
5
6
2
3
4
5
6
...
$('.delete').click(function(e) { // zo spreek je een class aan
var gekozen_knop = $(this); // dit is dus enkel de knop/link waar de gebruiker op geklikt heeft
var id = gekozen_knop.data('id'); // dit leest dus data-id="..."
...
}
$('.delete').click(function(e) { // zo spreek je een class aan
var gekozen_knop = $(this); // dit is dus enkel de knop/link waar de gebruiker op geklikt heeft
var id = gekozen_knop.data('id'); // dit leest dus data-id="..."
...
}
Begin even daarmee.
Ik krijg inmiddels een dialog bij ieder linkje, ik heb nu even jouw code erin gezet en mijn eigen script even commented zodat die niet meedoet.
Whats next?
Alvast super bedankt!
Toevoeging op 04/10/2013 11:24:56:
Ik heb het inmiddels zelf 1 en ander gtweaked zodat het naar wens is, Kris super bedankt! U verdient echt een award voor alle tijd en hulp die u in dit forum steekt!
Hier is mijn final code:
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
<script>
$(document).ready(function()
{
$('.delete').click(function(e)
{
var gekozen_knop = $(this); // dit is dus enkel de knop/link waar de gebruiker op geklikt heeft
var id = gekozen_knop.data('id'); // dit leest dus data-id="..."
//Button which will activate our modal
$('#dialog-modal').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 600, // how fast animtions are
closeonbackgroundclick: true, // if you click background will modal close?
dismissmodalclass: 'close' // the class of a button or element that will close an open modal
});
$('#confirm').click(function()
{
window.location.href = id;
});
return false;
});
});
</script>
$(document).ready(function()
{
$('.delete').click(function(e)
{
var gekozen_knop = $(this); // dit is dus enkel de knop/link waar de gebruiker op geklikt heeft
var id = gekozen_knop.data('id'); // dit leest dus data-id="..."
//Button which will activate our modal
$('#dialog-modal').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 600, // how fast animtions are
closeonbackgroundclick: true, // if you click background will modal close?
dismissmodalclass: 'close' // the class of a button or element that will close an open modal
});
$('#confirm').click(function()
{
window.location.href = id;
});
return false;
});
});
</script>