Problemstellung siehe unter dem Code!
Zunächst mal den HTML-Code. Im Grunde nur eine Hauptseite, und ein Dialog mit Button (den Close-Button habe ich per CSS ausgeblendet):
Und hier mein JavaScript:
( Zur Orientierung: Mit localStorage.clear(); lösche ich evtl gespeicherte Daten, um den if (!user)-Kreis zu testen. In der For-Schleife, werden die Namen in die Auswahlliste übergeben. Mit ChangePage wird der Dialog mit Selector aufgerufen)
Problem:
1. Wenn kein User bekannt, soll der Dialog Modal geöffnet werden. Erst nach Auswahl eines Namens, und klicken auf OK, soll der Dialog verschwinden, und als Alert der Name angezeigt werden.
Z.Z. ist es so, dass sofort der Alert mit dem ersten Eintrag (Fritz) angezeigt wird. Nach klick auf Schließen, kommt der Dialog.
Nach Auswahl und Ok, wieder der Alert.
2. Wie erreiche ich, dass das Selectfeld Anfangs leer ist, also eine Aktive Auswahl erfolgen muss? Z.Z. ist immer Fritz bereits Vor-ausgewählt.
Zunächst mal den HTML-Code. Im Grunde nur eine Hauptseite, und ein Dialog mit Button (den Close-Button habe ich per CSS ausgeblendet):
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width , initial-scale=1">
<meta charset=utf-8">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.css">
<!--hier eigene css-->
<link rel="stylesheet" type="text/css" href="CSS/Eigene.css">
<style type="text/css">
#Ident {
text-align: center;
}
</style>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<!--hier eigene js-->
<script src="scripts/eigene.js"></script>
<script src="https://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.js"></script>
</head>
<body>
<div data-role="page" data-theme="d" id="home">
<div data-role="header" id="header">
<h1>Hauptseite</h1>
</div>
<div data-role="content" id="content"> </div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
<div data-role="dialog" id="Ident" >
<div data-role="header" id="select-header" class="select-header" >Wähle deinen Namen aus</div>
<div data-role="content" id="content">
<select name="Ident-Select" class="Select" ID="Ident-Select" ></select>
<a href="#" data-role="button" data-rel="back" data-inline="true">OK</a>
</div>
<div data-role="footer"></div>
</div>
</body>
</html>Und hier mein JavaScript:
( Zur Orientierung: Mit localStorage.clear(); lösche ich evtl gespeicherte Daten, um den if (!user)-Kreis zu testen. In der For-Schleife, werden die Namen in die Auswahlliste übergeben. Mit ChangePage wird der Dialog mit Selector aufgerufen)
Code:
$(document).on( "pageshow", "#home",function(event)
{
var user="";
var namensliste=["Fritz","Franz","Horst"];
localStorage.clear();
user=localStorage.getItem("Benutzername");
if (!user)
{
var select = document.getElementById("Ident-Select");
for (i = 0; i < namensliste.length; i++)
{
select.options[select.options.length] = new Option(namensliste[i], namensliste[i]);
};
$.mobile.changePage($("#Ident"), { transition: "pop",role: "dialog", modal:"true"});
var user=select.value;
alert(user);
}
});Problem:
1. Wenn kein User bekannt, soll der Dialog Modal geöffnet werden. Erst nach Auswahl eines Namens, und klicken auf OK, soll der Dialog verschwinden, und als Alert der Name angezeigt werden.
Z.Z. ist es so, dass sofort der Alert mit dem ersten Eintrag (Fritz) angezeigt wird. Nach klick auf Schließen, kommt der Dialog.
Nach Auswahl und Ok, wieder der Alert.
2. Wie erreiche ich, dass das Selectfeld Anfangs leer ist, also eine Aktive Auswahl erfolgen muss? Z.Z. ist immer Fritz bereits Vor-ausgewählt.
