jquery die reihe nach?

Hallo zusammen

sobald "document ready" ist

führe ich ein paar foramtierungsänderungen, sowie verschiebungen von dom elementen durch

Nun hätte ich gerne, dass ich abfragen kann, wenn das ganze zu ende ist.

grund dafür: wenn das internet recht langsam lädt, sieht man als enduser, wie die formatierung sich ändert usw.... daher würde ich das wrapper_div von beginn an ausblenden und wenn die ganzen formatierungen zu ende sind, würde ich das wrapper_div einblenden. nun müsste ich das abfragen

kann man das mit einer async function machen? oder gibt es hierfür eine idee? danke

3 Antworten

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Webseite, JavaScript, JQuery

19.01.2024, 11:17

Zuerst wäre zu prüfen, ob du überhaupt asynchrone Operationen durchführst. Wenn nicht, genügt es, nach allen Operation eine Funktion wie show aufzurufen (vorausgesetzt, du blendest dein Element via display-Property aus).

Beispiel:

$(document).ready(function() {
  // do some operations ...
  $("selector for wrapper_div").show();
});

Bei einer asynchronen Operation hingegen solltest du die Callbacks nutzen, die dir die jQuery-Funktion in so einem Fall dann zur Verfügung stellt.

Beispiel:

$(document).ready(function() {
  $("selector for some element").hide("slow", () => {
    $("selector for wrapper_div").show();
  });
});

Schau in die jQuery API-Dokumentation für genaue Informationen zu den von dir verwendeten Methoden.

jumbo125

Beitragsersteller

20.01.2024, 10:53

Naja... Ich verwende großteils immer das fallback bei fadein, animation usw. Aber bei css umstyling gibt es keines,oder finde ich das nur nicht?

regex9

20.01.2024, 12:35

@jumbo125

Die css-Funktion wird synchron ausgeführt. Daher gibt es für sie keinen Callback.

jumbo125

Beitragsersteller

20.01.2024, 12:45

@regex9

Kann ich sie der reihe nach ausführen?

regex9

20.01.2024, 13:29

@jumbo125

Ja, das ist mit synchron gemeint. Erst wenn die Funktion ihre Arbeit erledigt hat, geht es im Programmfluss weiter.

Mirko Marek

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Mediengestalter Digital und Print

20.01.2024, 10:23

Ich würde dir empfehlen das ganze mit reinem JavaScript zu machen. Dir stehen eine reihe von Funktionen zur Verfügung um jQuery zu ersetzen.

Meine Empfehlung für natives JavaScript und jQuery. Frage ab ob das Dokument geladen wurde und erstelle das entsprechende Element und füge es hinzu(DOM-Manipulation). Denn wenn du ein Element das zwar ausgeblendet trotzdem am anfang lädst, bringt der Vorteil mit dem Ausblenden garnicht viel.

Woher ich das weiß:Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

Dr4everStone113

18.01.2024, 14:09

Du könntest eine Promise-basierte Lösung verwenden oder eine Callback-Funktion nach Abschluss der Formatierungen aufrufen. Async/await kann auch funktionieren, wenn deine Formatierungsfunktionen Promises zurückgeben. So kannst du den Code zum Einblenden des `wrapper_div` erst nach deren Erfüllung ausführen.

jumbo125

Beitragsersteller

18.01.2024, 14:31

meinst du so:

async function meineFormatierung(){

//hier der code

}

