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

Beitragsersteller

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

MoinMoin2014

Beitragsersteller

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

Ähnliche Beiträge

JavaScript: Ajax: Weiterleitung bei success?

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

...zum Beitrag

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?

...zum Beitrag

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

...zum Beitrag

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.

...zum Beitrag

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?

...zum Beitrag

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

...zum Beitrag

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

...zum Beitrag

Warum ist $_POST hier leer?

Hi, arbeite gerade an nem Kontaktformular, welches mit JQuery und Ajax gesendet werden soll. Hier der Code:

let form = $(this);
let actionUrl = "assets/php/contact.php";

$.ajax({
    type: "POST",
    url: actionUrl,
    contentType: "application/json",
    data: form.serialize(),
    success: function (backendError) {
        console.log(backendError);
        errorHandler(backendError);
    },
    error: function () {
        console.log("failure");
        alert("Internal Error occured. Please try again later");
    }
});

hier der PHP Code zum senden:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    try {
        $errors = array();
        $name = "";
        $email = "";
        $human = "";
        $message = "";

        if (empty($_POST["name"])) {
            $errors[] = "name";
        } else {
            $name = $_POST["name"];
        }

        if (empty($_POST["email"])) {
            $errors[] = "email";
        } else {
            $email = $_POST["email"];
        }

        if (empty($_POST["human"])) {
            $errors[] = "human";
        }

        if (empty($_POST["message"])) {
            $errors[] = "message";
        } else {
            $message = $_POST["message"];
        }

        if (count($errors) === 0) {
            $to = "my@email.de";
            $subject = "Kontaktformular - " . $name;
            $message = "";
            $additional_headers = array(
                "From" => $email,
                "Reply-To" => $email,
                "X-Mailer" => phpversion()
            );

            mail($to, $subject, $message, $additional_headers);
            $response["error"] = false;
            echo json_encode($response);
            exit;
        } else {
            $response["error"] = $errors;
            echo json_encode($response);
            exit;
        }
    } catch (Exception $exception) {
        // in Log File Time + Error + IP
        exit;
    }
}

mein Problem: das POST Array is leer. Habs mir mal ganz oben ausgeben lassen, und stand nix drin, obwohl jquery die inputfelder per POST an das PHP File sendet. Ich denke, dass ich irgendwas bei der $ajax methode falsch gemacht habe, und es deshalb net funktioniert. bin am verzweifeln :) danke für jede Hilfe!

...zum Beitrag

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.

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

Wie kann man bei Javascript ein Bild einfügen?

...zum Beitrag

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?

...zum Beitrag

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?

...zum Beitrag

Strato, Javascript, Trustami?

Guten Abend

Wollte einen Siegel von Trustami in meiner Website einbinden. Muss dafür einen Javascript Code auf meiner Website einfügen, nur ist da nur eine Tabelle wo mann HTML einfügen kann. Und immer wenn ich den Siegel einfüge verschwindet der Siegel nach dem ich die Seite neulade.

Ich hoffe jemand kann mir Helfen den ich habe echt kein Plan davon.

MfG

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen