tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
7
ZUGRIFFE
661
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 22.07.10 13:01 #1
    Bicko Bicko ist offline Mitglied Gold
    Registriert seit
    Sep 2003
    Beiträge
    160
    Hi,
    Ich versuche mich gerade mit jQuery und stehe damit noch am Anfang. Meine Frage mag daher etwas zu einfach erscheinen, ich hoffe Ihr habt ein nachsehen.

    Ok zu meinem Wunsch. Ich habe ein Formular und lese aus der DB eine Liste von Mitgliedern und Gruppennamen aus. Diese werden jeweils als Checkbox und Radiobutton ausgegeben. Habe ein Label gesetzt, so dass man nur auf den Namen klicken muss um die Checkbox oder den Radiobutton zu aktivieren. Soweit so gut, das ist ja nur HTML und PHP.

    Nun wollte ich das wenn man einen Gruppennamen auswaehlt im unteren Bereich dieser erscheint. Das geht ja mit jQuery und ich habe diese funktionierende Loesung zusammengebastelt.

    HTML-Code:
     function addGroupName(div) {
             jQuery("#sortable li").click(function(){
                 $('#GroupName').empty();
                 $("#GroupName").append($(this).text());
             });
        } ;

<li class="ui-state-default" onClick="addGroupName()" >
<label for ="'.$Groups['GroupD'].'">'.$Leaguename['GroupName'].'</label>
</li>
    Danach wollte ich das Ganze auch fuer die Mitglieder zusammenbauen, doch da wird es kompliziert. Es sind ja checkboxen, das bedeutet man kann:
    1. mehrere auswaehlen (sprich mein empty oben muss weg)
    2. Auswahl aendern (sprich, der Wert muesste auch in der Liste wieder geloescht werden)

    Mein Versuche sind bisher klaeglich gescheitert. Ehrlich gesagt scheitere ich schon beim ersten Punkt. Waehle 1 aus, 1 Wert wird unten angezeigt, waehle 2. aus, Wert wird unten 2 mal angezeigt, waehle 3 aus.... 3 Werte usw.

    Kann mir jemand einen Tip geben, wie so etwas funktionieren koennte und wonach ich genau suchen muss? Ich weiss wirklich nicht, wo ich da anfangen muss. Freue mich ueber jede Antwort. Vielen Dank !!

    Gruss Bicko
     
    Zitieren Zitieren
  2. 22.07.10 13:22 #2
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    Moin,

    denkbar wäre jenes:
    Anstatt beim Klick direkt den Namen in die Liste zu Schreiben, iteriere über die Checkboxen/Radio-Buttons und prüfe für jedes, ob aktiviert...falls ja, erweitere die Liste.
    (Eingangs die Liste natürlich leeren)

    Ebenfalls denkbar:
    Du bräuchtest einen Selektor, an dem du eine Beziehung zwischen den Boxen und den Namen in der Liste herstellen kannst.
    Das gäbe dir die Möglichkeit:
    1. beim aktivieren des Buttons zu schauen, ob der Eintrag schon in der Liste ist(und ihn in dem Fall nicht nochmals einzufügen)
    2. beim deaktivieren einen Eintrag gezielt zu Löschen
     
    Zitieren Zitieren
  3. 22.07.10 13:41 #3
    Bicko Bicko ist offline Mitglied Gold
    Registriert seit
    Sep 2003
    Beiträge
    160
    Moin Sven,

    Danke fuer Deine Antwort. Zu welcher Moeglichkeit wuerdest Du mir denn raten? Was waere einfacher umzusetzen, gerade fuer mich als totaler Anfaenger?
     
    Zitieren Zitieren
  4. 22.07.10 14:00 #4
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    Die 1. wäre sicher einfacher umzusetzen.
    Ob es sinnvoll ist, sie zu Verwenden, hängt davon ab, wieviele Mitglieder und Gruppennamen dort insgesamt zu Erwarten sind.

    Werden es sehr viel, würde ich eher zu Variante 2 neigen, denn bei Variante 1 werden dann ja bei jedem Klick alle Boxen durchlaufen, was bei 100en davon schon einen Moment dauert.
     
    Zitieren Zitieren
  5. 22.07.10 15:04 #5
    Bicko Bicko ist offline Mitglied Gold
    Registriert seit
    Sep 2003
    Beiträge
    160
    Mmh, ok vielleicht waeren es 100 oder max 150. Ist sehr schwer zu sagen. Unter der 2. Loesung kann ich mir momentan einfach noch sehr wenig vorstellen. Vielleicht sollte ich es dann also mit Loesung 1 versuchen. Mal sehen ob ich das hinbekomme.
    Vielen Dank nochmal.
     
    Zitieren Zitieren
  6. 23.07.10 01:06 #6
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    Hier mal ein Beispiel für die 2. Variante:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

    <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<form>