meineFormatierung().then(

function(value) {//formatierung ist nun abgeschlossen, mach nun den rest}

);

Dr4everStone113

18.01.2024, 14:32

@jumbo125

Fast :
vielleicht so :
async function meineFormatierung() {

// Hier der Formatierungscode

}

async function main() {

await meineFormatierung();

// Hier den Code, der nach der Formatierung ausgeführt werden soll

}

main();

Dr4everStone113

18.01.2024, 14:33

@jumbo125

Kleine Empfehlung noch -> kannst sowas auch auf stackoverflow fragen oder suchen ist vielleicht bei den Antworten besser

jumbo125

Beitragsersteller

18.01.2024, 16:00

@Dr4everStone113

Danke

Aus irgendeinen grund ist meine emailadresse gesperrt dort...

jumbo125

Beitragsersteller

18.01.2024, 19:29

@Dr4everStone113

muss die meineFormatierung() function ein return beinhalten?

Dr4everStone113

19.01.2024, 12:14

@jumbo125

Glaub muss nicht unbedingt

Ähnliche Beiträge

JQuery Bei Scrollen Datensätze nachladen

Hallol, ich möchte gerne Datensätze in einem DIV mit overflow: auto und einer festen Höhe nachladen über AJAX. Bisher ist es mit dem nachfolgenden Code so, dass nur nachgeladen wird wenn man auf der Seite nach unten scrollt.

Wie muss man den Code verändern, dass wenn man in dem DIV runterscrollt, die Datensätzte geladen werden?

    $(document).ready(function() {
    start = 0;
    count = 5;
    for (var i = 0; i < 1; i++){
        loadcontent(); 
    }
});
 
function loadcontent() {
    $("div.loader").show();    
     
    $.ajax({
        type: 'get',
        url: '/includes/ajax.php',
        async: false,
        data: { start : start, count : count },
        success: function (html){
            if(html){
                $('.container').append(html);
                start = start + 5;
            }else{
                $('.end').html('<p>Keine weiteren Posts!</p>');
            }
        }
         
    }) 
 
    $("div.loader").fadeOut('normal');     
}
 
$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height() - $(window).height()){       
            loadcontent();         
    }
});

Vielen Dank.

...zum Beitrag

jquery function ausführen beim klick auf den eine oder den anderen button?

hallo, ich habe eine jquery function und möchte, dass sie beim klicken auf den eine button und beim klicken auf den anderen button ausgeführt wird.

skript:

$(document).ready(function() {
                $(".kommentarabschicken").click(function(){
                        if($(".kommentareingabe").val() != "") {

                            $.ajax({
                                type: "POST",
                                url: "kommentare.php",
                                data: "kommentareingabe=" + $(".kommentareingabe").val(),
                                cache: false,
                                success: function(html){
                                        $(".scroll").html(html);
                                        $(".kommentareingabe").val();
                                }
                                });
                        }
                        return false;
                    });
                });

jetzt wird sie ausgefürt bei klicken auf kommentarabschicken. Sie soll auch ausgeführt werden, wen man auch kommentaroeffnen klickt. (evtl. wenn die Seite geladen wird)

Vielen Dank im Vorraus!!

...zum Beitrag

React JS, was ist <React.StrictMode>?

Das ist ja standardmäßig in der index.js aber was bringt es genau ?
Wenn ich es nicht weglasse dann werden meine Funktionen innerhalb der Komponente doppelt aufgerufen die zwischen dem <React.StrictMode> sind.

Also kann ich es weglassen ?

App JS :

import {React,useEffect,useState} from 'react'
export default function App() {
useEffect(() => {
  // http://api.icndb.com/jokes/random
  const fetchJoke = async()=>(
    await fetch(`http://api.icndb.com/jokes/random`)
    .then(response => response.json())
    .then(data => console.log(data.value.joke))
  )
fetchJoke()
}, [])
  return (
    <div>App</div>
  )
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>    
 <App />
<React.StrictMode> 
);

Hab ja auch useEffect Hook benutzt damit es nur 1x beim laden ausgeführt werden soll.

...zum Beitrag

JavaScript warten, bis sich Variable ändern?

Ich habe ein Formular mit einem Submit-Button.

<button onClick={() => submitHandler("fromSubmitButton")}>Submit</button>

Die submitHandler Funktion sendet über einen Websocket eine Nachricht an den Server, ohne eine direkte Antwort zu bekommen, wie es mit async/await funktionieren würde:

socket.emit('email-submit', value)

Nach einiger Zeit kommt vom Server bzw. Websocket eine Nachricht:

        socket.on('badEmailORphone', function(msg) {
            setBadEmailORphone(msg)
        });

