Anzeige von Checkboxen in jQuery UI Dialogen und bieten Schaltfläche Abbrechen

Ich versuche zu lösen ist wohl ein sehr häufiges problem und vorbereitet haben, einen vereinfachten Testfall demonstrieren und meine Bemühungen.

Ich versuche für die Anzeige mehrerer jQuery-UI-Dialoge, jede enthält mehrere Checkboxen mit dem gleichen Namen (Früchte und candy in meinem test-code unten)

In jedem dialog, den ich haben 4 Tasten: Speichern, Abbrechen, Wählen Sie alle und Deaktivieren Sie alle:

Den ersten 3 Tasten sind bereits arbeiten in meinem code.

Den Update - Taste wird in der Tat Aufruf DataTable ist fnDraw () - Funktion, das Teil ist schon der Arbeit zu. (Und ich will nicht zum speichern der Checkboxen Werte auf die server dazwischen, die ich tun möchte ist alles, was auf der client-Seite - ich weiß, das ist möglich).

Mein problem ist bei der Umsetzung der Abbrechen Taste für die Dialoge:

1) ich sollte wahrscheinlich speichern Sie eine Liste der aktuell eingestellten Kontrollkästchen im Dialogfeld open-Ereignis? Und dann wieder auf Abbrechen klicken Sie auf? Gibt es eine elegante jQuery-Weise?

2) ich weiß nicht, wie Sie nur die Kontrollkästchen der aktuell geöffneten dialog.

Unten ist meine aktuelle test-code, es funktioniert sofort - vielen Dank an Google CDN:

<html>
<head>
<style type="text/css" title="currentStyle">
        @import "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/redmond/jquery-ui.css";
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">

$(function() { 
        var buttons = {
                Cancel: cancel,
                Save: save,
                'Deselect All': deselect,
                'Select All': select
        };

        $('#fruits').dialog({ 
                autoOpen: false, 
                modal: true,
                buttons: buttons
        });

        $('#candy').dialog({ 
                autoOpen: false, 
                modal: true,
                buttons: buttons
        });
});

function update() {
        var boxes = new Array();
        $(':checkbox').each(function() {
                if ($(this).is(':checked')) {
                        boxes.push(
                                $(this).attr('name') + 
                                '=' +
                                $(this).val() 
                        );
                }
        });

        alert('boxes: ' + boxes.join('&'));
}

function select() {
        $(':checkbox').prop('checked', true);
}

function deselect() {
        $(':checkbox').prop('checked', false);
}

function save() {
        //XXX how to implement?
        $(this).dialog('close');
}

function cancel() {
        //XXX how to implement?
        $(this).dialog('close');
}

</script>
</head>
<body>

<p><input type="button" value="Select fruits" onclick="$('#fruits').dialog('open');"></p>
<div id="fruits" title="fruits">
<p><label><input type="checkbox" name="fruits" value="apple">apple</label></p>
<p><label><input type="checkbox" name="fruits" value="banana">banana</label></p>
<p><label><input type="checkbox" name="fruits" value="pear">pear</label></p>
</div>

<p><input type="button" value="Select candy" onclick="$('#candy').dialog('open');"></p>
<div id="candy" title="candy">
<p><label><input type="checkbox" name="candy" value="toffee">toffee</label></p>
<p><label><input type="checkbox" name="candy" value="fudge">fudge</label></p>
</div>

<p><input type="button" onclick="update();" value="Update"></p>

</body>
</html>

UPDATE: Dank mootinator der folgende code funktioniert, aber ich habe noch 2 kleinere Probleme/Fragen:

1) Ist es möglich, öffnen - Ereignis anstelle des benutzerdefinierten openDialog () - Methode?

2) Meine Auswahl aufheben, und Wählen Sie Alle Schaltflächen ändern Sie alle Kontrollkästchen auf der Seite - statt einer änderung nur die Zugehörigkeit zu den aktuellen dialog. Ich Frage mich, wie Sie nur die letzteren? (irgendwie verwenden $(this) in selectAll() und deselectAll())?

Habe ich versucht,

function selectAll() {
        $($(this) + ' :checkbox').prop('checked', true);
}

function deselectAll() {
        $($(this) + ' :checkbox').prop('checked', false);
}

bekomme aber immer syntax Fehler.