<ul id="groups">
 <li>
  <label for ="gruppenid1">Gruppenname1</label><input type="checkbox" id="gruppenid1">
 </li>
 <li>
  <label for ="gruppenid2">Gruppenname2</label><input type="checkbox" id="gruppenid2">
 </li>
 <li>
  <label for ="gruppenid3">Gruppenname3</label><input type="checkbox" id="gruppenid3">
 </li>
 <li>
  <label for ="gruppenid4">Gruppenname4</label><input type="checkbox" id="gruppenid4">
 </li>
</ul>
</form>
<ul id="grouplist" style="list-style-type:none"></ul>
<script type="text/javascript">
<!--
 
function addGroupName(li) 
{
  var o=$($(li).find('input:checkbox').get(0));
  var i=o.attr('id');
  var s=$($(o.parent().get(0)).find('label').get(0)).text();
  $('#grouplist li[title='+i+']').remove();
  if(o.attr('checked'))
  {
    $('<li/>').attr('title',i).text(s).appendTo('#grouplist');
  }
  
}
document.forms[0].reset();
$('#groups li').click(function(){addGroupName(this);})
//-->
</script>
</body>
</html>

    Dem Eintrag in der Liste wird als title-Attribut die ID der checkbox gegeben, so hat man den nötigen Selektor.
    Das betreffende Element wird generell erstmal entfernt(zumindest versucht, dies zu Tun), und sollte die Checkbox aktiviert sein, in die Liste eingefügt...das wars schon
     
    Zitieren Zitieren
  7. 23.07.10 16:57 #7
    Bicko Bicko ist offline Mitglied Gold
    Registriert seit
    Sep 2003
    Beiträge
    160
    Hallo Sven,

    Vielen, vielen Dank. Dein Beispiel funktioniert wirklich prima, aber ob ich jemals darauf gekommen waere ist wirklich mehr als fraglich. Das sieht schon sehr nach "advanced" aus. Ich muss mich da wirklich noch in die Materie jQuery reinarbeiten. Die Moeglichkeiten damit sind einfach genial, auch wenn ich es jetzt nur als einen kleinen Effekt ohne wirklichen Nutzen benuzte, da ich ja immer noch mit dem normalen Formular arbeiten werde und das wirklich nur als kleine Uebersicht nehme. Aber ist schon wirklich Klasse. Nochmal vielen Dank fuer Deine Hilfe.

    Gruss Bicko
     
    Zitieren Zitieren
  8. 23.07.10 17:40 #8
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    Das ist keineswegs "advanced".

    Wenn man ein wenig weiss, wie jQuery funktioniert und was es kann, dann ist das recht einfach
     
    Zitieren Zitieren
« JS Script verhindert Formularverarbeitung | Zittern beim faden. »

Ähnliche Themen

  1. jQuery: Response direkt anzeigen bzw. auf Response warten bzw. jQuery und Servlet
    Von NetPerformance im Forum Javascript & Ajax
    Antworten: 6
    Letzter Beitrag: 14.01.11, 13:32
  2. Checkbox anzeigen
    Von HeinerPyt im Forum Java
    Antworten: 6
    Letzter Beitrag: 06.07.10, 11:07
  3. [jQuery] - Checkbox selektieren bei click
    Von Denniz im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 21.05.10, 14:29
  4. CheckBox dynamisch anzeigen
    Von Hulewulle im Forum C/C++
    Antworten: 1
    Letzter Beitrag: 23.10.07, 18:50
  5. DB-Feld-Inhalt in Checkbox anzeigen
    Von Jerinca im Forum ASP
    Antworten: 2
    Letzter Beitrag: 13.10.04, 08:01