Wie wird folgende Funktion umgesetzt?

[Klaus]

Guten Abend,

ich habe eine Frage und zwar wie wird folgende Funktion umgesetzt:

https://gigly.de/konzerte/jazz-in-hamburg

hier mal bitte ganz nach unten scrollen. Unten steht "mehr laden" die Js Funktion habe ich schon gefunden:

  
function LoadMoreData()  
{  
    $(".show_more_listing a").hide();  
    $(".show_more_listing .loading").show();  
    moreConcerts();  
    $(".show_more_listing a").show();  
    $(".show_more_listing .loading").hide();  
    if(done_ajax || items_loaded<24)  
    {  
        $(".show_more_listing").hide();  
    }  

die Frage ist aber, wie wird dieses nun angewendet und wie lautet die CSS dazu? Wie ich das sehe, werden ALLE Einträge geladen und nur via JS und CSS versteckt.

Hoffentlich kann mir hier jemand helfen.

[entropie]

Guten Abend,

Namd.

ich habe eine Frage und zwar wie wird folgende Funktion umgesetzt:

https://gigly.de/konzerte/jazz-in-hamburg

hier mal bitte ganz nach unten scrollen. Unten steht "mehr laden" die Js Funktion habe ich schon gefunden:

function LoadMoreData()
{
...
    }

>   
> die Frage ist aber, wie wird dieses nun angewendet und wie lautet die CSS dazu? Wie ich das sehe, werden ALLE Einträge geladen und nur via JS und CSS versteckt.  
  
Das siehst du falsch. Die interessante funktion ist nämlich moreConcerts(), wo via ajax elemente nachgeladen werden.  
  
  
/entropie

-- 
Whenever people agree with me I always feel I must be wrong.  
  -- Oscar Wilde

[Klaus]

Vielen Dank für eure Antworten, hab mir die Funktion mal angesehen, diese sieht verdammt kompliziert aus. Wisst Ihr zufällig, ob das auch einfacher geht?

[entropie]

Vielen Dank für eure Antworten, hab mir die Funktion mal angesehen, diese sieht verdammt kompliziert aus. Wisst Ihr zufällig, ob das auch einfacher geht?

Eigentlich ist das nicht so kompliziert.

Stell dir eine normale pagination vor. Die seite wird aufgerufen, und es werden X beiträge geladen.

Wenn der button gedrückt wird, wird die seite (so vermute ich zumindest) nochmal geladen, allerdings per ajax und mit einem parameter der die seitennummer übergibt (du willst natürlich immer *neue* elemente nachladen, nicht welche die schon da sind.

Vielleicht hilft dir das:

  
  
var curpage=1; // die default seite  
var done_ajax=false;  
var items_loaded=0;  
  
  
function moreConcerts()  
{  
    if($('.concerts-list').is(":visible"))  
    {  
        $.ajax({  
            async: false, // das ist ziemlich dämlich, fürs gesamtkonzept, aber anyways...  
            type: 'GET',  // auch dämlich, es könnte passieren das suchmaschinen dem link folgen  
            url: '/feeds/concerts/genre/jazz/city/hamburg/page/'+(curpage+1), // hier wird die URL zum request angegeben  
                                                                              // curpage ist ausserhalb der funktion definiert, und fängt mit 1 an  
            success: function(data) {                                         // das ist die funktion die aufgerufen wird wenn der request fertig ist,  
                                                                              // data wird gefüllt mit der response des requests  
                if(isValidJSON(data) && data.length>0) {                      // ist die rückgabe valides json und enthält elemente?  
                    curpage++;                                                // die variable wird inkrementiert (so das der nächste aufruf der funktion, neue elemente liefert  
                    var inc=0;  
                    for(var i=0;i<data.length;i++) {                          // hier wird durch das json array iteriert, (denke: für jedes element tu DAS:)  
                        inc++;  
  
                        // folgend, wird für jedes element aus dem request html erzeugt. Das ist äusserst unschön umgesetzt.  
                        var content="";var item=data[i];var last = '';if((inc)%4 == 0){last = ' last';}content+='<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Event" class="concert-profile'+last+'"><a href="'+item['link']+'" rel="v:url"><img alt="'+item['imagealt']+'" src="'+item['image']+'" rel="v:photo"/><div class="concert-hover"></div><div class="concert-data"><div class="concert-text" property="v:location" content="'+item['location_name']+', '+item['city_name']+'"><p>'+item['location_name']+'<br/>'+item['city_name']+'<br/>'+item['price']+'</p></div></div><span class="concert-date"><span class="day">'+item['day']+'</span><span class="fullDate" property="v:startDate" content="'+item['rdftime']+'">'+item['fulldate']+'</span><span class="time">'+item['time']+'</span></span><div class="concert-title"><p property="v:summary">'+item['name']+'</p></div>';if(item['image_copyright'].length>0)content+='</a>'+item['image_copyright'];if(item['image_copyright'].length==0)content+='</a>';content+='</div>';                        var new_item=$(content).hide();  
  
  
                        $("#concerts_list").append(new_item);                 // hier wird das element, an den eigentlich block angehängt damit es ...  
                        new_item.delay(50*i).fadeIn('slow');                  // eingefadet werden kann (sichtbar gemacht)  
                    }  
                    items_loaded=inc;                                         // hier wird gespeichert wie viele elemente geladen worden  
                } else  
                    done_ajax=true;                                           // ich habe keine ahnung  
            }  
        });  
    }  
}  
  
  

Hier siehst du die , ein element habe ich dir mal "aufgeklappt".

/entropie

[entropie]

Ich würde sagen das ist kein lehrbuch beispiel. Einiges davon widerspricht der ajax theorie an sich, und die umsetzung ist... mässig. Ich würde den typen nicht einstellen, der das verzapft hat.

[T-Rex]

Moin Klaus,

mein Firebug sagt mir dass die inhalte nachgeladen werden. Es wird ein Ajax abgeschickt und die Daten werden nachgeladen. Das was du da hast ist lediglich zum sichtbar und unsichtbar machen des animierten Preloader-Icons (also das kleine Rad das dreht und symbolisiert dass sich etwas tut).
Die Inhalte werden wahrscheinlich in der Funktion moreConcerts(); nachgeladen.

Gruß
Der Typ ohne Konzerthalle (so wie Hamburg :D)
T-Rex