Variable meesturen met onclick

[pilootnour5]

Beste lezers,

Ik ben vooral bezig met php en ben niet echt thuis in javascript, maar moet helaas toch het een en ander aan javascript gebruiken. Ik zit met het volgende en ik weet niet hoe ik het wil oplossen. Op mijn website wordt bij je account bepaalde notities geladen. Deze notities kun je verwijderen met een knop. Momenteel linkt die knop naar een pagina waar een sql query wordt uitgevoerd om de notitie te verwijderen aan de hand van een notitie_id. Zo:

<a href=''"verwijder.php?id=<?php echo $id; ?>>Verwijder</a>

De $id wordt met een while loop gevonden, afhankelijk aan de resultaten van de sql query.

Dit werkt prima. Nadeel is dat je meteen na het klikken naar de verwijderpagina gaat en dan wordt de notitie meteen verwijderd. Nu heb ik met behulp van javascript een oplossing gevonden daarvoor. Je krijgt voordat je daadwerkelijk de notitie verwijdert, een vraag of je dat zeker weet. Dat bestaat uit meerdere onderdelen, waaronder de knop die het script activeert en het script zelf. Dat ziet er zo uit:

<button class="btn btn-primary sweet-4" onclick="_gaq.push(['_trackEvent', 'example', 'try', 'sweet-4']);">Verwijder</button>

en het script

<script>
	document.querySelector('.sweet-4').onclick = function(){
        swal({
          title: "Weet je het zeker?",
          text: "Je notitie zal definitief verwijderd worden.",
          type: "warning",
          showCancelButton: true,
          confirmButtonClass: 'btn-danger',
          confirmButtonText: 'Verwijder',
          closeOnConfirm: false,
          //closeOnCancel: false
        },
        function(){
          swal("Verwijderd!", "Je notitie is verwijderd!", "success");
          	$.get("verwijder.php?id=<?php echo $id; ?> ");
        });
      };
	</script>

Nu kun je zien dat er in het script de php wordt uitgevoerd om de notitie te verwijderen. Er is echter een probleem. Er (hoeft niet maar kan wel) worden meerdere buttons gegenereerd en er is uiteraard maar één script. Ik moet dus op de een of andere manier de notitie id meegeven met de onclick in de button. Maar hoe? Ik weet niet of ik dit met php of juist met javascript zou moeten aanpakken. Wat er nu gebeurt is het volgende (erg verkort btw):

while($row = $result->fetch_assoc()) {
$id = $row['notitie_id']

?>
<button class="btn btn-primary sweet-4" onclick="_gaq.push(['_trackEvent', 'example', 'try', 'sweet-4']);">Verwijder</button>
<?php
}
?>

Weet iemand hoe ik dit het beste kan oplossen? De oplossing is misschien een ding wat ik nodig heb, maar een uitleg met hoe het dan werkt heb ik nog veel meer aan! In ieder geval bedankt alvast.

 

[bron]

Niet getest maar meer om je op weg te helpen

function gaq_push(btnID){
  _gaq.push(['_trackEvent', 'example', 'try', btnID]);
  return true;
}
<button id="sweet-4" class="btn btn-primary sweet-4" onclick="gaq_push(this.id)">Verwijder</button>

Noot: ID mag hetzelfde zijn als de class, maar de ID moet uniek zijn binnen een pagina.
Je hebt ervaring dus de rest is aan jou

+1 voor gebruik van Bootstrap.

Suc6. Have fun.

 

[pilootnour5]

Erg bedankt voor je reactie. Ik heb het momenteel even zo gedaan:

Button:

<button id="<?php echo $id; ?>" class="btn btn-primary sweet-4" onclick="_gaq.push(['_trackEvent', 'example', 'try', 'sweet-4', 'this.id']);">Testknop</button>

Javascript

document.querySelector('.sweet-4').onclick = function(){
        swal({
          title: "Weet je het zeker?",
          text: "Je notitie zal definitief verwijderd worden.",
          type: "warning",
          showCancelButton: true,
          confirmButtonClass: 'btn-danger',
          confirmButtonText: 'Verwijder',
          closeOnConfirm: false,
          //closeOnCancel: false
          
        },
        function(){
          swal("Verwijderd!", "Je notitie is verwijderd!", "success");
          	$.get("verwijder.php?id=" + this.id);
          	
        });
      };