In der Zeit zwischen dem Klick auf Submit und setBadEmailORphone gesetzt wird, möchte ich einen Ladescreen einblenden.

Rein logisch müsste ich den Ladescreen ab Klick auf den Submit-Button bis setBadEmailORphone setzen, aber wie kann ich in JavaScript x Sache machen, bis sich eine Variable ändert?

Meine erste Theorie war:

Submit onClick:

while(!setBadEmailOrphone) setLoading(true) //Mit etwas Delay zwischen Durchläufen

...zum Beitrag

JQuery: Wie kann ich eine div mit class nach Klick auf einen Button einfügen?

Moin,

vielleicht finde ich hier eine Hilfe. Vielen Dank im Voraus für jede Hilfe.

Ich sitze gerade an einem Projekt und wurde mit dem Frontend beauftragt. Ich besitze leider zwar keinerlei Programmierkenntnisse, bin aber gewillt, mich entsprechend daran zu setzen und mir die Grundlagen beizubringen.

Nun möchte ich einen Button generieren, der mir nach einem Klick ein neues <div>-Element in meinem DOM erzeugt und dabei auch eine bestimmte Klasse zugewiesen bekommt.

Probiert habe ich das Ganze wie folgt:

$("#btn1").click(function(){
  $("p").append("<div> Test </div>");
  div.addClass("operator")
});

So hat das aber leider nicht geklappt. Das Ganze lässt sich hier besser visualisieren und testen: https://www.w3schools.com/code/tryit.asp?filename=GBQJV6O2UFXH

Ein der class entsprechendes Design mit den Attributen habe ich per CSS bereits geschrieben. Da allerdings in der reinen HTML der <div>-Tag nicht vorliegt, wird mir das erst natürlich nicht angezeigt. Logisch. Erst nach dem Klick auf den Button soll der

<div class="operator">

Einzug in das DOM finden.

Wie kriege ich das hin?

Danke.

...zum Beitrag

Bilder bei jquery/JavaScript nach bestimmter zeit austauschen?

Erstmal entschuldigung für die komische Überschrift, ich schmeiße manchmal die beiden gerne durcheinander.

Ich hab auf meiner Seite einen Timer (fürs Beispiel 30s), der mit einem Button gestartet werden. Am Anfang soll Bild1 stehen. Nachdem der Timer bei der Hälfte der Zeit angekommen ist (hier 15s) soll Bild2 dort erscheinen wo Bild1 vorher war. Ist der Timer bei 0 angekommen, wird man auf eine andere Seite weitergeleitet.

Wie mache ich das am besten?

Hier mein bisheriger Code

