✔ Dynamische Inhalte in einer Fancybox laden

B

brizzi

Erfahrenes Mitglied
Hallo,

Ich habe eine Seite erstellt auf der man Bilder von User bewerten kann. Diese werden aus der Datenbank in Miniatur angezeigt und auf der Seite aufgelistet. Wenn man nun auf eines der Bilder klickt öffnet sich eine art Fancybox. Darin sollte sich das Bild , mit jeweils einer Bewertung und Kommentaren befinden. Er zeigt mir zwar die fancybox an jedoch leider ohne die Inhalte aus der Datenbank.

Ich habe nun per Ajax versucht die inhalte dynamisch darein zu laden jedoch ohne Erfolg. Da die erfoderliche Variable immer mit undefinted übergeben wird.

Desweiteren habe ich auch die standart fancyboxen ausprobiert, nur hatte ich mit diesen das Problem, dass immer nur das aller erste Bild angezeigt wurde und meine javascript Bewertung keine funktion hatte.

Hoffe ihr könnt mir helfen.


Die momentane ajax funktion:
Javascript: 
function vorne(){
    $('.ab_v').fadeIn('200ms');
    $('#vorne_v').fadeIn('200ms');
};

function inhaltvorne(){
 
    headline=$('.avotebutton.votenina').val();
 
     $.ajax({
            type:"POST",
            url:"fancy_voting.php",
            data: "id="+ headline,
            success: function(data){
         
            $('.ab_v').html(data);
            vorne();
        },
    });
    return false;
};

function weg_click(){
    /*var $this= $(this),
    komm_nach_vorne =$this.find('button[id^=votana]');*/
    $('.ab_v').fadeOut('slow');
    $('#vorne_v').fadeOut('slow');
}

und nun das was es ausführen soll und wo es reingeladen wird:

PHP: 
        <button id="votebutton'.$y.'" type="button" class="votebutton" name="votebutton" onClick="inhaltvorne();"  style="width: 160px; height: 30px; margin-left: 35px;" value="'.$rowe['headline'].'">Voten</button>
             <a onClick="inhaltvorne();" class="avotebutton"> Voten <input type="hidden" class="votenina" value="'.$rowe['headline'].'"></a>
         </div>
         </div>
         <input type="hidden"  class="ranking" id="'.$rowe['noten'].'" value="'.$rowe['noten'].'">
         
           <div id="vorne_v"> </div>
           <div id="ab_v'.$y.'" class="ab_v" style="display:none;"> <div id="kreis_v">
<a id="weg" class="fancybox-close" onclick="weg_click();" style="height: 40px; width: 40px; background-size: 53px auto; left: -8px; margin-top: 12px;"></a>
</div>    
      
       </div>

die fancy_voting.php ist nicht das problem, deshalb stelle ich das Script dazu nicht auch zur verfügung. da es dort alles einwandfrei funktioniert.

mfg
brizzi
 
Zuletzt bearbeitet:
Kannst Du nicht mal die URL der Seite posten, damit man es sich im Zusammenhang ansehen kann?
Habe gerätselt, was die PHP-Variablen im HTML-Code zu bedeuten haben, bis ich darauf gekommen bin, dass es sich wahrscheinlich um den Inhalt eines echo im PHP-Code handelt.
Du erweiterst dort offenbar die IDs/Klassen mit einem Index
Code: 
id="votebutton'.$y.'"
, der aber im jQuery-Code nicht vorhanden ist. Ich würde diesen Index an die Funktionen übergeben
Code: 
onClick="inhaltvorne(' . $y . ');"
und im jQuery-Code an die IDs/Klassen anhängen.
 
Zuletzt bearbeitet:
So:
Code: 
function inhaltvorne(idx){
// ...
            $('.ab_v' + idx).html(data);
Code: 
function weg_click(idx){
    $('.ab_v' + idx).fadeOut('slow');
    $('#vorne_v').fadeOut('slow');
}
 
Zuletzt bearbeitet:
Nein, das ist PHP-Syntax.. So:
Code: 
function inhaltvorne(idx){
// ...
            $('.ab_v' + idx).html(data);
Mit PHP wird der Index beim Aufruf eingesetzt.
 
eine frage, weisst du wie ich in meiner Ajax Funktion diese zwei sachen gleichzeitig ausfrühren lasse?
Javascript: 
 $.ajax({
            type:"POST",
            url:"fancy_voting.php",
            data: "id="+ headline,
            success: function(data){
            vorne(idx);
            $('.ab_v'+idx).html(data);
           
        },

speziell geht es um die aktionen in der success funktion.

mfg
brizzi
 
Genau so, wie Du es geschrieben hast. Im Funktionsrumpf, zwischen den geschweiften Klammern kannst Du beliebig viele Javascript-Anweisungen notieren.
PS: Eins verstehe ich noch nicht bei deinem Ajax: Du hast doch mehrere Bilder, das schließe ich jedenfalls aus der Sache mit den Indizes. Bei deinem Ajax-Aufruf übergibst Du jedoch, wenn ich es richtig verstehe, keine ID für das Bild sondern nur die Stufe des Votings. Wie soll denn das funktionieren?
 
Zuletzt bearbeitet:
Bei dem Ajax übergebe ich nicht nur eine Stufe, sondern die Headline die genau sagt, welches bild ausgewählt wurde und somit alle dazu gehörige infos mir ausspuckt.

Nur eine sache bleibt mir immer noch offen.

Und zwar habe ich ja wie erwähnt, ein bewertungssystem mit in meiner Fancybox. Nun ja, leider zeigt er mir die Umfrage bzw, das bewertungssystem des ersten Bildes an obwohl ich das zweite offen habe. Hast du (habt Ihr) eventuell eine Idee wie ich das verhindern kann?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück