WN - jQuery load på flera element på en sida? (extremt krånglig fråga ;P)

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - jQuery load på flera element på en sida? (extremt krånglig fråga ;P) (https://www.wn.se/forum/showthread.php?t=1053649)

jQuery load på flera element på en sida? (extremt krånglig fråga ;P)

Tjenare!

Håller på och uppdaterar min hemsida lite, håller just nu på med bloggdelen och har lite problem.

Allt är uppbyggd på precis samma sätt som alla andra hemsidor typ, varje blogginlägg har denna strukturen:

HTML-kod:

<article class="post">



        <a class="title clicky" href="#" data-url="koenigsegg.php">Koenigsegg Agera R (2012)</a>

        

        <aside>

                <p class="the_comments">3</p>

                <p class="the_time">2 Mar, 2012, 17:39</p>

                <p class="the_category">Car, Koenigsegg</p>

                <p class="the_tags">Bil, Koenigsegg, Koenigsegg Agera R</p>

        </aside>

        

        <section class="minifies">

                <p>Ja, vad skall man säga? Fyfan vad jävla sjuk grym denna bilen...</p>

        </section>

        

        <div class="load expands"></div>



</article><!-- .post, END -->





















<article class="post">



        <a class="title" href="#" data-url="hamburger.php">Dubbeldijontacocheeseburgare</a>

        

        <aside>

                <p class="the_comments">3</p>

                <p class="the_time">6 Jan, 2012, 08:30</p>

                <p class="the_category">Dagens mat</p>

                <p class="the_tags">Dijon, Hamburgare, Pommes frites, Senap</p>

        </aside>





        <section class="minifies expands">

                <p>Japp, sjukt gött är det att göra egna hambrugare...</p>

        </section>

        

        <div class="load"></div>



</article><!-- .post, END -->

Länk till testsidan för jQuery load funktionen: http://dev.jespera.se/
Länk till det som är tänkt att laddas in till Koenigsegg inlägget: http://dev.jespera.se/koenigsegg.php
Länk till det som är tänkt att laddas in till Hamburgar inlägget: http://dev.jespera.se/hamburger.php

Iaf, istället för att ladda in en ny sida när man klickar på rubriken (eller en "featured image" som är jämte rubriken) så tänkte jag använda jQuerys .load funktion för att ladda in resten av inlägget. Det fungerar bra som det är nu men tyvärr fungerar bara översta inlägget just nu och om <div class="load"></div> ligger precis efter rubriken, nu är <aside> och <section> ivägen så inget laddas in i load med ovanstående struktur, har testat varenda traversing alternativ i jQuery men får inte till det ändå.

Laddade upp den relevanta koden till jsfiddle om någon har lust att pilla lite:
http://jsfiddle.net/XeTbR/4/

Problem med nuvarande koden
1) jQuery .load funktionen fungerar enbart om <div class="load"></div> ligger precis efter rubriken, ingen div får ligga emellan rubriken och load diven. Vore bra om det fungerade.

2) Lägger jag <div class="load"> under rubriken så fungerar det, men endast data-url från första blogginlägget laddas in oavsett vilket blogginlägg jag trycker på, jag vill ju att den data-url från den rubriken man trycker på laddas in i nästkommande <div class="load">, tex om jag trycker på rubriken för hamburgaren i rubriken ovan så laddas alltid koenigsegg.php in ändå in i Hamburgar blogginläggets <div class="load">

3) Efter att man klickat på en rubrik så laddas ju jQuerys .load funktion in, samtidigt får föregående <article> en till class som heter "expanded", detta gör att att flera element i <article> antingen tas bort (om den har en class om "minifies", eller läggs till, detta sköts via CSS). Problemet är att om man trycker på rubriken igen så skall blogginlägget återgå till sitt normala tillstånd, man kan kalla det "minimerat" (och det gör den som det är nu, om jag INTE använder jQuerys .load funktion, då tas ju "expanded" bort från föregående <article> och inlägget återgår till sitt normala tillstånd), problemet är ju dock att om man trycker på rubriken igen så görs ju ännu en till jQuery .load, detta är ju knappast önskvärt, jag vill inte ta bort det som laddats in med .load, ifall ifall man expanderar igen så slipper allt laddas om. MEN som det är nu, om jag klickar på rubriken som redan har gjort en .jQuery load så fungerar INTE denna jQuery raden " $(this).parent(".post").toggleClass("expanded");", det blir istället en infinity loop typ, den togglar classen jättesnabbt av/på/av/på/av/på osv istället för att bara ta bort classen "expanded" från föregående <article>

Japp det är dom problemen som är nu, har testat i flera dagar nu att lösa det själv men jag får inte till det riktigt. Förstår verkligen om detta är för stort problem för att någon skulle orka hjälpa mig med detta :P Men ja, jag vore sjukt extremt tacksam om någon hade lust att hjälpa mig lite med dessa problemen ;)

Läste inte hela inlägget jättenoga, men testa detta:

Kod:

$(document).ready(function(){

        $(".title, .featured_image").click(function () {

                var url = $(".clicky").data('url');

                $(".load", $(this).parent()).load(url);

        });

});





$("a.clicky").click(function(event) {

  event.preventDefault();

  $('<div/>')

        .append('default ' + event.type + ' prevented');

});

Det ska ladda in inlägget i alla fall :)

Anledningen till att det du skrev inte fungerade är för att .next() tittar bara på de element som ligger precis intill. I koden ovan går vi upp till parent-elementet och hittar sedan det .load-element som finns i denna.

EDIT:

Lösningen på ditt andra problem, att koenigsegg.php alltid laddas.

1. Lägg till .clicky classen även på rubriken i det andra inlägget. Det är ju det som används för att hämta urlen. Nu finns det bara på koenigsegg så det är ju inte så konstigt att den tar den urlen :)

2. Sen gäller det att plocka rätt URL (rätt .clicky. Vi har ju flera nu). Använd samma approach som ovan.

Kod:

$(document).ready(function(){

        $(".title, .featured_image").click(function () {

                var url = $(".clicky", $(this).parent()).data('url');

                $(".load", $(this).parent()).load(url);

        });

});





$("a.clicky").click(function(event) {

  event.preventDefault();

  $('<div/>')

        .append('default ' + event.type + ' prevented');

});

Antar även att du vill visa/dölja när du klickar på titeln. Lägg till dessa CSS-regler

Kod:

.post.expanded .load {

display: block;

}



.post .load {

display: none;

}

Sjukt smidig lösning ;) Verkar fungera precis som jag ville ;)

Klicka på rubriken så laddas resterande delar av inlägget in, klicka på rubriken igen så döljs det som precis laddades in. Jag tror jag integrerade min gamla kod med din nya på ett korrekt sätt iaf :P

http://dev.jespera.se

Tack så enormt mycket för hjälpen Linuus ;)

Yes, verkar fungera. Kul att kunna hjälpa till.

Japp det fungerar jättebra, dock dök det upp ett litet problem när jag lade till min gallerifunktion.

Kommer ha flera typer av blogginlägg, enskilda bilder, galleri inlägg som visar dom 7 senaste bilderna från det galleriet man precis uppdaterade, inlägg för enskilda bilder osv, ja ungefär som Facebooks system.

Nu när jag lade till ovanstånde .load funktion så strular det till sig lite med jQuery scriptet som sköter gallerifunktionen, jag har ju vanligtvis all JS i min footer men den tar ju bara hand om allt som laddas i samband med första sidladdningen, allt som laddas via jQuery .load vid ett senare tillfälle struntar ju den fullständigt i.

Därför var jag tvungen att lägga jQuery funktionen för galleriet i varenda galleri den hämtar via .load. Detta ser nu ut såhär:

HTML-kod:



<section>

        <p>Japp, sjukt gött är det att göra egna hambrugare, lite nötkött, lite dijonsenap och krydda, vilken krydda

        man själv vill ha går bra, men jag brukar köra på tacokrydda, alltså endel är nog skeptiska mot detta för

        hamburgare skall ju inte smaka tacos, right? Men nope, det smakar inte som tacos tacos, utan som kryddiga hamburgare, passar bra faktiskt..</p>



        <p>Har inte friterat på flera år nu men drog fram fritösen igår, blir riktigt gött hemma, blir inte så flötiga å fettiga som McDonalds strips.</p>

        

        

        <div class="item">

                <div class="gallery">

                        <div class="thumbnails">

                                <a href="http://www.jespera.se/media/pictures/2012/01/IMG_0651-880x660.jpg" data-large="http://www.jespera.se/media/pictures/2012/01/IMG_0651-880x660.jpg"></a>

                                <a href="http://dev.jespera.se/1.jpeg" data-large="http://dev.jespera.se/1.jpeg"></a>

                        </div>

                </div>

        </div>

        

        

        

        <script>

        

                (function(){

                        var items = $('.item');

                        var galleries = items.find('.gallery');

        

                        galleries.each(function(){

                                var gallery = $(this);

                                var thumbnails = gallery.find('.thumbnails');

                                var firstImg = thumbnails.find('a:first');

                                var currentImg = $('<div/>')

                                        .addClass('current')

                                        .html('<img src="'+firstImg.attr('href')+'" alt="'+firstImg.text()+'">')

                                        .prependTo(gallery);

                                thumbnails.find('a').each(function(){

                                        var thumbnail = $(this);

                                        thumbnail.html('<img src="'+thumbnail.attr('href')+'" alt="'+thumbnail.text()+'">');

                                        thumbnail.click(function(e){

                                                e.preventDefault();

                                                var this_thumb = $(this);

                                                this_thumb.parent().prev('.current').find('img').attr({

                                                        src : this_thumb.data('large'),

                                                        alt : this_thumb.find('img').attr('alt')

                                                });

                                        });

                                });

                        });

        

                                expand.click(function(e){

                                        e.preventDefault();

                                        $(this).parent().next('.gallery').slideToggle();

                                });

                // and so on    

        

                })();

        

                </script>

        