$(document).ready(function (e) {

var $timer = $("#timer");

var stop = false;

var timerLoop;

$( "#button_start" ).click(function() {

timerLoop = setInterval(function(){ update() }, 1000);

});

function update() {

if(!stop){

var myTime = $timer.html();

var ss = myTime.split(":");

var dt = new Date();

dt.setHours(0);

dt.setMinutes(ss[0]);

dt.setSeconds(ss[1]);

var dt2 = new Date(dt.valueOf() - 1000);

var temp = dt2.toTimeString().split(" ");

var ts = temp[0].split(":");

if(ss[0] === "00" && ss[1] === "01"){

stop = true;

clearInterval(timerLoop);

$("body").load( "./erfolgreich.html" );

}

$timer.html(ts[1]+":"+ts[2]);

//setTimeout(update, 1000);

}

});

...zum Beitrag

Timer mit JavaScript?

Ich möchte mit JavaScript einen Timer programmieren. Der User soll die Zeit einstellen können bspw 60min und dann soll der Timer runterzählen. Wenns bei 00:00:00 ist, soll ein neuer Bildschirm aufgerufen werden.

Ich hab leider nicht wirklich eine Ahnung wie ich das hinbekommen soll. Im Internet sind zwar Beispiele für Timer, jedoch laufen die von 0 bis unendlich.... Da ich technisch nicht so versiert bin um das ganze umzustellen, hoffe ich, dass ihr mir helfen könnt. Bis jetzt habe ich es nur hinbekommen, dass der Timer überhaupt läuft (allerdings von 0 an) und erst beginnt, wenn man auf den Start-Button drückt.

Hier meine js Datei:

$(document).ready(function() {

var timer = 0;

$( "#button_start" ).click(function() {

setInterval(function(){ increaseTimer() }, 1000);

});

function increaseTimer(){

timer = timer +1;

$("#timer").html(timer);

};

});

Schonmal vielen Dank!

Eure Amy

...zum Beitrag

jQuery: An- und Ausschalter programmieren mit einer Variablen Programmieren?

Ich muss folgende Aufgabe lösen:

"Beim Überfahren des großen Bildes wird die Grafik „bild1.jpg“ gegen die Grafik „bild2.jpg“ ausgetauscht – beim Verlassen des Bildes wird die ursprüngliche Grafik wieder angezeigt.

Dieses Austauschen funktioniert aber nur, wenn zuvor der Ausschalter mit einem Klick „angeschaltet“ wurde – Grafiktausch mit Datei „schalterein.png“. Wird der Schalter wieder ausgeschaltet, dann geht auch die Mouseover-Funktionalität nicht mehr. Wichtig: Arbeiten Sie mit einer Variablen namens schalter."

Bei dem Schalter handelt es sich um ein Image und keinen Button.

Der erste Teil der Aufgabe - der Grafiktausch beim Hovern - ist kein Problem.

Den Schalter bekomme ich aber nicht programmiert. In anderen Aufgaben haben wir immer einen separaten An- und Ausschalter programmiert, bisher nicht beides zusammen und ich komme einfach nicht auf eine Lösung.

Bisher habe ich nur den Anschalter programmiert (kann natürlich falsch sein):

var Schalter=0;

$("img:eq(2)").click(function (){ Schalter=1; $("img:eq(2)").attr("src","schalterein.png"); })

Wenn man wieder auf das Schalter img klickt soll der Schalter=0 werden, das Bild soll sich wieder ändern & somit wäre er ausgeschaltet.

Ob der Schalter auf 0 oder 1 steht dient zur Abfrage um den Hover Effekt/ Grafiktausch zu aktivieren bzw. deaktivieren.

Kann auch sein, dass mein Ansatz total falsch ist. Ich hoffe jemand kann mir hier weiterhelfen.

...zum Beitrag

WEBSTORM erkennt .send Funktion nicht?

Bei folgendem Code sind die Methoden .send und .awaitReaction unterstrichen.

"Unresolved function or method send()"

Ich habe discord.js und so schon installiert. Muss man da sonst noch etwas importieren, damit .send usw. funktionieren?

const { Client, MessageEmbed, Intents } = require('discord.js');
const client = new Client({ intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MESSAGES] });

const TOKEN = 'Mein Token';
const channelId = 'ChannelID'; // Die ID des Textkanals, in dem die Nachrichten erstellt werden sollen

const userGroup = []; // Die Liste der Benutzer, die aufgelistet werden sollen
const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5']; // Die Auswahlmöglichkeiten

let currentIndex = 0; // Aktueller Index der Benutzergruppe

client.on('ready', () => {
    console.log(`Eingeloggt als ${client.user.tag}`);
});