Echter wil dit nog niet werken. Wat doe ik fout?

 

[bron]

Je hebt //closeOnCancel dus bij closeOnConfirm:false moet de komma weg.

Als je de id van de button wilt gebruiken dan gebruik je this.id (niet 'this.id')

Als je een class gebruikt wordt het
document.getElementsByClassName('sweet-4')[0].onclick = function(){
Dit is element 0 van alle elementen met class "sweet-4".
Als je meerdere class="sweet-4" elementen hebt werkt dit niet!

Met de id gaat het makkelijker
document.getElementById("sweet-4").onclick = function(){
Bij een id mag je namelijk niet meerdere id="sweet-4" op dezelfde pagina hebben.

 

[pilootnour5]

Ben heel dichtbij, maar het werkt nog niet 100%. Met het onderstaande script wordt het de pagina verwijder.php pas uitgevoerd nadat ik de button tweemaal heb ingedrukt. Dus eerst de eerste keer + bevestiging, en daarna een tweede keer + bevestiging.

	document.querySelector('.sweet-4').onclick = function(){
		
	
        swal({
          title: "Weet je het zeker?",
          text: "Je notitie zal definitief verwijderd worden.",
          type: "warning",
          showCancelButton: true,
          confirmButtonClass: 'btn-danger',
          confirmButtonText: 'Verwijder',
          closeOnConfirm: false
          //closeOnCancel: false
          
        },
        function(){
        
          swal("Verwijderd!", "Je notitie is verwijderd!", "success");
          	
          	//$.get("verwijderagenda.php?id=" + this.id);
          	$("button").click(function() {
    			$.get("verwijder.php?id=" + this.id);
			});
          	
        });
      };

Moet ik nog wat veranderen?

 

[bron]

Ik heb even gekeken wat swal is. Leuke plugin.

<!-- test notitie ID -->
<?php $id = 'sweet-4'; ?>

<!-- style in je <head> -->
<link rel="stylesheet" href="sweetalert.css">

<!-- dit komt ergens in je html -->
<button id="<?php echo($id); ?>" class="btn btn-primary sweet-4" onclick="NotitieSwal(this.id);">Verwijder</button>
<p id="result-<?php echo($id); ?>"></p>

<!-- scripts vlak boven </body> voor performance -->
<script src="sweetalert.min.js"></script>
<script>
function NotitieDelete(NotitieID) {
  document.getElementById("result-<?php echo($id); ?>").innerHTML = "Gelukt! " + NotitieID + " is weg.";
  $.get("verwijderagenda.php?id=" + NotitieID);
}
function NotitieSwal(NotitieID) {
  swal({
    title: "Weet je het zeker?",
    text: "Je notitie zal definitief verwijderd worden.",
    type: "warning",
    showCancelButton: true,
    confirmButtonClass: "swal-confirm",
    confirmButtonColor: "#cc6655",
    confirmButtonText: "Verwijder",
    closeOnConfirm: true,
    //closeOnCancel: false,
    html: false
  }, function(){
    //dit wordt gedaan na een confirm
    swal("Verwijderd!", "Je notitie is verwijderd!", "success");
    NotitieDelete(NotitieID);
  });
}
</script>
</body>

-edit-

//met de status weet je of $.get is gelukt
function NotitieDelete(NotitieID) {
  $.get("verwijderagenda.php?id=" + NotitieID, function('', status){
    if (status == "success") {
      document.getElementById("result-<?php echo($id); ?>").innerHTML = "Notitie " + NotitieID + " is weg.";
    }
  });
}

Suc6. Have fun.

 

[pilootnour5]

Maar in de functie NotitieDelete gebruik je een php variabele die je eigenlijk niet kan gebruiken. Door de sql fetch is de variabele $id altijd gelijk aan de allerlaatste sql fetch die hij binnenhaalt. Hij moet echt de ID van de button zelf opvragen, niet vanuit de php, als je snapt wat ik bedoel (of ik snap niet helemaal wat de php $id in de javascript functie doet)

edit:
Ik heb het php gedeelte van jouw edit gedeelte weggelaten en nu werkt het! Bedankt voor de hulp!

 

[bron]

Top :thumb: en graag gedaan.

Suc6 met je website.

 

[pilootnour5]

Ja dank je wel hè!