Avatar billede DeeDawg Nybegynder
04. november 2010 - 18:03 Der er 3 kommentarer og
1 løsning

jQuery: Indlæs nyt billede "on click" via AJAX.

Jeg har et problem som jeg har prøvet på at løse siden i går, men uden held.
For at sige det som det er så er jeg virkelig dårlig til JavaScript og har aldrig rigtig taget mig tid til at sætte mig ind i det - dumt, I know.

Nåh, men det jeg prøver på er at erstatte et billede med et andet, via AJAX, når man klikker på det. Som sagt, er dette ikke lykkedes mig endnu. Det PHP script som jeg gerne vil hente data fra, looper igennem en mappe og vælger et random billede derfra. Derefter udskriver det et nummer, imellem 1 og antallet af billeder, til skærmen.

Det virker også som det skal og jeg har tjekket at min AJAX-request henter den data som det skal. Så tydeligvis må problemet ligge i min JavaScript kode.

HTML:

<div id="img-container">
    <div id="img1-con"><img id="img1" style="float: left;" src="img/1.png" alt="" /></div>
</div>

JavaScript :

<script type="text/javascript">
    $(document).ready(function(){
        $("#img1").click(function(){
            $.post("system.php", function(data){
                $("#img1-con").html('<img id="img1" style="float: left;" src="img/' + data + '.png" alt="" />');
            });
        });
    });
</script>


Når man så klikker på billedet sker der bare intet. Der er helt sikkert en obvious fejl, men bær over med mig.

Tak på forhånd. :)
Avatar billede softspot Forsker
04. november 2010 - 18:35 #1
Hvis du bare laver et kald til system.php direkte i browseren og kigger i kilden, er det eneste der står så et tal (ikke noget andet)?
Avatar billede softspot Forsker
04. november 2010 - 18:41 #2
Bort set fra det er du nok nød til at ændre opsætningen af eventhandleren, da du udskrifter det indhold som clickeventet bindes til og dermed fjerner du (dog før efter første klik) eventhandleren. Du skal bruge live i stedet for click. Det ser således ud:

<script type="text/javascript">
    $(document).ready(function(){
        $("#img1").live('click',function(){
            $.post("system.php", function(data){
                $("#img1-con").html('<img id="img1" style="float: left;" src="img/' + data + '.png" alt="" />');
            });
        });
    });
</script>

Aternativt skal du blot nøjes med at udskifte selve src-atributtens værdi i stedet for at udskifte hele img-elementet:

<script type="text/javascript">
    $(document).ready(function(){
        $("#img1").click(function(){
            $.post("system.php", function(data){
                $("#img1").attr("src","img/" + data + ".png");
            });
        });
    });
</script>

Så kan du i princippet også afskaffe den inderste div (img1-con), med mindre du bruger den til andre formål... :-)
Avatar billede DeeDawg Nybegynder
04. november 2010 - 19:50 #3
NICE! Mange tusind tak for din hjælp, softspot.
Det var præcis hvad jeg ledte efter. :D

Btw, ville gerne give dig de 30 point, men det kan jeg ikke da du kun har skrevet en kommentar. Hvis du er interesserede i dem så skriv et svar. ;)
Avatar billede softspot Forsker
04. november 2010 - 20:12 #4
Jeg sender kun svar når jeg er sikker på at løsningen kunne bruges, alt andet virker lidt for proaktivt ;-)

Velbekomme :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester