Beiträge von MagicMiges

MagicMiges · 21. April 2020

Dankeschön!

Was denn für Fehler? Bin wie man wahrscheinlich erkennt noch Anfänger und lerne gern dazu.

MagicMiges · 21. April 2020

Hallo,

schaffe es einfach nicht mein Listenitem in der Menübar auf die rechte Seite zu ordnen.

Code

<body>
    <div>
      <nav>
          <li class="topmenue">
            <a href="C:/Users/Standalone/Documents/GUI_Vorlesungsplaner/Login.html">Ausloggen</a>
          </li>
      </nav>
    </div>
  </body>

<style>
li{
      list-style-type: none;
      padding: 0.1%;
      margin: 0 2vw;
      font-size: 3vh;
    }
    a{
      color: white;
      text-decoration: none;
      padding-left: 2%;
      padding-right: 2%;
      padding-top: 0.1%;
      padding-bottom: 0.1%;
    }
    a:hover{
      text-decoration:underline;
      background-color: #585858;
    }
    nav{
      background-color: grey;
    }
</style>

Alles anzeigen

Hoffe auf eine Hilfreiche Antwort. Danke!

MagicMiges · 20. April 2020

Hallo Timo,

nein, das ist nur ein Teil meines Codes, viel mehr an HTTP Requests habe ich aber auch nicht geschrieben. Verwende Chrome und hat wie gesagt Funktioniert bis ich diesen Teil mit Hilfe von verschiedenen Seiten zusammengeschrieben habe.

Code

const url='http://localhost8080/test.html';
      const data={
        name: "Tabelle",
        id: tab
      }
      $('.btn').click(function(){
        $.post(url,data, function(data, status){
          console.log(`${data} and status is ${status}`)
          var formularBody = $("#formBody").html()
            .send("#lbDatum")
            .send("#lbTerminbezeichnung")
            .send("#lbStart")
            .send("#lbEnde")
            .send("#lbKursbezeichnung");
          $("#firstBody").html(formularBody);
          var thetbody = $("#tbodytab");
        });
      })

Alles anzeigen

Verwende Visual Studio Code (bezüglich des $)

Sehe jetzt meine Fehler aber weiß leider nicht wirklich wie ich diese ausbessern kann.

Einen Tipp zur Definition der fehlenden Variablen?

Gruß,

Lucas

MagicMiges · 20. April 2020

Ich habe eine Tabelle, welche durch einen Button um jeweils einen Eintrag erweitert werden soll. Das hat bisher Problemlos Funktioniert. Seitdem ich jedoch einen HTTP Request eingebaut habe um die Daten an den Server zu senden, funktioniert diese nicht mehr.

Code

<body id="firstBody">
    <div id="focus"></div>
    <div id=formBody>
      <label id="überschrift" for="überschrift">Bitte legen Sie einen Vorlesungstermin fest
      </label>
      <label id="Termindatum" for="termindatum">Datum
        <input id="lbDatum" type="date" name="termindatum" placeholder="04.03.2020">
      </label>
      <label id="Terminbezeichnung" for="terminbezeichnung">Bezeichnung: 
          <input id="lbTerminbezeichnung" type="text" name="terminbezeichnung" placeholder="Statistik" maxlength="30">
      </label>
      <label id="Start" for="start">Von: 
        <input id="lbStart" type="time" name="start" min="08:00" max="16:00" value="09:00">
      </label>
      <label id="Ende" for="ende">Bis: 
        <input id="lbEnde" type="time" name="ende" min="11:00" max="19:00" value="12:15">
      </label>
      <label id="Kursbezeichnung" for="kursbezeichnung">Kurs:
        <input id="lbKursbezeichnung" type="text" name="kursbezeichnung" placeholder="WWI2020C" maxlength="10">
      </label>
    </div>

    <script>
      const url='http://localhost8080/test.html';
      const data={
        name: "Tabelle",
        id: tab
      }
      $('.btn').click(function(){
        $.post(url,data, function(data, status){
          console.log(`${data} and status is ${status}`)
          var formularBody = $("#formBody").html()
            .send("#lbDatum")
            .send("#lbTerminbezeichnung")
            .send("#lbStart")
            .send("#lbEnde")
            .send("#lbKursbezeichnung");
          $("#firstBody").html(formularBody);
          var thetbody = $("#tbodytab");
        });
      })

      function clone_this() //Create / Set Methode für neue Tabellenzeile mit übergebenen Datensätzen
      {
        var tbody = document.querySelector('#tab tbody');
        // neue Tabellenzeile durch Klonen der letzten erzeugen
        newRow = tbody.lastElementChild.cloneNode(true);
        // und an Ende in den tbody einfuegen
        tbody.appendChild(newRow);
        // Eingabefelder in der neuen Tabellenzeile bereit stellen
        var dstInputs = newRow.querySelectorAll('input');
        for (j = 0; j < dstInputs.length; j++) {
            // Quell-Eingabefeld bereitstellen
            var srcInput = document.getElementById('lb' + dstInputs[j].name);
            // und den Wert daraus in das Eingabefeld
            // in der neuen Tabellenzeile uebertragen
            dstInputs[j].value = srcInput.value;
        }
      }
    </script>

    <table id="tab" border="2">
      <tbody id="tbodytab">
        <tr>
          <td width=" 160"><input type="text" name="Datum" value="Datum" readonly></td>
          <td width="60"><input type="text" name="Start" value="Von" readonly></td>
          <td width="60"><input type="text" name="Ende" value="Bis" readonly></td>
          <td width="160"><input type="text" name="Terminbezeichnung" value="Modulbezeichnung" readonly></td>
          <td width="160"><input type="text" name="Kursbezeichnung" value="Kursbezeichnung" readonly></td>
          <td width="75"><input type="button" id="löschen" value="Löschen"></td>  <!-- Delete Methode für Buttton an DB -->
        </tr>
      </tbody>
    </table>

    <input type="button" id="erstellen" value="Festlegen" onclick="clone_this()">
  </body>

