Avatar billede bing89 Nybegynder
08. oktober 2013 - 09:06 Der er 8 kommentarer og
1 løsning

Jquery / Javascript Blog via mysqli

Jeg har fået en opgave i skolen, hvor jeg skal lave en blog. Det i sig selv, er rimelig simpelt.

Nu vil jeg bare have at, når de trykker på 'rediger', så bliver det indlæg ændret fra f.eks. en div med tekst, til en form med inputfelter..

Hvordan kan det løses?

Selve indholdet bliver styret fra en database..
Avatar billede tobrukDk Novice
08. oktober 2013 - 09:12 #1
Har vi noget kode vi kan gå ud fra eller skal man selv lave noget?
Avatar billede bing89 Nybegynder
08. oktober 2013 - 09:16 #2
Jeg har egentlig ikke noget kode, udover mit kald fra databasen :)
Avatar billede tobrukDk Novice
08. oktober 2013 - 09:33 #3
Jeg synes du skal forklare lidt omkring opgaven
Avatar billede bing89 Nybegynder
08. oktober 2013 - 10:21 #4
Opgaven går ud på at lave en blog hvor folk kan skrive i, hvis de er logget ind. ( Kan jeg selv lave )

Dertil vil jeg udvide lidt med:

Mulighed for at slette opslag (kan jeg selv lave)..
Mulighed for at redigere i opslaget inden for 5 minutter..
Mulighed for kommentar til et indlæg.

Brugeren har mulighed for ved oprettelse af indlæg:
Skrive emne og kommentar.

Ved kommentar:
Skrive kommentar
Avatar billede bing89 Nybegynder
08. oktober 2013 - 10:28 #5
Jeg kan faktisk lave det hele selv..

Mit eneste problem er at jeg vil have den smider en form ud, i stedet for selve kommentaren, hvor der bliver trykket 'rediger'..
Avatar billede herlevsen123 Nybegynder
20. oktober 2013 - 20:34 #6
Hvis du bruger en javascript library som jQuery kan det gøres meget nemt.

I sin simpleste form, kunne det se sådan her ud:

<div class="blogPost">
  <div class="tools">
    <a href="#" id="editLink">Rediger</a> -
    <a href="#" id="cancelLink">Annuler</a>
  </div>
  <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nisi dolor, malesuada id sollicitudin at, posuere vel nibh. Duis non ultrices lectus. Sed ornare dolor vel ligula mattis molestie nec nec lorem. Donec rhoncus velit eget tincidunt ultrices. Fusce posuere vulputate tortor quis varius. Phasellus aliquet massa augue, egestas congue dui consequat sed. Aenean sodales, arcu vitae lacinia adipiscing, nulla nunc consequat purus, faucibus laoreet dolor elit pretium mauris. Sed a tortor ornare lacus vulputate rutrum. Donec et dapibus justo, eu tempor leo. Aenean sed feugiat arcu, non tincidunt augue. Mauris scelerisque velit ac lorem tincidunt porta. Pellentesque odio sem, aliquam sit amet pharetra et, ullamcorper ut neque.</p>
  </div>
  <div class="edit">
    <form>
      <textarea name="text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nisi dolor, malesuada id sollicitudin at, posuere vel nibh. Duis non ultrices lectus. Sed ornare dolor vel ligula mattis molestie nec nec lorem. Donec rhoncus velit eget tincidunt ultrices. Fusce posuere vulputate tortor quis varius. Phasellus aliquet massa augue, egestas congue dui consequat sed. Aenean sodales, arcu vitae lacinia adipiscing, nulla nunc consequat purus, faucibus laoreet dolor elit pretium mauris. Sed a tortor ornare lacus vulputate rutrum. Donec et dapibus justo, eu tempor leo. Aenean sed feugiat arcu, non tincidunt augue. Mauris scelerisque velit ac lorem tincidunt porta. Pellentesque odio sem, aliquam sit amet pharetra et, ullamcorper ut neque.     
      </textarea><br>
      <input type="submit" value="Gem">
    </form>
  </div>
</div>

<script type="text/javascript">

$(".blogPost #editLink").on("click", function() {
  $(".blogPost .content").hide();
  $(".blogPost .edit").show();
})

$(".blogPost #cancelLink").on("click", function() {
  $(".blogPost .edit").hide();
  $(".blogPost .content").show();
})

</script>

Se eksempel her:
http://jsfiddle.net/9QNNu/
Avatar billede bing89 Nybegynder
21. oktober 2013 - 21:12 #7
Det var lige præcis det jeg kiggede efter.. Mit eneste problem er, hvordan jeg får den til kun at ændre lige præcis den ene, hvis der nu er flere opslag.. :)
Avatar billede herlevsen123 Nybegynder
21. oktober 2013 - 21:27 #8
Der kunne du feks. gøre sådan her:
http://jsfiddle.net/ws7QE/
Avatar billede bing89 Nybegynder
21. oktober 2013 - 22:50 #9
Lige præcis.. Mange tak for hjælpen :)
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
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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