Javascript/Ajax - Footer von Datei laden lassen?

Ich hab schon einiges an Code ausprobiert, selbst kann ich Javascript oder Ajax nicht besonders, komme aber zu keinen erfolgreichem Ergebnis, kann mir jemand dabei helfen?

Ich möchte lediglich den Footer über ein HTML-File in den Footer einfügen, ist auch nur Text.

WICHTIG: Der Footer soll nicht über den Buttonklick geladen werden, sondern mitsamt der Seite

1 Antwort

webflexer

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

10.05.2016, 12:47

Am besten und einfachsten machst du das über jQuery.

jQuery wird im head deiner Seite eingebunden:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

Jetzt vergibst du deinem footer eine eindeutige ID mit dem Namen z.B. meinFooter


<footer id="meinFooter"></footer>

Nach der jQuery Einbindung setzt du ein JavaScript das den Inhalt einer html-Datei mit dem Namen z.B. footer.html lädt und in deinen footer setzt.

<script>
$(document).ready( function() {
   $( "#footer" ).load( "footer.html" );
});
</script>

MoinMoin2014

Fragesteller

11.05.2016, 17:38

Okay, danke, soweit so gut, was ähnliche shatte ich auch zuvor, aber kann es sein, dass footer.html im selben Verzeichnis liegen muss? Ich wollte die Datei eigentlich in einen belibigen Ordner hauen... kann ich auch irgendwie Links angeben? Wäre um einiges komfortabler...

MoinMoin2014

Fragesteller

11.05.2016, 17:50

Also es wäre sehr gut, wenn ich statt footer.html einfach http://www.mein-server/ressource/footer.html angeben könnte, weil das scheint irgendwie nicht zu funktionieren

ich habe ein normales HTML-form und ajax dahinter mit einer div wo text ausgegeben wird. bei Erfolg soll jetzt aber eine weiterleitung stattfinden, wie mach ich das ? einfach mit header in der php-datei geht ja nicht...

...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

Datenbank in HTML einbinden?

Hallo,

Ich soll eine My SQL Datenbank in einer HTML Seite einbinden. Desweiteren soll ich Ajax und Javascript benutzen.

Ich habe mich die letzten Tage in PHP usw... eingelesen und viel getestet aber es klappt nicht.

Entweder wird mir der PHP Code angezeigt oder der Code klappt gar nicht. Ich habe beide Dateien in der htdocs Datei von Xampp gespeichert.

Könnte mir jemand helfen?

Ich benutze Xampp für die Datenbank und Atom fürs Programmieren.

Ich kann problemlos eine HTML Seite mittlerweile erstellen aber ich bekomme die Datenbank Abfrage seiten Benutzer nicht hin und das die Datenbank mir Datensätze anzeigt.

Ich danke.

...zur Frage

JavaScript Ajax?

Wo ist eigentlich der Sinn dabei wenn ich eine

index.html habe die so aussieht :

<!Doc...> <html><body>
<div>Startseite</div> 
<button>Click</button>
</body></html>

und eine kontakt.html die nur so aussieht :

<h1> Max Mustermann, Adresse,Telefonnummer usw </h1>

und beim klicken auf einen Button wird der Inhalt von der kontakt.html in meinen div von der Datei index.html "gerendert" mithilfe von AJAX

xhttp.open("GET", "kontakt.html", true);
xhttp.send();
zb (weiß ich grad nicht auswendig)....

sodass es am Ende so aussieht:

<div>

<h1> Max Mustermann, Adresse,Telefonnummer usw.</h1>

</div>

Wenn ich mir schon die Mühe mache eine kontakt.html zu erstellen, die mit daten zu befüllen dann könnte ich gleich document.querySelector benutzen und dann tauscht es halt den inhalt aus wenn ihr versteht was ich meine. Wär in 2 Sekunden gemacht und dann müsste ich nicht erst irgendeine Http anfrage machen.

In den meisten Tutorials auf Youtube wird halt leider sowas gelehrt und so kann man nicht verstehen was mir Ajax so richtig bringen soll.

Hat wer Sinnvolle Projekt Ideen die ich umsetzen könnte mit Ajax?

...zur Frage

Per Buttonklick Inhalt ändern HTML/JAVASCRIPT?

Will, dass man zwischen 2 Inhalten über ein Buttonklick wechseln kann und habe recherchiert und rausgefunden, dass es mit funktion() geht, aber wie kann ich komplette div containers umändern? Kann man dann im Header den ganzen Code reinschreiben, oder muss man das extern auf einer anderen Seite machen? Oder geht es auch anders?

...zur Frage

JavaScript in HTML - Ausgabe?

Hallo wie kann ich in einem Textfeld von HTML eine variable von JavaScript ausgeben?

Würde gerne mehrere Sachen zusammenrechnen und anschließend das Ergebnis auf der HTML Webseite ausgeben...

Wie ist das möglich?

Danke schon mal

...zur Frage

Link in Javascript einfügen?

Ich möchte gerne in einer if Verzweigung in Javascript einen Link einfügen, der zu einer neuen Html Seite linkt, weiß aber nicht genau, wie ich das machen soll, kann mir jemand helfen?

im Bild sieht man, wo der Code rein muss

...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

[jQuery AJAX] echo mit HTML Content von PHP Datei ausgeben?

Okay, die Frage ist evtl ein bisschen kompliziert. Deshalb beschreibe ich das anhand eines Beispiels. Zuerst meine Dateien:

PHP (submit.php)

<?php
 $mail = $_GET['mail']; if(filter_var($mail, FILTER_VALIDATE_EMAIL)) { echo "<div role=\"alert\">Ungültige E-Mail</div>"; } else { echo "<div role=\"alert\">Gültige E-Mail</div>"; }

?>

HTML (index.html)

<form id="myForm">
  <input type="email" name="mail" id="mail" placeholder="E-Mail Adresse"/>
  <input type="submit" name="check" id="check" value="Senden"/>
