Dropdownbox durch Datepicker ankilckbar
Hallo,
ich erstelle gerade eine kleine website in mvc. nun habe ich das problem das ich durch einen datepicker die darunterliegende dropdownbox anklicke und dadurch nicht alle tage auswählen kann.
mfg
<tr><td>Erstellungsdatum</td>
<td> <%: Html.TextBoxFor(m => m.DatumErstellt, new { @id = "datepicker" })%></td></tr>
<tr><td>Priorität</td>
<td><%: Html.DropDownListFor( m => m.Prioritaet , (IEnumerable<SelectListItem>)Session["listPrio"])%></td></tr>
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptsSection" runat="server">
<script type="text/javascript">
$(document).ready(function () {
$("#datepicker").datepicker({ dateFormat: 'dd.mm.yy' });
});
</script>
</asp:Content>
Kann es sein, das das noch Ur-alt MVC mit ASPX-Syntax ist? MVC 2 vielleicht?
Moderner isses mit Razor, nur mal so am Rande. Aber arg modern sieht die Modellierung von Layout über Tabellen ohnehin nicht aus 😉
Du solltes mit ViewModels arbeiten. Dann ist es auch einfacher Drop-Downlisten HTML-Konform zu erstellen.
Über die Session bekommst Du schnell Race-Conditions. Man kann ja schließlich mehrere Fenster auf haben, und nicht nur eines.
Zudem sollte man sich an die Devise halten, so wenig wie möglich in die Session zu schreiben, da dies Server-Ressourcen belastet.Du solltest die Zuweisung der DTP-Eigenschaft nicht über eine ID, sondern über Klassen lösen. Das spart Ausführungszeit und sorgt für Einheitlichkeit.
Zum Problem, dass Du auf den DTP klickst aber sich eine Dropdownlist öffnet kann ich nichts sagen.
Das geht aus dem Quellcode nicht hervor.
Zeig mal das generierte HTML.
- performance is a feature -
Microsoft MVP - @Website - @AzureStuttgart - github.com/BenjaminAbt - Sustainable Code
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" /><title>
ToDo
</title><meta name="viewport" content="width=device-width" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="/Content/jquery.mobile-1.1.0.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile.structure-1.1.0.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile.theme-1.1.0.css" rel="stylesheet"/>
<link href="/Content/jquery-ui.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.5.3.js"></script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
</div>
<div data-role="content">
<script src="//Scripts/jquery-ui-1.8.20.js"></script>
<h2>Maßnahme Bearbeiten</h2>
<form action="/Home/EditMassnahmeq" method="post">
<table>
<tr><td>Allgemeines</td><td></td></tr>
<tr><td>Beschreibung</td><td>
<input id="Beschreibung" name="Beschreibung" type="text" value="Denmark minutes of budget meeting - Pos. 16" />
</td></tr>
<tr><td>Maßnahmen Nr.</td><td>
<input id="MassnahmenVFNr" name="MassnahmenVFNr" type="text" value="2011-30-33" />
</td></tr>
<tr><td>Erstellungsdatum</td>
<td> <input id="datepicker" name="DatumErstellt" type="text" value="25.07.2011 00:00:00" /></td></tr>
<tr><td>Priorität</td>
<td><select id="Prioritaet" name="Prioritaet"><option value="1">Hoch</option>
<option value="2">Mittel</option>
<option value="3">Gering</option>
<option value="4">Keine</option>
</select></td></tr>
<tr><td>Bearbeitungsstatus</td><td>
<select id="BearbStatus" name="BearbStatus"><option value="1">Aktiv</option>
<option value="1">Abgebrochen</option>
<option value="1">Unterbrochen</option>
</select>
</td></tr>
<tr><td>Zuordnung</td><td></td></tr>
<tr><td>Standort</td>
<td><select id="StandortNr" name="StandortNr"><option value="-1">Standortübergreifend</option>
<option value="1">Espelkamp Werk 1</option>
<option value="18">HARTING EC</option>
</select></td></tr>
<tr><td>Team</td>
<td><select id="GruppenNr" name="GruppenNr"><option selected="selected" value="-1">Auswählen</option>
</select></td></tr>
<tr><td>Eskalationshierachie</td>
<td><select id="HierarchieNr" name="HierarchieNr"><option value="-1">Auswählen</option>
<option value="6">Vertrieb Indien</option>
<option selected="selected" value="15">HARTING Denmark</option>
<option value="93">HARTING UAE</option>
<option value="94">test</option>
</select></td></tr>
<tr><td>Maßnahmen Gruppe</td>
<td><select id="MassGruppenNr" name="MassGruppenNr"><option value="-1">Standortübergreifend</option>
<option value="1">Espelkamp Werk 1</option>
<option value="18">HARTING EC</option>
</select></td></tr>
<tr><td>Maßnahmen Art</td>
<td><select id="MassnahmenArtNr" name="MassnahmenArtNr"><option value="-1">Auswählen</option>
<option value="11">HARTING Budget</option>
</select></td></tr>
<tr><td>Abteilung</td>
<td><select id="AbteilungNr" name="AbteilungNr"><option selected="selected" value="-1">Auswählen</option>
</select></td></tr>
<tr><td>Prozess</td>
<td><select id="ProzessNr" name="ProzessNr"><option selected="selected" value="-1">Auswählen</option>
</select></td></tr>
<tr><td><input type="submit" value="Speichern" /></form></td>
<td><a href="/Home/Massnahmen?Pagenr=1">
<button>Zurück</button>
</a> </td>
</tr>
</table>
</div>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery-ui-1.10.4.custom.js"></script>
<script src="/Scripts/jquery-ui-1.8.20.js"></script>
<script src="/Scripts/jquery.mobile-1.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#datepicker").datepicker({ dateFormat: 'dd.mm.yy' });
});
</script>
</body>
</html>
Sehe keinen Grund, wieso es nicht gehen sollte - auch wenn das HTML insgesamt halt "nicht gut" ist.
- performance is a feature -
Microsoft MVP - @Website - @AzureStuttgart - github.com/BenjaminAbt - Sustainable Code
Interessanter wäre hier doch das Stylesheet site.css. Kann es nicht sein, dass der z-index nicht passt? Versuch doch mal dem Picker einen hohen z-index zu geben.