Anzeige von Checkboxen in jQuery UI Dialogen und bieten Schaltfläche Abbrechen

<html>
<head>
<style type="text/css" title="currentStyle">
        @import "/css/demo_table_jui.css";
        @import "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/redmond/jquery-ui.css";
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">

$(function() {
        var buttons = {
                Cancel: cancel,
                Save: save,
                'Deselect All': deselectAll,
                'Select All': selectAll
        };

        $('#openCandy').button();
        $('#openFruits').button();
        $('#update').button();

        $('#openCandy').click(function() {
                openDialog('#candy');
        });

        $('#openFruits').click(function() {
                openDialog('#fruits');
        });

        $('#fruits').dialog({
                autoOpen: false,
                modal:    true,
                buttons:  buttons
        });

        $('#candy').dialog({
                autoOpen: false,
                modal:    true,
                buttons:  buttons
        });
});

function update() {
        var boxes = new Array();
        $(':checkbox').each(function() {
                if ($(this).is(':checked')) {
                        boxes.push(
                                $(this).attr('name') +
                                '=' +
                                $(this).val()
                        );
                }
        });

        alert('boxes: ' + boxes.join('&'));
}

function selectAll() {
        $(':checkbox').prop('checked', true);
}

function deselectAll() {
        $(':checkbox').prop('checked', false);
}

function openDialog(sel) {
    $(sel).dialog('open');
    $(sel + ' :checkbox').each(function() {
        $(this).data('XXX', $(this).is(':checked'));
    });
}

function cancel() {
        $(this).find(':checkbox').each(function() {
            $(this).prop('checked', $(this).data('XXX'));
        });
        $(this).dialog('close');
}

function save() {
        $(this).dialog('close');
}

</script>
</head>
<body>

<p><input id="openFruits" type="button" value="Select fruits"></p>
<div id="fruits" title="fruits">
<p><label><input type="checkbox" name="fruits" value="apple">apple</label></p>
<p><label><input type="checkbox" name="fruits" value="banana">banana</label></p>
<p><label><input type="checkbox" name="fruits" value="pear">pear</label></p>
</div>

<p><input id="openCandy" type="button" value="Select candy"></p>
<div id="candy" title="candy">
<p><label><input type="checkbox" name="candy" value="toffee">toffee</label></p>
<p><label><input type="checkbox" name="candy" value="fudge">fudge</label></p>
</div>

<p><input id="update" type="button" onclick="update();" value="Update"></p>

</body>
</html>

UPDATE2: Eigentlich habe ich eine 3. und größeres problem: die schließen die X-Taste auf der oberen rechten Ecke des Dialogfeld nicht funktioniert wie es sollte (es spart statt zu stornieren).

Ich habe versucht, indem schließen: Abbrechen, sowohl Dialoge, aber ich bekomme das runtime-Fehler in Chrome:

Uncaught RangeError: Maximum call stack size exceeded
f.event.remove
f.event.remove
f.fn.extend.unbind
a.extend.destroy
a.extend.destroy
a.widget.close
a.widget.bridge.a.fn.(anonymous function)
e.extend.each
e.fn.e.each
a.widget.bridge.a.fn.(anonymous function)
cancel
a.Widget._trigger
a.widget.close
a.widget.bridge.a.fn.(anonymous function)
.....etc....

UPDATE3: Wahrscheinlich, weil ich call $(this).dialog('close') in einer Schleife?

Ich sehe nicht einen einfachen Weg, um es zu beheben, obwohl: wenn ich erstellen Sie eine separate Funktion

function restore() {
        $(this).find(':checkbox').each(function() {
            $(this).prop('checked', $(this).data('XXX'));
        });
}

function cancel() {
        restore();
        $(this).dialog('close');
}

und übergeben Sie es als schließen: wiederherstellen Dialogen, dann die Speichern - Taste bricht

InformationsquelleAutor Alexander Farber | 2011-10-04

1

Machte ich ein paar änderungen an Ihrem code. Wohl die einfachste was zu tun (nicht unbedingt die beste) wäre, speichert den Zustand in einer globalen Variablen. (Eine weitere robuste Lösung, die sich vielleicht nur auf die Rettung der Staat neben dem dialog state/Optionen).