Alles anzeigen

Verwende zum ersten mal HTTP Requests und bin mir dementsprechend auch nicht bezüglich der Richtigkeit bewusst.

Danke schon mal für die Hilfe

MagicMiges · 14. April 2020

Hätte gerne einen halbwegs ansehnlichen Kalender der dem Benutzer als Terminübersicht dient. Termine sollen daneben in einem Formular angelegt werden. Dabei wäre es schön wenn durch den klick in den Kalender das ausgewählte Datum in das Formular übernommen wird und nicht separat ausgewählt werden muss.

MagicMiges · 14. April 2020

Hallo,

ich habe mir durch einiges an Internetrecherche einen Kalender zusammengebastelt. Dieser sollte das angeklickte Datum zur Terminfestlegung in einem Label Anzeigen.

Kalender HTML & JS:

Code

<body onload="renderDate()">
    <div class="wrapper">
      <div class="calendar">
        <div class="month">
          <div class="prev" onclick="moveDate('prev')">
            <span>&#10094;</span>
          </div>
          <div>
            <h2 id="month"></h2>
          </div>
          <div class="next" onclick="moveDate('next')">
            <span>&#10095;</span>
          </div>
        </div>
        <div class="weekdays">
          <div>So</div>
          <div>Mo</div>
          <div>Di</div>
          <div>Mi</div>
          <div>Do</div>
          <div>Fr</div>
          <div>Sa</div>
        </div>
        <div class="days"></div>
      </div>
    </div>

    <script>
      var dt = new Date();
      function renderDate() {
        dt.setDate(1);
        var day = dt.getDay();
        var today = new Date();
        var endDate = new Date(
          dt.getFullYear(),
          dt.getMonth() + 1,
          0
        ).getDate();
  
        var prevDate = new Date(
          dt.getFullYear(),
          dt.getMonth(),
          0
        ).getDate();
        var months = [
          "Januar",
          "Februar",
          "März",
          "April",
          "Mai",
          "Juni",
          "Juli",
          "August",
          "September",
          "Oktober",
          "November",
          "Dezember"
        ]
        document.getElementById("month").innerHTML = months[dt.getMonth()];
        var cells = "";
        for (x = day; x > 0; x--) {
          cells += "<div class='prev_date'>" + (prevDate - x + 1) + "</div>";
        }
        console.log(day);
        for (i = 1; i <= endDate; i++) {
          if (i == today.getDate() && dt.getMonth() == today.getMonth())
            cells += "<div class='today'>" + i + "</div>";
          else
            cells += "<div>" + i + "</div>";
        }
        document.getElementsByClassName("days")[0].innerHTML = cells;
      }
  
      function moveDate(para) {
        if(para == "prev") {
          dt.setMonth(dt.getMonth() - 1);
        }
        else if(para == 'next') {
          dt.setMonth(dt.getMonth() + 1);
        }
        renderDate();
      }
    </script>
  </body>
<style>
  * {
    box-sizing: border-box;
    font-family: Arial;
  }
  ul {
    list-style-type: none;
  }
  .wrapper {
    background-color: #dfe6e9;
    position: absolute;
    width: 20%;
    height: 20%;
    left: 5%;
    top: 21%;
  }
  .calendar {
    width: 600px;
    background-color: #fff;
    box-shadow: 0px 0px 15px 4px rgba(0, 0, 0, 0.2);
  }
  .month {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1%;
    text-align: center;
    background-color: grey;
    color: #fff;
  }
  .weekdays {
    background-color: #585858;
    color: #fff;
    padding: 2%;
    display: flex;
  }
  .days {
    padding: 3%;
    display: flex;
    flex-wrap: wrap;
  }
  .weekdays div,
  .days div {
    text-align: center;
    width: 14.28%;
  }
  .days div {
    padding: 10px 0;
    margin-bottom: 10px;
    transition: all 0.4s;
  }
  .prev_date {
    color: #999;
  }
  .today {
    background-color: #585858;
    color: #fff;
  }
  .days div:hover {
    cursor: pointer;
    background-color: #dfe6e9
  }
  .prev,
  .next {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 23px;
    background-color: rgba(0, 0, 0, 0.1);
    transition: all 0.4s;
  }
  .prev:hover,
  .next:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.2);
  }
  #month {
    font-size: 5vh;
    font-weight: 400;
  }

  #tab{
    position: absolute;
    top: 90%;
    left: 28%;
  }
