JSP und HTML Buttons

Hallo,

also da hilft dir weder HTML, noch Java (es sei denn du willst nach dem Buttonklick die komplette Seite refreshen, aber aber nicht so berauschend wäre...). Das ganze lässt sich ganz gut mit JavaScript und CSS lösen.
Du machst einfach verschiedene Layer, die du beim laden auf visiblity=hidden setzt, und im Button, der die Dinger anzeigen soll, setzt du nur die Eigenschaft auf "visible". Funktioniert wunderbar, und ohne kompletten refresh, da alle schon geladen ist.

Lies dich mal ein:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#visibility

Mario

Dankeschön
es funktioniert, ich hab's so gemacht

function Button1_onclick() {
 if (document.getElementById)
    document.getElementById("List").style.visibility = "visible";
...

da ich aber keine Ahnung von CSS habe, weis ich nicht wie man mehrere Komponeneten gleichzeitig visible machen kann. Zum Beispiel: ein Listbox, Überschrift und ein Ok Button sollte gleichzeitig visible sein. Alles einzeln auf visible setzen ist sicherlich keine gute Idee.

Schmeiß doch alle betreffenden Komponenten in ein Div und ändere das visibility-Attribut nur dafür. Nicht getestet, aber sollte funzen

greez
JoSsiF

super, es funktioniert. Die Div Komponenten werden alle angezeigt...

aber wie könnte ich ,  div komponenten Vertikal in der Mitte der Webseite erschienen lassen.  horizontal habe ich es mit align = "center" gemacht aber Vertikal klappt es nicht. ich habe nicht viel Ahnung von HTML- Layouts und CSS etc.
links und rechts sind noch andere Div Komponenten und ich möchte, dass jede div Komponente vertikal in der Mitte erscheint.

Guckst du hier:
http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte

greez
JoSsiF

Es funktioniert leider nicht wirklich, ich kann zwei unterschiedliche div komponenten nicht genau an gleicher Stellen erscheinen lassen, sie werden untereinander dargestellt
ich habe links unterschiedliche Buttons und wenn ich auf Text klicke soll in der Mitte (zentriert) ein Textarea erscheinen, wenn ich auf List klicke soll Textarea weg und genau an gleicher Position soll eine Auswahlliste erscheinen etc. wie könnte ich sowas realisieren.

Doch, du kannst 2 unterschiedliche DIV-Container übereinander darstellen. Dazu gibt es die Eigenschaft "z-index", damit kannst du "in den Raum gehen".
Am besten, du schaust dir mal alle Elemente an, mit denen du die Darstellung regeln kannst:

http://de.selfhtml.org/css/eigenschaften/positionierung.htm

Mario

aber style="VISIBILITY:hidden, deshalb kann ich mit z-index nichts anfangen oder?


<table ID="Table1">
   <tr>
      <td align="center" valign="top">
         <div id="Gruppe" style="VISIBILITY:hidden" align="center">
            <p><input id="Text1" type="text" maxLength="80" size="40" name="Abbrechen"></p>
            <p><input id="ok" type="button" value="ok" name="ok"></p>
         </div>
         <div id="Gruppe2" style="VISIBILITY:hidden" align="center">
            <p><input id="Text2" type="text2" maxLength="80" size="40" name="List"></p>
            <p><input id="Abbrechen" type="button" value="abbrechen" name="Abbrechen"></p>
         </div>
      </td>
   </tr>
</table>
ich habe mit Table gemacht, das muss ich noch ändern
ich möchte diese beiden Div-Container an der gleichen Position haben, per Button klick sollen Sie nacheinander angezeigt werden. Wenn die eine erschient, soll der andere weg, Java-Script Funktion habe ich schon und es funktioniert, nur mit der Positionierung habe ich probleme. Die müssen auch nicht unbediengt zentriert erscheinen.

In einer Tabelle wird das nicht gehen. Du musst den Div absolut positionieren (position: absolute;), damit das mit dem z-index überhaupt einen Sinn macht (sonst richtet sich der Div am Elternelement aus).

greez
JoSsiF

Sorry, ich wusste nicht dass man durch Semikolon getrennt mehrere style Attribute definieren kann. Der Code war nur ein Beispiel. Ich möchte eigentlich andere Komponenten nicht nur textfield und Button. Aber jetzt funktioniert es endlich. Danke euch!

...also alles was ich bis jetzt machen wollte, habe ich mit eurer Hilfe geschafft...es funktioniert alles prima

ich habe jetzt auch einen Cancel Button als div Komponente. Wenn man klickt, sollten die div Komponenten entfernt werden und auch keine andere div Komponenten an gleicher Position erscheinen. Das heisst hier kann ich mit visible oder hidden nichts anfangen, weil ja auch keine andere div Komponente dort erscheinen soll. Sollte ich vllt die Seite refreshen. wie kann man sowas realisieren, oder gibt es andere Möglichkeiten. Es ist möglich, es wieder mit hidden zu machen aber ich weiss nicht ob das elegante Lösung ist...

PS: ach noch was... bevor etwas passiert sollte ein MessageBox mit Ja und Nein option erscheinen wenn man Ja klick sollte die Seite refreshen ansonsten nicht passieren. Ich kenne als MessageBox nur alert() ...hat aber keine optionen...

danke im voraus

Hi |

Ist jetzt die Frage, ob es nicht das einfachste wäre, dieses einen Div, der jetzt noch erscheint, auch noch auf invisible zu setzen.

Hab ja das Resultat noch nicht gesehen, aber die Steuerung der Inhalte auf diese Art und Weise per JavaScript ist ja sowieso nicht so ganz alltäglich, weswegen sich die Frage nach der Eleganz erst in zweiter Instanz stellt
Allerdings dauert ein kompletter Refresh auch immer etwas länger, was vielleicht auch dem Verhalten deiner Seite etwas widerspricht, da die meiste Interaktion wohl doch irgendwie clientseitig gesteuert wird (und das geht bekanntlich schnell).

Die Abfrage (OK/Cancel) bekommst du übrigens mit confirm() hin.

greez
JoSsiF

ok ich hab's mit hidden und visible gemacht und es funktioniert ganz gut.

jetzt muss ich in eine Auswahlliste, Daten aus Mysql datenbank auflisten. Die Verbindung Abfrage etc. habe ich schon nur mit HTML komponenten komme ich immer noch nicht klar.ich habs mit diesem Code versucht aber es klappt nicht:

function okrechte_onclick() {
      <%
       ver = new model.Verwaltung();
       Vector list = ver.getRolle(_dbCon);
       ListIterator iter = list.listIterator();
       while(iter.hasNext()){%>
                
          document.getElementById("Select2").add(<%=iter.next()%>);
       <%
       }
       %>
}

Daten bekomme ich aufjeden fall ich kann mit System.out.println(); in der Konsole ausgeben...

Der Code ist absolut falsch, ich kann keine Javascript funktion benutzten, ich muss es mit Java Code machen. Wie könnte ich überprüfen, ob ein Button geklickt wurde.
if(null !=  request.getParamter("Button"))

das funktioniert aber nur bei style = submit
kann ich das auch bei normalen klick Button anwenden dann brauche ich keine Javascript funktionen....

Jetzt mal nicht alles durcheinanderbringen

Wenn die Auswahlliste einfach mal durch eine JavaScript-Einblendung erscheinen soll, dann müssen die Daten auch im Browser vorliegen. Und geliefert werden sie ja von deinem JSP bzw. dem Servlet dahinter oder was auch immer (über den zugehörigen Code hab ich jetzt mal nicht weiter drübergeschaut).

Wenn du das grundsätzlich anders machen willst, musst du das JSP-Dokument neu laden - mit entsprechenden Abfragen gespickt. Das geht dann auch ohne JavaScript.

Alternative, die man heutzutage mit erwähnen sollte: AJAX. Damit geht's auch ohne Refresh. Aber das nur am Rande, das würde jetzt zu weit führen

greez
JoSsiF

ok... ich muss natürlich nicht alles in Javascript funktion machen. Die Daten sind im Browser aber ich weis nicht in welche form ich sie in die Auswahlliste einfügen soll. Ich brauche also eine while Schleife:

 ListIterator iter = list.listIterator();
       while(iter.hasNext()){%>
               
          document.getElementById("Select2").add(<%=iter.next()%>);
       <%
       }
       %>
iter.next() liefert schon den Datensatz das habe ich auf unterschiedliche Art und Weise überprüft durch konsolen ausgabe  oder einfach im Browser aber ich kann die Daten nicht in die Auswahlliste einfügen. ist die Methode add richtig. ich weiss nicht es nicht genau

Kann man mit add() machen, allerdings erwartet die Funktion 2 Parameter.

Schau mal hier: http://de.selfhtml.org/javascript/objekte/options.htm#neue_elemente

greez
JoSsiF

<script LANGUAGE="JavaScript">
function Info()
{
<body onLoad='shoutboxes()'>
<script language="JavaScript">
function shoutboxes()
{
var breite=800;
var hoehe=600;
var positionX=((screen.availWidth / 2) - breite / 2);
var positionY=((screen.availHeight / 2) - hoehe / 2);
var url='Hier die komplette URL eingeben',pop=window. open('','','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbar s=1,resizable=1,fullscreen=0,width='+breite+',height='+hoehe+',top=10000,le ft=10000');
pop.resizeTo(breite,hoehe);
pop.moveTo(positionX,positionY);
pop.location=url;
} 
</script>
}
document.writeln(Info())
</script>

Probier das mal .

@Dr. Noob:
Hast du auch die zugehörige Frage gelesen?

Ähm ne. Uppps .