✔ jquery letzter aktiverter Radio-Button

[k3nguruh]

Hallo,

gegeben ist eine Gruppe von RadioButtons.

<input type="radio" id="status_aktiv" name="status" value="aktiv" checked="checked" />
<input type="radio" id="status_inaktiv" name="status" value="inaktiv" />
<input type="radio" id="status_löschen" name="status" value="warten" />

Jetzt klickt der User auf den 2. Radiobutton.
Nun möchte ich mit der jquery UI einen Dialog einblenden, und wenn der User auf Abbrechen klickt, soll der alte Status wieder hergestellt werden.

Mit normalen Javascript ging es ja so:

onclick="if(confirm('Vorgang Abbrechen?')) return false;"

Vll. Kann mir einer auf den richtigen Weg stossen....

 

[erik s.]

Und das geht jetzt nicht mehr?

 

[ComFreek]

Ich denke, folgendes ist die einfachste Variante:

$("#status_inaktiv").click(function (event) {
  // Dialog einblenden
  var canceled = showDialog();
  if (canceled) {
    event.stopImmediatePropagation();
    return false;  
  }
});

 

[k3nguruh]

Und das geht jetzt nicht mehr?

Doch schon, nur sieht das Meldungsfenster etwas Schrottig aus....

@ComFreek: Danke für den Ansatz. Ich habe es aber mitlerweile anders gelöst.

 

[erik s.]

Doch schon, nur sieht das Meldungsfenster etwas Schrottig aus....

Das ist eben browserabhängig. Es gibt auch mithilfe von jQuery erzeugte Dialoge, die (soweit ich weiß) plattformübergreifend identisch aussehen. Die nennen sich jAlert, jConfirm und jPrompt.

@ComFreek: Danke für den Ansatz. Ich habe es aber mitlerweile anders gelöst.

Vielleicht könntest du noch posten, wie du es gelöst hast. Das interessiert vor allem diejenigen, die irgendwann mal in diesem Forum nach ähnlichen Ansätzen suchen.

Gruß

 

[k3nguruh]

Hallo,

naja, bei mir ist es etwas komplexer aber ich versuche mal meine Funktionen auseinander zu pflücken.

Gegeben:

<form id="form1">
<input type="radio" id="status_aktiv" name="status" value="aktiv" />
<input type="radio" id="status_inaktiv" name="status" value="inaktiv" />
<input type="radio" id="status_archiv" name="status" value="archiv" />
<!-- weitere Elemente -->
</form>

Sofern die Seite aufgerufen wird, frage die "form1" ab. Unter anderem auch die Radio-Buttons, welche checked ist und gebe dieser die Class "radio-last-aktiv".

<script type="text/javascript">
$(document).ready(function() {
    $("#form1").on("change", "input[name=status]:checked", function(){
        $(this).FUNKTION2();
    });
    $("#form1").on("change", "select[name=betrieb],select[name=abteilung]", function(){
        $(this).FUNKTION1();
    }).FUNKTION1();
});
</script>

und jetzt die dazugehörigen Funktionen.

Funktion 1:

$.fn.FUNKTION1 = function(){
    var $this = $(this);
    var $form = $this.closest("form");
    var $status = $("input[name=status]", $form);
    
    $($status).each(function(){
        var $this = $(this);
        if ($this.prop("checked"))
        {
            $this.addClass("radio-last-aktiv");
        }
        else
        {
            $this.removeClass("radio-last-aktiv");
        }
    });
    // Weiterer Code
}

Funktion 2:

$.fn.FUNKTION2 = function(){
    var $this = $(this);
    var $form = $this.closest("form");
    var $statusLast;

    $("input[name=status]", $form).each(function(){
        if ($(this).hasClass("radio-last-aktiv"))
            $statusLast = $(this);
    });

    switch ($this.val())
    {
        case "archiv":
            $("<div/>")
                .html("Blubber Blubber")
                .dialog({
                    modal: true,
                    resizable: false,
                    dialogClass: "ui-dialog",
                    width: 400,
				    title: "Titel Blubber",
                    buttons: {
                        "OK": function() {
                            $this.FUNKTION1();
                            $(this).dialog("close");
                        },
                        "Abbruch": function() {
                            $statusLast.attr("checked", true);
                            $(this).dialog("close");
                        }
                    }
                }).dialog("open");
            break;
        default:
            $this.FUNKTION1();
    }
}

Ich bin kein jQuery / Javascript Profi. Aber was ich mir da zusammengebastelt habe, funktioniert jedenfalls