</style>

Alles anzeigen

Das Label ist wäre:

Code

<label id="Termindatum" for="termindatum">Datum
        <input id="lbDatum" type="text" name="termindatum" placeholder="04.03.2020" readonly>
      </label>

Komme nun leider nicht auf eine Funktionstüchtige Funktion zur Datenübergabe. Danke schon mal für hilfreiche Antworten.

MagicMiges · 11. April 2020

Hallo,

ich würde gerne eine Tabelle durch zuvor in Textfelder eingetragene Werte erweitern. Dabei soll die Tabelle durch den Click auf den Button um die entsprechende Zeile erweitert werden. Dynamische Tabelle, Textfelder und Button hab ich bereits zusammen, nur werden die Werte lediglich in die erste Zeile übernommen.

Ich habe den gesamten Code in ein HTML-File geschrieben und darin CSS und JavaScript eingebaut.

Code

<body>
    <div id="focus"></div>
      <div>
        <label id="überschrift" for="überschrift">Bitte legen Sie einen Vorlesungstermin fest
        </label>
        <label id="Termindatum" for="termindatum">Datum
          <input id="lbDatum" type="text" name="termindatum" placeholder="04.03.2020" readonly>
        </label>
        <label id="Terminbezeichnung" for="terminbezeichnung">Bezeichnung: 
            <input id="lbModul" type="text" name="terminbezeichnung" placeholder="Statistik" maxlength="30">
        </label>
        <label id="Start" for="start">Von: 
            <input id="lbStart" type="time" name="start">
        </label>
        <label id="Ende" for="ende">Bis: 
            <input id="lbEnde" type="time" name="ende">
        </label>
        <label id="Kursbezeichnung" for="kursbezeichnung">Kurs:
          <input id="lbKurs" type="text" name="kursbezeichnung" placeholder="WWI2020C" maxlength="10">
        </label>
      </div>
  </body>
...
<body>
  <script type='text/javascript'>
    function clone_this()
    {
      NewRow = document.getElementById('tab').lastChild.cloneNode(true);
      document.getElementById('tab').appendChild (NewRow);
    
      var i = document.getElementById('tab').childNodes.length - 1;
    
      for(j=0;j<document.getElementById('tab').lastChild.getElementsByTagName('input').length;j++)
      {
       var newname ='feld[' +i+ '][' +j+ ']';
    
       document.getElementById('tab').lastChild.getElementsByTagName('input')[j].setAttribute('name', newname) ;
       var name = document.getElementById('tab').lastChild.getElementsByTagName('input')[j].name;
       document.getElementById('tab').lastChild.getElementsByTagName('input')[j].value=name;
      }
      document.getElementById("tbDatum").value = document.getElementById("lbDatum").value;
      document.getElementById("tbVon").value = document.getElementById("lbStart").value;
      document.getElementById("tbBis").value = document.getElementById("lbEnde").value;
      document.getElementById("tbModul").value = document.getElementById("lbModul").value;
      document.getElementById("tbKurs").value = document.getElementById("lbKurs").value;
    }
  </script>
    
  
      <table id='tab' border="2"'>
        <tr>
          <td width='160'><input type='text' id="tbDatum" name='Datum' value='Datum' readonly></td>
          <td width='60'><input type='time' id="tbVon" name='Start' value='Von' readonly></td>
          <td width='60'><input type='time' id="tbBis" name='Ende' value='Bis' readonly></td>
          <td width='160'><input type='text' id="tbModul" name='Terminbezeichnung' value='Modulbezeichnung' readonly></td>
          <td width='160'><input type='text' id="tbKurs" name='Kursbezeichnung' value='Kursbezeichnung' readonly></td>
        </tr>
      </table>

      <input type='button' id='erstellen' value='Festlegen' onClick='clone_this()'>
  </body>

Alles anzeigen

Bei Ideen bzw Tipps zur Lösung des Problems wäre ich Dankbar.

Beiträge von MagicMiges

Einzelnes Item in Menübar nach rechts verschieben

Einzelnes Item in Menübar nach rechts verschieben

JS Funktion funktioniert nach HTTP Request nicht

JS Funktion funktioniert nach HTTP Request nicht

Datum aus Kalender in Label

Datum aus Kalender in Label

Werte per Button in neue dynamische Tabellenzeile übernehmen