</form>
<script src="http://code.jquery.com/jquery-1.9.1.js"/> <script> $(function () { $('form').on('submit', function (e) { e.preventDefault(); $.ajax({ type: 'post', url: 'submit.php', data: $('form').serialize(),   success: function() {    //echo "Gültige E-Mail    } error: function() { //echo "Ungültige E-Mail" } }); }); }); </script>

Beschreibung:

Sobald das Formular abgesendet wurde, wird die E-Mail an die submit.php gesendet. In dieser wird überprüft, ob die E-Mail gültig ist und gibt dann das Ergebnis in Form von HTML-Code zurück.

Die Lösung mit alert will ich nicht. Es soll unterhalb der Form das Ergebnis stehen.

Wenn ich mit PHP

echo "<div role=\"alert\">Gültige E-Mail</div>";

ausgebe, dann steht das auch direkt in HTML dort (also nicht als PlainText).

Wie ist es also möglich, das Ergebnis der submit.php zu bekommen und in der index.html auszugeben?

Vielen Dank im Voraus!

...zur Frage

JavaScript AJAX sicher?

Hey Community, Habe momentan ein User Control Panel gemacht via PHP. Jetzt wollte ich mich ein bisschen weiterbilden und kam auf die Idee eine Single Page zu machen. Die Frage ist ob AJAX genauso (un)sicher ist wie PHP. Soweit ich das verstanden habe, via AJAX, gibt der User beim Formular ja loginname und pw an, dann übergebe ich die Daten an das JavaScript und er gibt dann via POST die Daten weiter an meine PHP Datei und via Echo kann ich auf das js antworten und dann entscheiden was damit gemacht wird.

Meine Frage: Wie sicher ist das? & kann der Nutzer das JavaScript einsehen, sowie den Quellcode?

...zur Frage

Javascript Ajax Php kein Wert?

Console:

HTML javascript Code ajax:

function send(text){
   console.log("Text kurz vor versenden:\n" +text);
//hier hat er noch einen wert
   $.ajax({
     method: "POST",
     url: "DataSender.php",
     data: { text: text}
   }).done(function( response ) {
       console.log(response);
     console.log("weiterleitung

Php Code Ajax Übertragung wo es nicht geht:

      $text = $_POST['text'];
      $sql = "INSERT INTO `Xss-Data` (`ID`,`DATA`, `created_at`) VALUES (null, '{$text}' , CURRENT_TIMESTAMP)";

      if (empty($text)) {
              //das ist empty!
              echo("Error:\nEs ist leer\nText wäre\n$text");
          } else

Sind die wichtigen Code snippets

Der String hat keinen Wert. Warum? Wie löst man das?

...zur Frage

json Daten in JavaScript auslesen und an html Elemente weiterleiten?

Hi,

mehr schlecht als recht arbeite ich mich gerade durch json und habe tatsächlich mittlerweile herausfunden, dass man zum Laden einer json-Datei ohne jQuery folgenden Ansatz zu brauchen scheint:

function loadJSON(callback) {var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'data.json', true); // Replace 'my_data' with the path to your file
xobj.onreadystatechange = function () {
      if (xobj.readyState == 4 && xobj.status == "200") {
        // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
        callback(xobj.responseText);
      }
};
xobj.send(null);  
}

Wie ich damit dann allerdings Objekte und values auslese und weiterleite, ist mir schleierhaft.

Hier ist erst einmal der json Code

{"employees":
    [
        {
            "firstName": "John", 
            "lastName": "Doe"
        },
        {
            "firstName":"Anna", 
            "lastName":"Smith"
        },
        {
            "firstName":"Peter", 
            "lastName":"Jones"
        }
    ]
}

Meine Idee war ja etwas wie document.getElementbyID oder halt byClassName, um den Content im DOM zu verteilen. Aber irgendwas scheint mir zu fehlen.

Pseudocode mäßig wäre halt sowas schön: getElementbyID('title').data(firstName[0]) Irgendwie so halt ...

Was ich bisher gefunden habe, waren nur Kurzeinleitungen, wie ich den Code in der Konsole ausspucke, js Arrays erstelle (warum auch immer die Leute das in einem json Tutorial als Lösung anbieten) oder html Elemente in JavaScript mit dem json Inhalt erstelle. Wie gesagt, würde ich jedoch gerne den json Inhalt an meine bereits existierenden html Elemente weitergeben.

ps. Wenn ihr dazu eine jade-Lösung habt, wäre das natürlich noch um so prickelnder.

...zur Frage

Wie kann ich ein Foto in einer CSS oben links in die Ecke machen?

Moin, ich möchte ein Bild in meiner CSS oben links in die Ecke machen, damit das auf jeder Seite so ist.

Der Code für meine HTML:

<!doctype html>
<html>
<head>
<title>Informatik</title>
<link href="Kurz.css" rel="stylesheet" type="text/css">
</head>
<body>
<footer></footer>
<script language="javascript" type="text/javascript" src="Footer.js"></script>
</body>
</html>

Der Code für CSS:

html {
  height: 100%;
}
body {
 background-image: url("Bilder/getraenkeguenther.jpg");
 background-repeat: no-repeat;
 background-position: left top;
 min-height: 100%;
 margin: auto;
 display: flex;
 flex-direction: column;
}
footer {
  margin-top: auto;
  height: 200px;
  text-align: center;
background-color: deepskyblue;
}

Der Code der JS:

var footer = `
<a>Impressum</a>
`;
document.getElementsByTagName("footer")[0].innerHTML = footer;

Das backgroundimage soll quasi als einzelnes Bild oben links in die Ecke

...zur Frage

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!!

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen