Antworten auf deine Fragen:
Neues Thema erstellen

Ajax Content wird zur falschen Zeit aufgerufen

Coulyo

Director

Hi, ich habe ein recht merkwürdiges Problem mit Ajax. Ich beschäftige mich das erste Mal damit, also vielleicht übersehe ich das Offensichtliche. :confused:

Was ich machen möchte:
Wenn meine Seite geladen wird, frage ich mit Modernizr ab, ob ein Touchgerät verwendet wird. Wenn nicht, lade ich ein Video in den Container mit der id "header-video". Erst wenn man dann auf einen Button klickt (.view-video), soll ein zweites Video in einem Overlay (#video-fullscreen) geladen werden.

Das Problem:
Wie man am Code sehen kann, befinden sich sowohl #video1, als auch #video2 in der gleichen Datei (videos.html). Sie enthält nur den Code für die Videos:
HTML:
<video id="video1" class="video-teaser vjs-video video-js vjs-default-skin" autoplay loop muted>
    <source src="videos/pageTestTeaser.mp4" type="video/mp4" />
</video>

<video id="video2" class="video-teaser vjs-video video-js vjs-default-skin" controls autoplay>
    <source src="videos/pageTestFull.mp4" type="video/mp4" />
</video>

#video1 wird wie gewollt geladen, das Dumme ist nur, das #video2 gleich mit geladen wird, ohne dass der Button geklickt wurde. Ich höre dann den Ton des zweiten Videos im Hintergrund, es ist aber nicht sichtbar. Auch wenn ich #video2 in eine andere Datei auslagere, die nur den Code für das Video enthält, wird das Video weiterhin gleichzeitig mit #video1 aus der videos.html geladen.
Erst wenn ich #video2 in eine andere Datei packe und aus der videos.html entferne, kann ich beide Video unabhängig voneinander laden.

Mein Frage: Ist das das normale Verhalten von Ajax? Oder liegt es an der .load() Methode? Oder stimmt einfach irgendwas mit meinem Code nicht? :(


Der relevante Code:
Javascript:
function loadHeaderVid(){
    var windowHeight = $(window).height();
   
    if(!Modernizr.touch){
        if(!(document.getElementById('video1'))){
            $('#header-video').load('videos.html #video1', function(){
                //hier steht noch einiges Zeug für die Initialisierung von video.js
            });
        }
    }
}

function loadFullscreenVid(){
    var windowHeight = $(window).height();
   
    $('.view-video').click(function(){
        //testen, ob video-Element exisiert
        if(!(document.getElementById('video2'))){
            $('#video-fullscreen').load('videos.html #video2', function(){
                //hier steht noch einiges Zeug für die Initialisierung von video.js
                $('#video-fullscreen').fadeIn(1000);
            });
        }
        else{
            $('#video-fullscreen').fadeIn(1000);
        }
    });
}
 

FlashZange

Nicht mehr ganz neu hier

Es liegt an der .load() Methode meines Wissens. Die lädt erst mal die ganze HTML Seite und gibt dann nur das aus, wonach gefragt wurde.
Um tatsächlich nur einen Teil zu laden, brauchst du was Serverseitiges.
 

cebito

undefined

Du lädst eine .html, mach eine .php draus und integriere dort die entsprechende Funktion, die dir laut Anfrage das richtige Video zurückgibt...
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben