Jag har följande kod. Detta är två olika div-popup som skall användas för att exempelvis ta bort ett objekt ur en lista, likaså en annan. Varje popup som visas pekar på olika funktioner- nedan - deletebarn och deletelan. I dess onclick händelser så körs olika rutiner. En popup-div räcker. Kom precis på en snyggare lösning för att få med ID.. Ett annat sätt är att spara ID i en global variabel.Kluring: Dynamisk dold div för popup
Min fråga är hur man kan optimera detta på ett snyggt sätt så att när man visar en div för detta ändamål så skall man även kunna skicka med vilket funktionsanrop som skall köras vid onclick. Någon som har ett bra förslag?
Skapar event eftersom det byggs upp en lista med nya rader och en raderaknapp
// skapar event för radera-knappen
$(".delete").click(function(e) {
var popupID = "#popupDeleteLan";
e.preventDefault();
centerPopup();
loadPopup(popupID);
});
// skapar event för radera-knappen
$(".delete").click(function(e) {
var popupID = "#popupDeleteBarn";
e.preventDefault();
centerPopup();
loadPopup(popupID);
});
Lagret som skall presenteras vid klicket
<div class="popup" id="popupDeleteLan">
<div class="popupContent">
<div class="popupTL"></div>
<h5>Är du säker på att du vill ta bort raden?</h5>
Ja, ta bort
Nej, behåll raden
<div class="closeButton"></div>
<div class="popupBL"></div>
<div class="popupBR"></div>
<div class="clear"></div>
</div><!-- popupContent -->
</div><!-- popup -->
<div class="popup" id="popupDeleteBarn">
<div class="popupContent">
<div class="popupTL"></div>
<h5>Är du säker på att du vill ta bort raden?</h5>
Ja, ta bort
Nej, behåll raden
<div class="closeButton"></div>
<div class="popupBL"></div>
<div class="popupBR"></div>
<div class="clear"></div>
</div><!-- popupContent -->
</div><!-- popup -->
Sv: Kluring: Dynamisk dold div för popup
<code>
<div id="popup">
<!-- vad du vill -->
Ta bort
Nej ta inte bort
</dv>
</code>
och knapparna som öppnar popuppen:
<code>
Ta bort
Ta bort
</code>
jquery
<code>
$('.del_lan, .del_barn').click(function() {
var popup = $('#popup');
popup.find('.popup_delete').unbind(); // Ta bort tidigare binds.. (inte helt säker om det är såhär man gör, kolla dukumentationen)
var _this = $(this). // Referens till länken man klickade på.
if( $(this).is('.del_barn') )
{
popup.find('.popup_delete').click(function() {
// Din kod här Använd _this för att se vilken länk man clickat på
});
}
else // del_lan
{
popup.find('.popup_delete').click(function() {
// Din kod här Använd _this för att se vilken länk man clickat på
});
}
popup.show();
});
</code>
Det krångliga är att få radens ID till clickfunktionen, det finns egentligen bara 2 sätt att göra det vad jag vet. Inget av dem är så snyggt.
1. Sätt ett eget attribut på <a>-tagen typ.. <a href="" ... radid="5">
2. Sätt en klass som heter typ radid_123 på a taggen. Leta sedan upp den klassen och splitta vid _
Jag använder främst #2 när jag hamnar i en sån situation. Finns kanske snyggare lösningar?Sv:Kluring: Dynamisk dold div för popup
Sätt en hidden input direkt efter delete-länken med id som value. Sen använder du $(this).siblings('input.rowid').val() för att hämta ID.Sv: Kluring: Dynamisk dold div för popup
Om man kör med HTML5 kan man använda ett data-attribut för att lagra ID i ett element i posten:
<div class="post" data-row="10">...</div>
Detta attribut kan man sedan läsa av med getAttribute('data-row').
Slängde ihop ett eget test med idéer:
<!DOCTYPE html>
<html>
<head>
<title>Pellesoft-kluring</title>
<style type="text/css">
#my-confirm {
display: none;
position: absolute;
width: 200px;
height: 100px;
left: 200px;
top: 100px;
padding: 10px;
border: 1px solid black;
}
#my-confirm h5 {
margin-top: 0;
padding: 0;
}
.delete {
text-decoration: underline;
color: blue;
cursor: pointer;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
var myConfirm = {
init: function () {
this.dialog = $('#my-confirm');
this.question = $('h5', this.dialog);
var _this = this;
$('.ok', this.dialog).click(function () { if (_this.onOk) _this.onOk(); _this.dialog.hide(); });
$('.cancel', this.dialog).click(function () { _this.dialog.hide(); });
},
show: function (question, onOk) {
this.question.text(question);
this.onOk = onOk;
this.dialog.show();
},
}
function removeRow(row_id)
{
myConfirm.show('Radera rad ' + row_id + '?',
function () {
alert('Raderar rad ' + row_id);
}
);
}
function addRemoveLinks()
{
$('ul#rows>li').each(function () {
var row_id = this.getAttribute('data-row');
$(this).append(' [<span class="delete" onclick="removeRow(' + row_id + ')">Radera</span>]');
return true;
});
}
// Lägg till radera-länkar till varje post
$(document).ready(function () {
myConfirm.init();
addRemoveLinks();
});
</script>
</head>
<body>
<div id="my-confirm">
<h5>question</h5>
<button class="ok">Ok</button>
<button class="cancel">Cancel</button>
</div>
<ul id="rows">
<li data-row="10">Alfa</li>
<li data-row="20">Beta</li>
<li data-row="30">Gamma</li>
</ul>
</body>
</html>