[Løst] Identifisere eit objekt å slette med Javascript. Troleg ei enkel sak..

[4588pkdkrikue5c]

Hei!

No har det seg slik at eg har laga eit mappesystem kor ein kan bla gjennom mapper enkelt nok. PHP'en har eg roen nok på, så eg klarer å gjere deg eg vil, men så vil eg ha litt javascript for å få det heile til å sjå litt lekrare ut.

Så, eg har altså jQuery og jQuery UI slik at ein kan dra ei mappe til eit søppelspann for å slette det. Men elementene som kan dras til søppelet er class elementer - korleis identifisere eg det som blir truffet, for så å slette det med ein confirm?

Eg vil at om ein trykker på "OK" så skal sida hoppe videre til ei side som sletter elementet frå ID. Men korleis får eg tak i denne ID'en med javascript?!

 

Mogleg eg snakker mykje tøys no, her er koden for å dra elemtene:

 

$(function() {
       $(".mappefgalleri").draggable({
               revert: true
       });
       $("#trash").droppable({
               tolerance: 'touch',
               over: function() {
                      $(this).css('opacity', '1.0');
               },
               out: function() {
                       $(this).css('opacity', '0.5');
               },
               drop: function() {
                       var answer = confirm('Er du sikker på at du vil slette dette galleriet fullstendig? Handlingen kan ikke angres.');
                       $(this).css('opacity', '0.5');
               }
       });
});

 

Og her er koden til kvart element. Frå ein echo med PHP.

<div class='mappefgalleri'><img src='grafikk/folder.png'><br/><a href='bildegalleri.php?mappe=$katalogid'>$mappenavn</a></div>

 

Eg trenger altså å få tak i denne katalogid'en i javascripet. Slik at brukaren vart sendt til ei ny side. Sei at sida heiter slett.php?slettid=$katalogid

 

Korleis i alle dager skal eg gjere dette?

[gommle]

Jeg ville slengt katalogid i en attributt, via PHP.

 

Om du bruker html5 kan du slenge den inn i data-katalog-id="5", men i html4/xhtml må du bruke en attributt som allerede eksisterer for <div>, som f.eks. title="5".

 

Title "Specifies extra information about an element", så det passer jo bra.

 

Alternativ 2: Bruk litt triksing med strings.

 

$(function() {
       $(".mappefgalleri").draggable({
               revert: true
       });
       $("#trash").droppable({
               tolerance: 'touch',
               over: function() {
                      $(this).css('opacity', '1.0');
               },
               out: function() {
                       $(this).css('opacity', '0.5');
               },
               drop: function() {
		// Finn linken, ut i fra toppelementet this (altså diven)
		alert($("a", this).attr("href"));
		// Vill tipping angående hvordan man henter href. sjekk docs.
		// Deretter henter du siste tegnet i href
                       var answer = confirm('Er du sikker på at du vil slette dette galleriet fullstendig? Handlingen kan ikke angres.');
                       $(this).css('opacity', '0.5');
               }
       });
});

Endret 18. juli 2010 av gommle

[4588pkdkrikue5c]

Eg får ikkje den alerten til å fungere. Det står berre undefined. Korleis kan eg få tak på title taggen her då?

[gommle]

Feilen er at jeg har brukt this når jeg egentlig mente tingen som droppes, ikke tingen man dropper på. Bytt ut this med objektet som slippes, og det burde funke.

 

Jeg finner ikke svaret i dokumentasjonen, men jeg tror det er meningen å sette det andre argumentet til f.eks. 'ui'. Da får du inni funksjonen et jQuery-objekt ui.draggable. Jeg får det ikke til å funke tho.

Endret 18. juli 2010 av gommle

[gommle]

$(function() {
       $(".mappefgalleri").draggable({
               revert: true
       });
       $("#trash").droppable({
               tolerance: 'touch',
               over: function() {
                      $(this).css('opacity', '1.0');
               },
               out: function() {
                       $(this).css('opacity', '0.5');
               },
               drop: function(event, ui) {
					// Finn linken, ut i fra toppelementet this (altså diven)
					alert($("a", ui.draggable).attr("title"));
                       var answer = confirm('Er du sikker på at du vil slette dette galleriet fullstendig? Handlingen kan ikke angres.');
                       $(this).css('opacity', '0.5');
               }
       });
});

 

CALLBACK sitt andre argument var det

Endret 18. juli 2010 av gommle

[4588pkdkrikue5c]

Får framleis ikkje opp noko.. Skal det vere ein "a" inni der? Skal ikkje det vere DIV eller class? Berre tipper høgt.

Redigert: Meldinga vart berre tom.. Kan det ha noko å gjere med at scriptet ikkje står i HEAD taggane?

Endret 18. juli 2010 av steffenz

[gommle]

Den koden jeg postet fungerer med

 

<div class="mappefgalleri">
	<a href="onehref.lol" title="2">Drag me!</a>
</div>

<div id="trash">
	yay.
</div>

 

Den andre parameteren til jQuery-funksjonen spesifiserer scope.

 

Hvis scope er jQuery-objektet til div-en som blir dratt (altså ui.draggable), vil $("a", ui.draggable) starte INNI div-en. Ikke fra roten av hele dokumentet.

 

$("body") vil starte fra document og gå videre til den finner body. Hvis man da bruker dette objektet som scope vil du ikke kunne finne "head title" inni der.

Endret 18. juli 2010 av gommle

[4588pkdkrikue5c]

Eg misforstod her. Fullstendig.

Tenkte at title taggen skulle vere inni div taggen. Altså <div class='namn' title='id'>.

Så tenkte eg óg på i lenkja, men den skal jo gå ei anna plass. Men selvfølgeleg kan eg ha title som noko anna. Nei, eg har eg berre gått litt i stå. Beklager, men tusen takk likevel. No fungerer det utmerka, du redda heile dagen.

[gommle]

Nei, bare jeg som skrev feil. Jeg skrev at jeg skulle putte title på div-en, men puttet den på linken.

 

Du kan selvfølgelig ha title på diven, og bare bruke ui.draggable fremfor $("a", ui.draggable).

[4588pkdkrikue5c]

Berre gløym det siste her. Eg fann utav det Tusen tusen takk!

Endret 18. juli 2010 av steffenz