client.on('messageCreate', async (message) => {
    console.log("P - Start des Event-Handlers");
    if (message.author.bot) return;

    if (message.content.startsWith('!start')) {
        console.log("P - !start erkannt");
        if (currentIndex < userGroup.length) {
            const user = await client.users.fetch(userGroup[currentIndex]);

            // Erstelle eine Nachricht mit den Auswahlmöglichkeiten
            const embed = new MessageEmbed() // Hier MessageEmbed verwenden
                .setTitle('Wähle eine Option:')
                .setDescription(options.join('\n'));
            const sentMessage = message.guild.channels.cache.get(channelId);
            await sentMessage.send(embed);
            console.log("P - Nachricht gesendet");
            // Füge Reaktionen hinzu
            for (let i = 0; i < options.length; i++) {
                await sentMessage.react(String(i + 1) + '\u20E3'); // Emoji-Reaktionen (1️⃣, 2️⃣, usw.)
            }

            // Warte auf eine Reaktion des aktuellen Benutzers
            const filter = (reaction, user) => user.id === userGroup[currentIndex];
            const collected = await sentMessage.awaitReactions(filter, { max: 1, time: 60000 }); // 60 Sekunden Zeit zum Reagieren

            if (collected.size === 0) {
                message.guild.channels.cache.get(channelId).send(`${user.tag} hat keine Option ausgewählt.`);
            } else {
                const chosenOption = options[parseInt(collected.first().emoji.name) - 1];

                message.guild.channels.cache.get(channelId).send(`${user.tag} hat "${chosenOption}" ausgewählt.`);
                // Hier kannst du die gewünschte Aktion ausführen, basierend auf der ausgewählten Option
            }

            // Lösche die ursprüngliche Nachricht und die Auswahl-Nachricht
            await message.delete();
            sentMessage.delete();

            currentIndex++; // Zum nächsten Benutzer in der Gruppe wechseln
        } else {
            message.channel.send('Alle Benutzer aus der Gruppe wurden aufgelistet.');
        }
    }
});
console.log('Bot starting');

client.login(TOKEN);

...zum Beitrag

Ich verstehe eine Arduiono Fehlermeldung nicht, weiss es jemand?

In function 'void translateIR()':

script:46:14: error: a function-definition is not allowed here before '{' token

script:55:13: error: a function-definition is not allowed here before '{' token

script:74:1: error: expected '}' at end of input

Mehrere Bibliotheken wurden für "IRremote.h" gefunden

Benutzt: C:\Users*\Documents\Arduino\libraries\IRremote

exit status 1

a function-definition is not allowed here before '{' token

Kann mir jemand erklären was das bedeutet?
Ein teil ist von mir selbst geschrieben und ein teil aus dem Tutorial. Bin gerad am anfangen. Im Pastebin link ist der Code.

https://pastebin.com/57c4EyEw

...zum Beitrag

SS im Falle von uppercase im style gegen ß ersetzen?

Hi,

das Eszett ist ja immer so ein Problem, falls man eine fancy font gefunden hat, die diesen Buchstaben nicht als Kapitälchen anbietet und es durch "SS" ersetzt, was bei manchen Wörtern furchtbar falsch aussieht. (AUSSERDEM, SPASS, FLEISS, usw.)

Daher meine Überlegung, dass man mit js vielleicht etwas machen könnte, falls die tags h1 bis h6, blockquote, p, usw. in der Eigenschaft text-transform, den Wert uppercase haben.

Meine Überlegung war bisher etwas in der Richtung

$(document).ready(function () {
  if($('h1, p').prop("text-transform", "uppercase")) {
     ... hier passiert die Magie
  }
});

Nur habe ich keine Möglichkeit gefunden, einzelne Buchstaben zu ändern, die irgendwo in einem Wort stehen. Immer nur Möglichkeiten, wie ich tags gegen andere komplett ersetze oder Endungen entferne, aber keine bestimmten Buchstaben.

...zum Beitrag

Excel VBA: Tabellenblätter bei gewissen Zellenwert ausblenden?

Hallo Zusammen,

Ich will mittels VBA ein Excel modifizieren, damit möglichst wenige Tabellenblätter angezeigt werden. In einem Tabellenblatt (z.B. "Auswahl") habe ich die Zellen C62, C88 und C114, die jeweils ein spezielles Tabellenblatt anzeigen sollen. Jedoch gibt es im Moment nur LZF-Meldungen.

Es soll jeweils bei "Yes" nichts angezeigt, bei "No" die entsprechende Tabelle eingeblendet werden.

Ansonsten sollen die "nicht betroffenen" Tabellen ausgeblendet bleiben

Hier der Code im Worksheet "DieseArbeitsmappe":

Private Sub Worksheet_Open()

'Beim Öffnen des Excels die betroffenen Blätter ausblenden
    ThisWorkbook.Worksheets("Tabelle4").Visible = False 
    ThisWorkbook.Worksheets("Tabelle5").Visible = False
    ThisWorkbook.Worksheets("Tabelle6").Visible = False
    
End Sub

In Blatt "Auswahl" (Tabelle7) habe ich folgenden Code:

Private Sub Worksheet_Change(ByVal Target As Range)

   

‘Hier sind vorher noch andere IF-Regeln hinterlegt, die nur Reihen in Tabelle7 ein/ausblenden

   

    If Range("C62").Value = "No" Then 'Tabellenblätter einblenden, sobald in der jeweiligen Zelle "No" ausgewählt wird

        ThisWorkbook.Worksheets("Tabelle6").Visible = True

       

        Else

        ThisWorkbook.Worksheets("Tabelle6").Visible = False ‘Hier erhalte ich jeweils ein LZF 9?

    End If

   

    If Range("C88").Value = "No" Then

        ThisWorkbook.Worksheets("Tabelle5").Visible = True

       

        Else

        ThisWorkbook.Worksheets("Tabelle5").Visible = False ‘Hier erhalte ich jeweils ein LZF 9?

    End If

   

    If Range("C114").Value = "No" Then

        ThisWorkbook.Worksheets("Tabelle4").Visible = True

       

        Else

        ThisWorkbook.Worksheets("Tabelle4").Visible = False ‘Hier erhalte ich jeweils ein LZF 9?

    End If

   

End Sub

Weshalb gibt es jeweils einen Fehler und wie kann ich diesen am einfachsten beheben?

Vielen Dank, Michael

...zum Beitrag

SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data?

Hallo,

ich versuche mit JavaScript Daten über ein Servlet aus der Datenbank zu holen. In folgende Zeile bekomme ich die Fehlermeldung aus dem Titel:

var katHoler = JSON.parse(xmlhttp.responseText);

Ich habe gelesen, dass meine Funktion eine JSON erwartet. Aber ich habe nur Lösungen mit Libraries wie jQuery gefunden. Die darf ich aber von meinem Professor aus nicht benutzen.

function pupulateDropDown() {
  var servletURL = "./KategorienHolen"
  var xmlhttp = new XMLHttpRequest();

  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      var katHoler = JSON.parse(xmlhttp.responseText);
      JSON.stringify(katHoler);
      
      var ausgabe = "<a href=" + "DisplayKlamotten" + "?=" + katHoler.kategorie + ">" + katHoler.kategorie + "</a>";

      document.getElementsByClassName("innerDiv").innerHTML = ausgabe;
      console.log(xmlhttp.responseText);
      console.log(katHoler.kategorie);
      console.log(katHoler.id);
    }
  }

  xmlhttp.open("GET", servletURL, true);
  xmlhttp.send();
}

...zum Beitrag

SyntaxError: Unexpected token s in JSON at position 0?

Hallo liebe Gutefragler,

Ich möchte eine Auktions-Web-App erstellen und normalerweise fügen Sie die Auktionen über ein Formular hinzu. Wenn ich das Formular korrekt ausfülle und dann auf die Schaltfläche Auktion erstellen klicke, erhalte ich eine Fehlermeldung. Normalerweise sollte man keine bekommen und man sollte die Auktionen in einer Tabelle in einer index.html bekommen.

Hier ist mein Code:

$(document).ready(function() {
  $("#create").click(function() {
    var data = {
      seller: $("#email").val(),
      name: $("#item").val(),
      html: $("#desc").val(),
      minimum_price: $("#str").val(),
      buyout_price: $("#buyout").val(),
      created_on: Date.now(),
      duration: $("#dur").val()
    }
    $.ajax({
      type: 'POST',
      url: "http://localhost:9000/auction",
      data: data,
      dataType: "json",
      contentType: "application/json",
      error: function() {
        alert('An error occurred while creating the new auction');
      },
      success: function(data) {
        $('form :input').val('');
        alert("Good");
      }
    });
  });
});

Mein Localhost sagt:

SyntaxError: Unexpected token s in JSON at position 0

Wo ist mein Fehler? Danke im Voraus!

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen