Toon popup na page refresh
1. Iemand klikt op een knop 'Verwijderen'
2. De database verwijderd het item (het id wordt meegestuurd)
3. De pagina refreshed
4. De popup wordt getoond
Punt 1, 2 en 3 zijn al in orde. Nog juist punt 4 goed krijgen. Ik gebruik toastr om de popup aan te roepen.
In het volledige script hieronder refreshed de page maar daardoor krijg ik de popup niet meer te zien. Hoe kan ik dit oplossen dat de popup wel verschijnt maar enkel na de refresh?
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
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
<a href="#" data-id="<?php echo $hist_id23; ?>" class="showme3 btn btn-danger btn-single btn-xs">Verwijderen</a>
<script>
$(".showme3").on("click", function(e) {
e.preventDefault();
var historiek_id = $(this).data("id");
var id = <?php echo $_GET['id']; ?>;
$.ajax({
url: 'contacten-historiek-verwijderen.php',
type: 'get',
dataType: 'html',
data: {id: historiek_id}
})
.done(function(html) {
var opts = {
"closeButton": true,
"debug": false,
"positionClass": "toast-top-left",
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
location.href='contact-detail.php?id=' + id;
toastr.success("<?php echo $_SESSION['username']; ?>, het historiek item is succesvol verwijderd.", null, opts);
})
.fail(function() {
alert('AJAX heeft verloren');
});
});
</script>
<script>
$(".showme3").on("click", function(e) {
e.preventDefault();
var historiek_id = $(this).data("id");
var id = <?php echo $_GET['id']; ?>;
$.ajax({
url: 'contacten-historiek-verwijderen.php',
type: 'get',
dataType: 'html',
data: {id: historiek_id}
})
.done(function(html) {
var opts = {
"closeButton": true,
"debug": false,
"positionClass": "toast-top-left",
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
location.href='contact-detail.php?id=' + id;
toastr.success("<?php echo $_SESSION['username']; ?>, het historiek item is succesvol verwijderd.", null, opts);
})
.fail(function() {
alert('AJAX heeft verloren');
});
});
</script>
Het antwoord: 'Omdat ik alleen bepaalde gedeeltes wil veranderen.'
Wat doet meneer Brecht:
Na de AJAX request de complete pagina verversen.
Onlogica ten top!.
@Pipo clown: is geen mogelijkheid omdat die nog meer refreshes kan hebben dan alleen deze hier. Refresh kan ook van een andere bron komen.
Ik kan dit heel gemakkelijk oplossen met sessionStorage en dan in de html een javascript zetten met een if statement die kijkt of die sessionStorage niet leeg is. Als die niet leeg is komt de popup te voorschijn en cleared hij die sessionStorage. Maar misschien zijn er betere manier.
jQuery.remove()
Brecht S op 25/01/2015 22:25:07:
@Pipo clown: is geen mogelijkheid omdat die nog meer refreshes kan hebben dan alleen deze hier. Refresh kan ook van een andere bron komen.
Je kunt toch middels JavaScript een hidden inputveld een bepaalde waarde geven voor de refresh aangeroepen wordt, om vervolgens aan de hand van de waarde van dat inputveld te bepalen of de alert al dan niet getoond moet worden ?
Brecht S op 25/01/2015 22:25:07:
Ik kan dit heel gemakkelijk oplossen met sessionStorage en dan in de html een javascript zetten met een if statement die kijkt of die sessionStorage niet leeg is. Als die niet leeg is komt de popup te voorschijn en cleared hij die sessionStorage. Maar misschien zijn er betere manier.
I.p.v. je voorstel om met een hidden input te werken is dit wel een beter idee denk ik. Zo doe ik het nu en dat werkt maar was op zoek naar alternatieven eigenlijk omdat ik niet weet of mijn versie wel de goede is.
Toevoeging op 26/01/2015 09:59:52:
@Ger: jquery.remove, ja misschien wel. Dan hoef je inderdaad niet te refreshen. Thanks voor de tip! Zie hieronder:
1. Iemand klikt op een knop 'Verwijderen' = OK
2. De database verwijderd het item (het id wordt meegestuurd) = OK
3. De pagina refreshed => Geen page refresh meer nodig. jQuery regelt dit nu = OK
4. De popup wordt getoond = OK
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
$(".showme3").on("click", function(e) {
e.preventDefault();
var historiek_id = $(this).data("id");
var id = <?php echo $_GET['id']; ?>;
$.ajax({
url: 'contacten-historiek-verwijderen.php',
type: 'get',
dataType: 'html',
data: {id: historiek_id}
})
.done(function(html) {
//sessionStorage.setItem("refresh", "true");
//location.href='contact-detail.php?id=' + id;
//$('#' + historiek_id + ').remove();
$('table#table-historiek tr#' + historiek_id).remove();
var opts1 = {
"closeButton": true,
"debug": false,
"positionClass": "toast-top-left",
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.success("<?php echo $_SESSION['username']; ?>, het historiek item is succesvol verwijderd.", null, opts1);
})
.fail(function() {
alert('AJAX heeft verloren');
});
});
</script>
e.preventDefault();
var historiek_id = $(this).data("id");
var id = <?php echo $_GET['id']; ?>;
$.ajax({
url: 'contacten-historiek-verwijderen.php',
type: 'get',
dataType: 'html',
data: {id: historiek_id}
})
.done(function(html) {
//sessionStorage.setItem("refresh", "true");
//location.href='contact-detail.php?id=' + id;
//$('#' + historiek_id + ').remove();
$('table#table-historiek tr#' + historiek_id).remove();
var opts1 = {
"closeButton": true,
"debug": false,
"positionClass": "toast-top-left",
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.success("<?php echo $_SESSION['username']; ?>, het historiek item is succesvol verwijderd.", null, opts1);
})
.fail(function() {
alert('AJAX heeft verloren');
});
});
</script>
Ik gebruik dit nu om gegevens uit de tabel te halen en een refresh te vermijden. Nu als ik items in een tabel wil zetten kan ik dit misschien ook gebruiken? Dat dit ook zonder refresh kan? Of is dit niet haalbaar? Welke jquery heb ik daarvoor nodig? En hoe kan ik dit aanpakken?
Gewijzigd op 26/01/2015 17:43:17 door Brecht S