Cr0wN
Grünschnabel
Hallo zusammen,
ich wollte mich einfach aus Neugier mehr mit Webapp-Entwicklung beschäftigen und habe angefangen mit Hibernate und Springframework eine Webapp zu entwickeln. Ich nutze zudem Bootstrap. Das Grundgerüst besteht und es funktioniert bisher auch schon Daten in eine MySQL-Datenbank zu schreiben und zu lesen. Was nicht funktioniert ist eher bei der Darstellung im Browser (Ich hab Firefox und IE probiert, bei beiden funktionierts nicht).
Sache ist die. Ich habe drei Buttons. Bei Klick auf diese Buttons erscheinen jeweils Modals. Das heißt zu jedem Button ein Modal. Die drei Buttons sind für
Es wird eine jsp angezeigt in welcher die drei Buttons sind und darunter wird eine Tabelle aufgebaut und die Werte aus einer bestimmten Datenbanktabelle angezeigt. Die Buttons erscheinen momentan untereinander. Ich wollte sie auch ein eine Tabelle legen, damit sie nebeneinander sind, aber das scheint nicht zu funktionieren.
Für Tipps und Unterstützung schonmal vielen Dank.
Viele Grüße
Steffi
ich wollte mich einfach aus Neugier mehr mit Webapp-Entwicklung beschäftigen und habe angefangen mit Hibernate und Springframework eine Webapp zu entwickeln. Ich nutze zudem Bootstrap. Das Grundgerüst besteht und es funktioniert bisher auch schon Daten in eine MySQL-Datenbank zu schreiben und zu lesen. Was nicht funktioniert ist eher bei der Darstellung im Browser (Ich hab Firefox und IE probiert, bei beiden funktionierts nicht).
Sache ist die. Ich habe drei Buttons. Bei Klick auf diese Buttons erscheinen jeweils Modals. Das heißt zu jedem Button ein Modal. Die drei Buttons sind für
- Daten hinzufügen
- Daten ändern
- Daten löschen
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- binding the head-data -->
<jsp:include page="head.htm" />
<title>Verwaltung - Aquarium</title>
</head>
<script type="text/javascript">
function calc() {
var breite = document.getElementById("breite").value;
var hoehe = document.getElementById("hoehe").value;
var tiefe = document.getElementById("tiefe").value;
document.getElementById("volumen").value = (breite * hoehe * tiefe) / 1000;
}
function selmodelcalc() {
var breite = document.getElementById("selbreite").value;
var hoehe = document.getElementById("selhoehe").value;
var tiefe = document.getElementById("seltiefe").value;
document.getElementById("selvolumen").value = (breite * hoehe * tiefe) / 1000;
}
function aqua_select(value) {
var selName = value;
var breite;
var hoehe;
var tiefe;
var name;
<c:forEach var="aqua" items="${aqua}" varStatus="status">
var Name = "<c:out value="${aqua.name}"/>";
if (Name == selName) {
name = "<c:out value="${aqua.name}"/>";
breite = "<c:out value="${aqua.breite}"/>";
hoehe = "<c:out value="${aqua.hoehe}"/>";
tiefe = "<c:out value="${aqua.tiefe}"/>";
document.getElementById("selname").value = name;
document.getElementById("selbreite").value = breite;
document.getElementById("selhoehe").value = hoehe;
document.getElementById("seltiefe").value = tiefe;
selmodelcalc(breite, hoehe, tiefe);
}
</c:forEach>
}
</script>
<body>
<jsp:include page="menu.htm" />
<jsp:include page="header.jsp" />
<div class="wrapper">
<div class="container">
<div class="row">
<div id="main" class="span9">
<div class="button_aqua_create">
<a type="button" class="btn"
href="#aqua_create" data-toggle="modal">Aquarium hinzufügen</a>
</div>
<div class="button_aqua_change">
<a type="button" class="btn"
href="#aqua_change" data-toggle="modal" onchange="disable();">Aquarium
ändern</a>
</div>
<div class="button_aqua_delete">
<a type="button" class="btn"
href="#aqua_delete" data-toggle="modal">Aquarium löschen</a>
</div>
<div id="table">
<table border="1" class="aqua_table">
<thead>
<tr colspan="10">
<th>Name</th>
<th>Breite/cm</th>
<th>Hoehe/cm</th>
<th>Tiefe/cm</th>
<th>Volumen/l</th>
</tr>
</thead>
<c:forEach items="${aqua}" var="aqua">
<tbody>
<tr colspan="10">
<td><c:out value="${aqua.name}" /></td>
<td><c:out value="${aqua.breite}" /></td>
<td><c:out value="${aqua.hoehe}" /></td>
<td><c:out value="${aqua.tiefe}" /></td>
<td><c:out value="${aqua.volumen}" /></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<div>
<!-- Coding for modal aqua_create -->
<div class="modal hide" id="aqua_create">
<div class="modal-header">
<a class="close" data-dismiss="modal">x</a>
<h3>Aquarium hinzufügen</h3>
</div>
<div class="modal-body">
<form method="post" action="saveAqua.html"
class="form-horizontal">
<fieldset>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Name">Name</label>
<div class="controls">
<input required="" id="name" name="name" placeholder=""
class="input-large" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="name">Breite/cm</label>
<div class="controls">
<input required="" onchange="calc();" id="breite"
name="breite" placeholder="" class="input-small" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="Name">Höhe/cm</label>
<div class="controls">
<input required="" onchange="calc();" id="hoehe" name="hoehe"
placeholder="" class="input-small" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="Name">Tiefe/cm</label>
<div class="controls">
<input required="" onchange="calc();" id="tiefe" name="tiefe"
placeholder="" class="input-small" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="Name">Volumen/l</label>
<div class="controls">
<input readonly="readonly" id="volumen" name="volumen"
placeholder="" class="input-small" type="text">
</div>
</div>
<h6>Bild hinzufügen</h6>
<input id="input-1a" type="file" class="file"
data-show-preview="true">
</div>
<div class="modal-footer">
<div class="submit">
<div class="control-group">
<label class="control-label" for="submit"></label>
<div class="controls">
<button id="submit" class="btn btn-primary">Hinzufügen</button>
</div>
<a href="#" class="btn" data-dismiss="modal">Abbrechen</a>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<!-- coding for modal aqua_change -->
<div class="modal fade" id="aqua_change">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
</button>
<h3 class="modal-title" id="myModalLabel">Aquarium ändern</h3>
</div>
<div class="modal-body">
<form method="post" action="changeAqua.html"
class="form-horizontal" name="Change">
<fieldset>
<!-- Select Basic -->
<div class="control-group">
<label class="control-label" for="aqua_selectsic">Aquarium
wählen</label>
<div class="controls">
<div align="center">
<select id="aqua_selectsic" name="aqua_selectsic"
class="input-medium" onchange="aqua_select(value);">
<c:forEach items="${aqua}" var="aqua">
<option><c:out value="${aqua.name}" /></option>
</c:forEach>
</select>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="Name">Name</label>
<div class="controls">
<input required="" readonly="readonly" id="selname"
name="name" placeholder="" class="input-small" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="Name">Breite/cm</label>
<div class="controls">
<input required="" readonly="readonly" id="selbreite"
name="breite" placeholder="" class="input-small" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="Name">Höhe/cm</label>
<div class="controls">
<input required="" readonly="readonly" id="selhoehe"
name="hoehe" placeholder="" class="input-small" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="Name">Tiefe/cm</label>
<div class="controls">
<input required="" readonly="readonly" id="seltiefe"
name="tiefe" placeholder="" class="input-small" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="Name">Volumen/l</label>
<div class="controls">
<input readonly="readonly" id="selvolumen" name="volumen"
placeholder="" class="input-small" type="text">
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<div class="submit">
<div class="control-group">
<label class="control-label" for="submit"></label>
<div class="controls">
<button id="submit" class="btn btn-primary">Ändern</button>
</div>
<a href="#" class="btn" data-dismiss="modal">Abbrechen</a>
</div>
</div>
</div>
</div>
<!-- coding for modal aqua_delete -->
<div class="modal fade" id="aqua_delete">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
</button>
<h3 class="modal-title" id="myModalLabel">Aquarium löschen</h3>
</div>
<div class="modal-body">
<form method="post" action="changeAqua.html"
class="form-horizontal">
<h3>Modal Body</h3>
</div>
<div class="modal-footer">
<div class="submit">
<div class="control-group">
<label class="control-label" for="submit"></label>
<div class="controls">
<button id="submit" class="btn btn-primary">Löschen</button>
</div>
<a href="#" class="btn" data-dismiss="modal">Abbrechen</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<jsp:include page="copyright.jsp" />
</body>
</html>Es wird eine jsp angezeigt in welcher die drei Buttons sind und darunter wird eine Tabelle aufgebaut und die Werte aus einer bestimmten Datenbanktabelle angezeigt. Die Buttons erscheinen momentan untereinander. Ich wollte sie auch ein eine Tabelle legen, damit sie nebeneinander sind, aber das scheint nicht zu funktionieren.
Für Tipps und Unterstützung schonmal vielen Dank.
Viele Grüße
Steffi
