wie kann man in HTML oder Javascript einen Ladebalken erstellen?

Ich habe ein kleines Problem mit einer Webseite die Statusmeldungen über Shoutcast-Streams abbildet.

Zunächst werden die URLs aus einer Datenbank gelesen (das ist das geringere Problem) aber beim ausgeben der Liste wird noch der Onlinstatus abgefragt).

Das führ zu extrem langen Ladezeiten - die ich gerne mit einem Ladebalken überbrücken würde, weil man sonst den Eindruck bekommt der Klick auf den Link hätte nicht funktioniert.

Jemand eine Idee?

1 Antwort

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, JavaScript, PHP

25.12.2017, 20:13

Ein loading.gif wäre die einfachste Lösung, die auch mit CSS realisiert werden kann: https://www.w3schools.com/howto/howto_css_loader.asp

Ansonsten gibt es seit HTML5 das progress-Element. Dieses kannst du individuell stylen oder animieren (https://css-tricks.com/html5-progress-element/). Wenn es den aktuellen Status anzeigen soll, dann solltest du eine Echtzeitkommunikation zwischen Server und Client implementieren (bspw. über WebSockets oder Comet-Techniken wie long polling).

klugshicer

Fragesteller

25.12.2017, 20:55

OK vielen Dank, dann werde ich das morgen mal ausprobieren.

Folgendes:

Der Code, den ich in dieser Frage gepostet habe, habe ich minimal geändert (das PHP jetzt auch in eine separate Datei gepackt) und jetzt scheint der Button zu reagieren. So weit, so gut. Jetzt habe ich mir gedacht, dass es nützlich sein könnte, Fehler in einem alert auszugeben. Da ich nicht wusste, wie ich das anstelle, habe ich auch danach online gesucht und wurde fündig.

Nun zum eigentlichen Problem:

Mir wird ein 404-Fehler zurückgegeben, obwohl die Datei, die im Request angegeben wurde, existiert.

Ich habe auch dazu bereits im Internet nach Beiträgen gesucht und im weitesten Sinn ähnliche Beiträge gefunden. Aber keiner der Tipps, die ich dort gefunden habe, von denen ich der Meinung war, dass sie vielleicht helfen würde, hat etwas gebracht.

In einem der Kommentare (auf bspw. Stackoverflow) hieß es, man solle sich mit Werkzeugen wie Fiddler die Requests ansehen. Das habe ich gemacht, aber wirklich schlau werde ich daraus auch nicht.

Hier das JavaScript des Buttons:

<script>
  $(document).on('click', '#removeButton', function() {
    $.ajax({
      // type: "GET",
      url: "removeProject.php",
      // data: [id: selectedProjectID],
      success: function() {
        alert("Success");
      },
      error: function(jqXHR, textStatus, errorThrown) {
        alert(jqXHR.status);
        alert(textStatus);
        alert(errorThrown);
      } // error
    }) // ajax
  }); // function
</script>

Hier der Inhalt der removeProject.php-Datei:

<?php
  require_once '../sqlGenerator.php';

  $dbh = new PDO("mysql:dbname=" . $db . ";host=localhost", $user, $pass);
  $query = "SELECT * FROM TABLE_SELECTED_PROJECT";
  $selectedProjectID = mysql_query($query);

  $sql = "DELETE FROM " . TABLE_PROJECT_NAME . " WHERE " . COL_PROJECT_ID . " = " . $selectedProjectID;

  try {
    $statement = $dbh->prepare($sql);
    $statement->execute();
  }
  catch (PDOException $e) {
    exit("Datenbank-Fehler: " . $e->getMessage());
  } // trycatch
?>

Am URL-Pfad kann es nicht liegen, da habe ich bereits alles Mögliche ausprobiert. Die Dateien befinden sich beide im gleichen Ordner.

Was könnte der Grund sein?

...zur Frage

Ladebalken erstellen mit html?

Hallo! ich möchte gerne aus html einen Ladebalken erstellen der bis zu einem zu denen % springt wie ich einstelle und nicht weiter..

kann mir da jemand helfen? ich kriegs leider selbst nicht hin :/

soll auf meinem webseite www.4ddesign.at kommen allerdings sieht man erst für was wenn ich weiß wie das geht

...zur Frage

Ich möchte einen ladebalken programmieren nur wie?

Mir ist es egal welche programmiersprache ich nehme nur kann mir einer so ne anleitung schicken ?

...zur Frage

Windows 10 - Anmeldeoptionen öffnen sich nicht (unendlich langer Ladebalken)?

Hallo!

Sobald ich zu den "Anmeldeoptionen" gehe, sehe ich nur den Ladebalken oben (Bild). Was soll ich tun, damit ich diese Einstellungen beartbeiten kann? Ich habe ein PC auf welchem Windows 10 installiert ist.

Danke im Vorraus, HopPop3

...zur Frage

JavaScript AJAX Progress-Bar?

Schönen guten Tag miteinander,

Ich möchte viele Anfragen auf meiner Website per AJAX realisieren. Dazu möchte ich einen Ladebalken für den aktuellen Ladestatus der asynchronen Abfrage erstellen.

Ich bin auf das ProgressEvent gestoßen. Dieses wird bei mir jedoch nur einmal ausgeführt, was vermutlich auch standardmäßig der Fall ist.

Mein Ziel ist aber wie gesagt einen Ladebalken, der (wenn die Abfrage zu beispielsweise 25% geladen wurde) auch um diesen Prozentsatz angezeigt wird, zu erstellen.

Wie gehe ich da am besten vor?

...zur Frage

Twitch API Tracking Möglichkeiten?

Hallo,

ist es möglich mit der TwitchAPI Verläufe zu Tracken, wie wenn ich herausfinden möchte was in denn letzten Tagen geschehen ist (Abonnenten, Zuschauer usw), da die https://twitchtracker.com/api nicht viel hergibt.

...zur Frage

Multiplayer Game mit Javascript Ajax?

Hallo,

Ich möchte ein Spiel entwickeln, welches auf JS, PHP und MYSQL basiert.

Da kommt man ja so auf Ideen ein Brettspiel zu entwickeln, aber irgendwie reizt das nicht. Ich möchte in diesem Projekt mehr auf Ajax eingehen und diese stärker nutzen. Mich interessiert halt, wie sich das alles im Backend verhält.

Ich hab mir schon etwas agario ähnliches zusammen gebastelt, aber da läuft halt garnichts flüssig, das ist halt extrem asynchron. Da die Positionen der Spieler in der Datenbank gespeichert wird und abgefragt wird.

Hoffe ihr habt geile Ideen. Danke euch!

Ps: Ich wähle bewusst Ajax aus und nicht Websocket.

...zur Frage

Angular: Änderungen am Server?

Hallo ITler.

Ich habe mir überlegt meine Website zu überarbeiten und das mit Angular zu tun. Ich habe sie momentan mit PHP und einer SQLite DB umgesetzt. (Ich habe noch nie mit Angular gearbeitet - bitte verständliche Anfängerfreundliche Antworten)

Meine Fragen:

Kann ich eine DB ansteuern?
Gibt es eine Alternative Daten am Server über Angular zu ändern zb. DB / JSON

Was möchte ich machen:

Ich habe eine Seite auf der ich alle Lektionen aufliste und klickt man auf ein Listenelement so kommt man zur Lektion. Die Daten werden aus der DB abgefragt. Ich möchte von meiner Applikation neue Lektionen erstellen (+ Bilder hochladen) und Änderungen vornehmen.

Danke im voraus

...zur Frage

Daten aus MySQL auf Website darstellen?

Ich habe Daten in einer MySQL Datenbank, die ich gerne auf einer Website darstellen möchte, jeweils immer beim Klick auf einen Button (pro Button eine etwas andere Abfrage)

Eine entsprechende Abfrage dafür wird in JavaScript bereits erstellt.

Jetzt müssen die Daten nur noch abgerufen und eingefügt werden. - Nach allem, was ich gelesen habe, soll es sehr umständlich sein, MySQL in JavaScript zu verbinden.

Bisher habe ich probiert, die Abfrage per Cookie in PHP zu übertragen, dort die Daten abzufragen und zu echoen - das ganze mit einem getElementById().innervalue = ..., sodass immer die aktuelle Abfrage im DOM-Element ist, das passiert aber nur beim ersten Mal.

Das Abfragen der Daten in PHP und Zurückgeben an JS hat weder über einen Cookie, noch ein echo funktioniert.

...zur Frage

HTML Master Element auf mehreren Seiten einbinden?

Ich bin gerade an meinem Portfolio, welches ich selbst über HTML "code".

Die basic Skills reichen mir dazu eigentlich und den Rest bekomme ich von Codepen, aber eine Frage habe ich, welche ich nicht im Netz beantwortet bekommen habe. Oder zumindest weiß ich nicht genau, nach was ich googeln soll.

Ich habe auf jeder Seite dasselbe Menü.
Muss ich das nun auf jeder Seite händisch einpflegen oder kann ich irgendwie einen HTML-Schnipsel mittels PHP von einer anderen Seite auslesen.

Daher ich habe z.B. ein Stück Code welches auf jeder meiner .html Seiten zu finden ist. Ändere ich diesen Codeschnipsel, wird er automatisch auf allen eingebundenen Seiten ebenfalls geändert. So eine Art "Mastertemplate". Ich hoffe ihr versteht, was ich meine.

Und das am besten mit mehreren Objekten. Z.B. Header, Footer und noch andere Elemente, die dann auf die Unterseiten kommen werden.

Da eine komplette Antwort zu dem Thema vermutlich zu komplex ist, gerne auch einfach ein Tutorial verlinken.

Danke!

...zur Frage

Ist es möglich, die Photoshop-Funktionen durch eine Photopea-Website zu ersetzen? Ist es eine anständige Website? Kann sie genutzt werden?

...zur Frage

React Fullstack mit welchem Backend?

Ich wollte NextJS lernen Fullstack React Framework aber ich stelle mir die Frage, mit was genau man das Ganze verwendet. In fast jedem YouTube-Video wird "Prisma" (davor noch nie gehört) mit einer anderen Datenbank genutzt, was das alles noch schwieriger macht.

Es gibt PostgreSQL, MongoDB, SQLite, usw..

Ich kenne normales SQL in Kombination mit PHP, aber die neuen modernen Sachen kenne ich nicht.

React und PHP harmonieren nicht so gut, es gibt auch wenig Online-Ressourcen und ich sehe da keine Zukunft für Stellenausschreibungen, weshalb ich diese Kombination gar nicht mehr nutzen will und backendseitig lieber von neu anfangen möchte. NextJS wäre bequem, da ich keine Router brauche, SSR habe, TS + Tailwind-Support.

Kann mir ein Fullstack-Entwickler von euch eine Roadmap empfehlen?

NextJS mit was als Datenbank, MERN-Stack vielleicht oder irgendwas anderes?

Ich bin bereit in Zukunft mehr zu lernen, aber erstmal einen Allrounder, in dem ich mein Wissen vertiefen kann.

...zur Frage

Dart für Frontend und was für Backend?

Flutter und Dart sind ja für frontend, was ist für backend gut geeignet?

...zur Frage

Website schrift ändert sich nicht?

Font face wurde verwendet.

Ich hatte vorher eine andere Schriftart installiert und ausgewählt in der css datei .

nun zeigt mir die webseite noch immer die alte schrift an, sogar dann, wenn ich die schriftart aus dem ordner entferne oder in der css datei den namen umbenenne. (dann müsste es normalerweise die standard html schrift anzeigen)

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen