I have one problem with my code. The one click event doesn't work after another one.
My ajax and jquery code is as below:
<!-- Ovdje izbacujemo modal za potvrdu kad se klikne na gevonden i onda ako je kliknuto na potvrdi odradi se update baze sa ajaxom -->
<script type="text/javascript">
$(document).ready(function() {
$(document).on("click","button[class*=btnFound]", function(e){
var cijeliID = this.id.split("-");
var id = cijeliID[1];
$($("#confirmBox-"+id).data("target")).fadeIn(400);
e.preventDefault();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(document).on("click", ".btnFoundConfirm", function(){
var cijeliID = this.id.split("-");
var id = cijeliID[1];
/*$("#confirmBox-"+id).modal('toggle');*/
$.ajax({
url : "pet-found.php",
type: "POST",
dataType: "json",
data : {id : id, status:"found", sessionCode : "<?php echo $session_code; ?>"},
beforeSend: function(){
$("#info-middle-register").show();
},
success: function(msg){
$("#info-middle-register").hide();
if(msg.result == "Found"){
$("#delpetsuccess-"+id).html("<i class=\"fa fa-thumbs-o-up\"></i> Uw huisdier is thuis. De VermisteDieren site wenst u veel plezier met uw beestje.").fadeIn(300).fadeOut(10000);
$("#watermark-"+id).show();
$("#drpDown-"+id).html("<li id=\"liTochGezocht-"+id+"\" class=\"col-lg-12\"><button id=\"dataTitle btnNotFound-"+id+"\" class=\"btnNotFound btn btn-primary col-lg-12 col-sm-12 col-md-12 col-xs-12 btn-sm\" data-title=\"Klik hier als uw beestje toch nog niet gevonden is.\"><i class=\"fa fa-arrow-left\"></i> Toch nog gezocht?</button></li>");
$("#dier-"+id).addClass("opacityClass");
}else{
if(msg.result == "NotFound"){
$("#delpeterror-"+id).html("<i class=\"fa fa-exclamation-triangle\"></i> Er is iets misgelopen. Contacteer ons via info@vermistedieren.be.").fadeIn(300).fadeOut(10000);
}
}
},
error: function(){
$("#info-middle-register").hide();
$("#delpeterror-"+id).html("<i class=\"fa fa-exclamation-triangle\"></i> Er is iets misgelopen. Contacteer ons via info@vermistedieren.be.").fadeIn(300).fadeOut(10000);
}
})
});
});
</script>
And my php code is next :
$found = $redPet["found"];
if($found == 1){
$opacityClass = "opacityClass";
$watermark = "display:block;";
$showHideDropdown = "display:none;";
$menu = "<div id=\"dropdown-". $redPet["id"] ."\" class=\"col-md-6 col-xs-12\" style=\"padding-right:10px;z-index:99999999;\">
<!-- Split button -->
<div class=\"btn-group pull-right\">
<button type=\"button\" id=\"dataTitle\" data-title=\"Beheer informatie over uw dier\" class=\"btn btn-success btn-xs\"><i class=\"fa fa-pencil-square-o\"></i></button>
<button type=\"button\" id=\"dataTitle\" data-title=\"Beheer informatie over uw dier\" class=\"btn btn-success btn-xs dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">
<span class=\"caret\" style=\"margin-top:0;\"></span>
<span class=\"sr-only\">Toggle Dropdown</span>
</button>
<ul id=\"drpDown-". $redPet["id"] ."\" class=\"dropdown-menu\">
<li id=\"liTochGezocht-". $redPet["id"] ."\" class=\"col-lg-12\">
<button id=\"dataTitle btnNotFound-". $redPet["id"] ."\" class=\"btnNotFound btn btn-primary col-lg-12 col-sm-12 col-md-12 col-xs-12 btn-sm\" data-title=\"Klik hier als uw beestje toch nog niet gevonden is.\"><i class=\"fa fa-arrow-left\"></i> Toch nog gezocht?</button>
</li>
</ul>
</div>
</div>";
$found = "<span id=\"txtFound-". $redPet["id"] ."\" style=\"color:#f27935;\"> (Gevonden!)</span>";
}else{
$watermark = "display:none;";
$showHideDropdown = "display:block;";
$opacityClass = "";
$menu = "<div id=\"dropdown-". $redPet["id"] ."\" class=\"col-md-6 col-xs-12\" style=\"padding-right:10px;z-index:99999999;". $showHideDropdown ."\">
<!-- Split button -->
<div class=\"btn-group pull-right\">
<button type=\"button\" id=\"dataTitle\" data-title=\"Beheer informatie over uw dier\" class=\"btn btn-success btn-xs\"><i class=\"fa fa-pencil-square-o\"></i></button>
<button type=\"button\" id=\"dataTitle btnAria-". $redPet["id"] ."\" data-title=\"Beheer informatie over uw dier\" class=\"btn btn-success btn-xs dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">
<span class=\"caret\" style=\"margin-top:0;\"></span>
<span class=\"sr-only\">Toggle Dropdown</span>
</button>
<ul id=\"drpDown-". $redPet["id"] ."\" class=\"dropdown-menu\">
<li class=\"col-lg-12\">
<button id=\"dataTitle btnFound-". $redPet["id"] ."\" class=\"btnFound btn btn-success col-lg-12 col-sm-12 col-md-12 col-xs-12 btn-sm\" style=\"outline:0;\" data-title=\"Klik hier als uw dier gevonden is\" data-target=\"#confirmBox-". $redPet["id"] ."\" data-toggle=\"modal\"><i class=\"fa fa-home\"></i> Gevonden</button>
</li>
<div style=\"clear:both;\"></div><li role=\"separator\" class=\"divide5\"></li>
<li class=\"col-lg-12\">
<form action=\"dier-toevoegen.php\" method=\"POST\">
<input type=\"hidden\" name=\"changeID\" value=\"". $redPet["id"] ."\">
<button id=\"dataTitle\" class=\"btn btn-info col-lg-12 col-sm-12 col-md-12 col-xs-12 btn-sm\" style=\"outline:0;\" data-title=\"Klik hier om de informatie over uw dier te wijzigen\" type=\"submit\"><i class=\"fa fa-pencil\"></i> Wijzigen</button>
</form>
</li>
<div style=\"clear:both;\"></div>
<li role=\"separator\" class=\"divider\"></li>
<li class=\"col-lg-12\">
<button id=\"btnVerwijderen-". $redPet["id"] ."\" class=\"linkDelete btn btn-danger col-lg-12 col-sm-12 col-md-12 col-xs-12 btn-sm\" style=\"outline:0;\" data-title=\"Bent u zeker dat u <b>". $redPet["name"] ."</b> wilt verwijderen?\" data-toggle=\"confirmation\" data-placement=\"left\" data-singleton=\"true\" data-popout=\"true\" data-btn-ok-label=\"Ja!\" data-btn-ok-icon=\"glyphicon glyphicon-share-alt\" data-btn-ok-class=\"btnYesDelete-". $redPet["id"] ." btn-success btn-xs btnYesDelete\" data-btn-cancel-label=\"Noo!\" data-btn-cancel-icon=\"glyphicon glyphicon-ban-circle\" data-btn-cancel-class=\"btn-danger btn-xs btnNoDelete\"><i class=\"fa fa-trash\"></i> Verwijderen</button>
</li>
</ul>
</div>
</div>";
$found = "";
}
echo " <article id=\"dier-". $redPet["id"] ."\" class=\"blogpost ". $opacityClass ."\" style=\"position:relative;\">
<div id=\"watermark-". $redPet["id"] ."\" class=\"watermark col-lg-12 col-sm-12 col-md-12 col-xs-12\" style=\"". $watermark ."\"></div>
<div id=\"info-middle-register\" style=\"display:none;z-index:99999999;\"><img src=\"img/ajax-loader.gif\" title=\"Even geduld aub\"></div>
<!-- Box za potvrdu da je zivotinja pronadjena -->
<div id=\"confirmBox-". $redPet["id"] ."\" class=\"modal fade bs-example-modal-xs\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"mySmallModalLabel\">
<div class=\"modal-dialog modal-sm\">
<div class=\"modal-content\">
<div class=\"modal-header\">
<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button>
<h4 class=\"modal-title\" id=\"myModalLabel\"><b>". $redPet["name"] ."</b> is gevonden?</h4>
</div>
<div class=\"modal-body\">
Bent u zeker dat <b>". $redPet["name"] ."</b> gevonden is?
</div>
<div class=\"modal-footer\">
<button id=\"btnFoundCancel-". $redPet["id"] ."\" type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\"><i class=\"fa fa-ban\"></i> Cancel</button>
<button id=\"btnFoundConfirm-". $redPet["id"] ."\" type=\"button\" class=\"btnFoundConfirm btn btn-primary\" data-dismiss=\"modal\"><i class=\"fa fa-floppy-o\"></i> Ja! Ga verder</button>
</div>
</div>
</div>
</div>
<!-- TABLE VIEW FOR BLOG POST -->
<div class=\"table-blogarticle\">
<!-- Slika -->
<div class=\"media-table-cell-\">
<!-- BLOG IMAGE -->
<section class=\"media-wrapper\">
<div class=\"mediaholder\">
<a href=\"#\"><img alt=\"". $redPet["name"] ."\" src=\"". $photoPath ."\" style=\"width:100%\" class=\"blogPhoto\"></a>
<div class=\"hovercover\">
<a href=\"#\"><div class=\"linkicon notalone\"><i class=\"icon-link-1 white\"></i></div></a>
<a href=\"#\"><div class=\"lupeicon notalone\"><i class=\"icon-search-1 white\"></i></div></a>
</div>
</div>
</section>
</div><!-- Kraj slike -->
<div class=\"divide20 visible-phone\"></div>
<!-- THE CONTENT HOLDER TABLE CELL -->
<div class=\"blogcontent-table-cell\">
<h2 class=\"blog-title pull-left col-md-6 col-xs-12\" style=\"padding-left:10px;\">". $redPet["name"] . $found . " </h2>
". $menu ."
<div style=\"clear:both;\"></div>
<div class=\"divide5\"></div>
<!-- BLOG ATTRIBUTES -->
<div style=\"padding-left:10px;\">
<div class=\"gray-boxed verysmall gray leftfloat rm5 bm5 blgAttr\"><i class=\"fa fa-calendar-times-o fa-2x rm10\"></i>Vermist : <u>". $lostDate ."</u></div>
<div class=\"gray-boxed verysmall gray leftfloat rm5 bm5 blgAttr\"><i class=\"fa fa-map-marker fa-2x rm10\"></i>Plaats : <u>". $redPet["lostPlace"] ."</u></div>
<div class=\"gray-boxed verysmall gray leftfloat rm5 bm5 blgAttr\"><i class=\"fa fa-paint-brush fa-2x rm10\"></i>Kleur : <u>". $redPet["color"] ."</u></div>
<div class=\"gray-boxed verysmall gray leftfloat rm5 bm5 blgAttr\"><i class=\"fa fa-paw fa-2x rm10\"></i>Ras : <u>". $redPet["breed"] ."</u></div>
<div class=\"gray-boxed verysmall gray leftfloat rm5 bm5 blgAttr\"><i class=\"fa fa-eye fa-2x rm10\"></i><u>". $redPet["views"] ."</u></div>
</div>
<div class=\"clear\"></div>
<div class=\"divide10\"></div>
<p class=\"small darkgray\" style=\"padding:0 10px 0 10px;text-align:justify;\">". $details ."</p>
<div class=\"divide10\"></div>
<a id=\"dataTitle\" class=\"btn small maincolor witharrow pull-right\" href=\"huisdier-details.php?id=". $redPet["id"] ."\" style=\"margin:0 15px 15px 0;\" data-title=\"Nog meer details over ". $redPet["name"] ."\">Lees meer</a>
<div class=\"divide10\"></div>
<div style=\"clear:both;\"></div>
</div><!-- END OF CONTENT HOLDER TABLE CELL-->
</div>
</article>";
The button VERWIJDEREN in the dropdown menu works ok. If I (after the page is loaded) click on it I get an popover box to confirm that I want to delete it. And if I click on YES, it works.
My problem is, if I click on button GEVONDEN and then I click on the button TOCH NOG GEZOCHT (basically DO and UNDO - until here it works perfect).
But then if I want to delete it (thus if I click on the button VERWIJDEREN) it doesn't work. The style of the bootstrap popover is also changed. If I click on NO it is ok, but if I click on YES nothing happends. If I refresh the page then it works without problems. In the console I see nothing, thus there is no any error report.
Any suggestions? Thanks.
UPDATED:
Script for btnNotFound
<!-- Ako klikne na go back kada je zivotinja oznacena kao pronadjena -->
<script type="text/javascript">
$(document).ready(function() {
$(document).on("click","button[class*=btnNotFound]", function(e){
var cijeliID = this.id.split("-");
var id = cijeliID[1];
$.ajax({
url : "pet-found.php",
type: "POST",
dataType: "json",
data : {id : id, status:"notFound", sessionCode : "<?php echo $session_code; ?>"},
beforeSend: function(){
$("#info-middle-register").show();
},
success: function(msg){
$("#info-middle-register").hide();
if(msg.result == "changeMindNotFound"){
$("#watermark-"+id).hide();
$("#dier-"+id).removeClass("opacityClass");
$("#txtFound-"+id).hide();
$("#liTochGezocht-"+id).hide();
$("#drpDown-"+id).html("<li class=\"col-lg-12\"><button id=\"dataTitle btnFound-"+id+"\" class=\"btnFound btn btn-success col-lg-12 col-sm-12 col-md-12 col-xs-12 btn-sm\" data-title=\"Klik hier als uw dier gevonden is\" data-target=\"#confirmBox-"+id+"\" data-toggle=\"modal\"><i class=\"fa fa-home\"></i> Gevonden</button></li><div style=\"clear:both;\"></div><li role=\"separator\" class=\"divide5\"></li><li class=\"col-lg-12\"><form action=\"dier-toevoegen.php\" method=\"POST\"><input type=\"hidden\" name=\"changeID\" value=\""+id+"\"><button id=\"dataTitle\" class=\"btn btn-info col-lg-12 col-sm-12 col-md-12 col-xs-12 btn-sm\" data-title=\"Klik hier om de informatie over uw dier te wijzigen\" type=\"submit\"><i class=\"fa fa-pencil\"></i> Wijzigen</button></form></li><div style=\"clear:both;\"></div><li role=\"separator\" class=\"divider\"></li> <li class=\"col-lg-12\"><button id=\"dataTitle btnVerwijderen-"+id+"\" class=\"linkDelete btn btn-danger col-lg-12 col-sm-12 col-md-12 col-xs-12 btn-sm\" data-title=\"Klik hier om uw dier te verwijderen\" href=\"#\"><i class=\"fa fa-trash\"></i> Verwijderen</button></li>");
}else{
if(msg.result == "changeMindFound"){
$("#delpeterror-"+id).html("<i class=\"fa fa-exclamation-triangle\"></i> Er is iets misgelopen. Contacteer ons via info@vermistedieren.be.").fadeIn(300).fadeOut(10000);
}
}
},
error: function(){
$("#info-middle-register").hide();
$("#delpeterror-"+id).html("<i class=\"fa fa-exclamation-triangle\"></i> Er is iets misgelopen. Contacteer ons via info@vermistedieren.be.").fadeIn(300).fadeOut(10000);
}
})
e.preventDefault();
});
});
</script>
YES and NO buttons are something like this :
<a class="btn btn-xs btn-primary" data-apply="confirmation" href="#">
<i class="glyphicon glyphicon-ok"></i>
Yes
</a>
<a class="btn btn-xs btn-default" data-dismiss="confirmation">
<i class="glyphicon glyphicon-remove"></i>
No
</a>
Script for canceling popup :
<script type="text/javascript">
$(document).ready(function() {
$(".linkDelete").on("canceled.bs.confirmation", function(e){
e.stopPropagation();
if ($(e.target).data('toggle') !== 'confirmation' && $(e.target).parents('[data-toggle="confirmation"]').length === 0 && $(e.target).parents('.popover.in').length === 0) {
$('[data-toggle="confirmation"]').confirmation();
$('[data-toggle="confirmation"]').confirmation('hide');
}
$(this).confirmation();
$(this).confirmation('hide');
});
});
</script>
And for the confirming :
<!-- Ovdje obradjujemo klik na YES button u conformation boxu -->
<script type="text/javascript">
$(document).ready(function() {
$('.linkDelete').on('confirmed.bs.confirmation', function (e) {
var cijeliID = this.id.split("-");
var id = cijeliID[1];
$.ajax({
url : "delete-pet.php",
type: "POST",
dataType: "json",
data : {id : id, sessionCode : "<?php echo $session_code; ?>"},
beforeSend: function(){
$("#info-middle-register").show();
},
success: function(msg){
$("#info-middle-register").hide();
if(msg.result == "Deleted"){
/*$("#delpetsuccess-"+id).html("<i class=\"fa fa-thumbs-o-up\"></i> Uw huisdier is succesvol verwijderd.").fadeIn(300).fadeOut(2000);*/
$("#hrLine-"+id).fadeOut(2000);
if(msg.resultPhotos == "PhotosNotDeleted"){
$("#delpetwarning-"+id).html("<i class=\"fa fa-exclamation-triangle\"></i> De fotos van uw huisdier zijn niet succesvol verwijderd.").fadeIn(300).fadeOut(2000);
}
if(msg.nr_pets > 0){
$("#dier-"+id).fadeOut(2000);
$("#totalPets").html(msg.nr_pets);
}else{
$("#dier-"+id).fadeOut(2000);
$("#totalPets").html(msg.nr_pets);
$("#noPets").html("<h3 style=\"font-weight:400;color:#8a6d3b;\">Momenteel hebt u geen huisdieren.</h3> <a id=\"dataTitle\" href=\"dier-toevoegen.php\" data-title=\"Voeg een huisdier toe\" class=\"alert-link\">Klik hier</a> om een huisdier toe te voegen.").fadeIn(2000);
$(".tb-pagination").hide();
}
}else{
if(msg.result == "NotDeleted"){
$("#delpeterror-"+id).html("<i class=\"fa fa-exclamation-triangle\"></i> Er is iets misgelopen. Uw huisdier is niet succesvol verwijderd. Contacteer ons via info@vermistedieren.be.").fadeIn(300).fadeOut(10000);
}
}
},
error: function(){
$("#info-middle-register").hide();
$("#delpeterror-"+id).html("<i class=\"fa fa-exclamation-triangle\"></i> Er is iets misgelopen. Contacteer ons via info@vermistedieren.be.").fadeIn(300).fadeOut(10000);
}
})
})
});
</script>