UPDATE: Bereinigt die Lösung, die zum speichern der ursprünglichen Zustand der checkbox sich in der DOM-statt in eine Globale variable.

http://jsfiddle.net/rhdNH/8/

Ich habe eine benutzerdefinierte Funktion öffnen zur Erleichterung der Rettung des Staates, und beendet die Funktion Abbrechen. Möglicherweise möchten Sie auch sauber, die "original" - Eigenschaften wenn Sie in der Nähe mit removeProp, aber es ist nicht unbedingt notwendig.

Hier sind die änderungen, die Sie machen würde, bei Punkt #1 (geöffnet:openDialog), um nicht zu rufen openDialog direkt.
```
$('#fruits').dialog({ 
    autoOpen: false, 
    modal: true,
    buttons: buttons,
    open: openDialog
});

$('#candy').dialog({ 
    autoOpen: false, 
    modal: true,
    buttons: buttons,
    open: openDialog
});
```
Und das ist, was Ihr wählen/abwählen Aussehen soll, nur wirken auf das Dialogfeld "öffnen":
```
function select() {
    $(':checkbox', this).prop('checked', true);
}

function deselect() {
    $(':checkbox', this).prop('checked', false);
}
```
Und hier ist openDialog bearbeitet zu verwenden this anstelle der jQuery-selector:
```
function openDialog() {
    $(':checkbox', this).each(function() {
        $(this).prop('original', $(this).is(':checked'));
    });
}

function cancel() {
        $(this).find('input[type="checkbox"]').each(function() {
            $(this).prop('checked', $(this).prop('original'));
        });
        $(this).dialog('close');
}
```
- Danke. So sparen Sie die checkbox Staaten als original="true" in die Checkboxen selbst? Warum "original", ist es ein willkürlicher name?
- Ja, völlig willkürlich.
- Nur ein weiterer Hinweis, Sie könnte verwenden .data statt .prop mehr standardsy: stackoverflow.com/questions/432174/... -- sollten Sie nicht laufen in den Speicher-Lecks zu speichern Sie eine einfache boolean in eine beliebige property obwohl entweder.
- Danke, mit Euch helfen, ich bin fast da, aber bitte werfen Sie einen Blick auf meine aktuelle Frage.
- Zu Ihrem zweiten Punkt: $(':checkbox', this).prop('checked', true);. Ich werde einen Blick auf die anderen ein.
- Ich habe festgestellt, das funktioniert auch: $(this).find(':checkbox').prop('checked', true);
- Ja. Aktualisiert meine Antwort. Sie könnte deal mit der x-Taste, indem es zu entfernen. stackoverflow.com/questions/896777/...
- Vielen Dank, einen schönen workaround
- Ich würde einen Punkt der Bindung der Esc-Taste, um die Abbrechen-Taste, anstatt den dialog schließen, wenn Sie können.
- Leider Esc-Taste funktioniert nicht richtig - es spart, statt zu stornieren
- Richtig, Sie müssen hinzufügen closeOnEscape: false auf Ihre dialog-params. Dann erstellen Sie ein keydown-Ereignis und Griff Veranstaltung.die == 27 manuell.
InformationsquelleAutor Kevin Stricker
0
1. In Ihre save-Funktion rufen Sie Ihre server side script (mit AJAX - check jQuery docs hier) und speichern Sie den Zustand der checkbox (wenn es das ist was Sie bereit sind zu tun, natürlich)
2. In Funktion Abbrechen würde ich nur stick mit dem schließen des Dialogfelds, da brauchen Sie nicht, etwas zu ändern. Rollback der änderungen, sparen ist sinnlos, da kannst du immer check /unckech gewünschten Kontrollkästchen und speichern Sie Sie wieder.
3. Wie Sie nur die Kontrollkästchen der derzeit Dialogfeld "öffnen" nur - eine eindeutige id zuweisen, um die div-container und verwenden $('#div_id input[type="checkbox"]') selector
- Sorry, aber deine Vorschläge 1. und 2. nicht für mich - weil ich nicht wollen, zu gehen über den server. Ich möchte (und zu sichern) die Kontrollkästchen, Informationen auf der client-Seite und das funktioniert schon - siehe die Datentabellen Frage link in meiner aktuellen Frage.
InformationsquelleAutor matino

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.