</section>

Ganska kladdig struktur men skit samma.

Ovanstående fungerar jättebra, om det antingen bara finns 1 galleri per sida, eller om det finns flera galleri per sida så fungerar det som tänkt om man klickar på en rubrik så bilderna laddas in, sen klickar på rubriken igen och sen klickar på nästa rubrik som innehåller ett galleri.

Problemet är om man redan har ett inlägg som har ett galleri, om man har öppnat en redan och sen öppnar en till utan att stänga första galleriet som man öppnade, ja då laddas det in ytterliggare en huvudbild i dom andra gallerierna man redan öppnat.

Testa gärna här: http://dev.jespera.se/

Klicka först på Koenigsegg rubriken, sen klicka på hamburgerubriken, då kommer första bilden i Koenigsegg inlägget att laddas in igen.

Jag tror att det har något med traversing att göra igen men ja, jag är så sjukt dålig på traversing så jag hittar inte riktigt vart jag skall ändra det i min gallerifunktion.

Någon vänlig skäl igen? :P Jag har försökt endel själv men blir lite svårare då http://api.jquery.com/category/traversing/ inte fungerar för mig just nu.

Edit

Ja alltså, mitt galleri script lägger till en div med classen "current" precis efter classen "gallery", det är alltså denna funktionen i scriptet:

HTML-kod:

var currentImg = $('<div/>')

                                        .addClass('current')

                                        .html('<img src="'+firstImg.attr('href')+'" alt="'+firstImg.text()+'">')

                                        .prependTo(gallery);

Så varje gång man klickar på ett blogginlägg som har ett galleri, så lägger den till ytterliggare en div med classen "current" även på dom blogginläggen som redan har en div med classen "current" under diven med "gallery" classen, så då kan det inlägget som redan är öppet få hur många divar som helst i princip.

Problemet är ju att du kör scriptet över alla gallerier, även de som redan ligger på sidan.

var galleries = items.find('.gallery');

Hämtar ju alla gallerier på sidan. Du får vara mer specifik så den endast körs på galleriet/gallerier som precis laddats in.

T.ex. kan du ju göra ditt script till en funktion som tar ett element som input. Sen letar den bara innanför detta element efter gallerier. Då kan du anropa den funktionen efter att du kört .load(url)...

Typ nåt liknande detta:

Kod:

$(".load", $(this).parent()).load(url, function(){

    gallery($(".load", $(this).parent()));

});

Tack för svaret än en gång ;)

jQuery är verkligen inte min starka sida så hänger inte helt med på hur man skall tillämpa det du föreslog ;)

Jag fixade det på ett annat sätt sålänge, min lösning är säkert en stor "no no" men huvudsaken är att det fungerar iaf :P

Lade till ett unikt class nr på item:

PHP-kod:


		
			
<div class="item <?php echo $post_query['post_id']; ?>">

Och samma sak i jQuery funktionen:

PHP-kod:


		
			
var items = $('.<?php echo $post_query['post_id']; ?>');

Vet inte riktigt vad folk har för åsikt att man blandar in php i javascript men jao, det fungerar ju så ;)

Vore skitbra om någon talade om för mig varför mitt sätt är så fel ;)
Förutom att det repeterar 10-15 rader javascript kod till varje inlägg.

(herregud vad många smileys jag gör)

Kod:

function gallery(elem){

  // Kör gallerikoden här och håll dig inom "elem". T.ex:

  var galleries = items.find('.gallery', elem);

  ...

  ...

}

Sen anropar du som jag skrev i förra inlägget :)