Vinnaren i pepparkakshustävlingen!
  1. Dator och IT
  2. Systemutveckling
  3. Webbutveckling och javascript

Uppdatering i realtid

Svara
2017-05-25, 14:56
  #1
Reka
Medlem
Rekas avatar
Jag är ute efter en funktion som uppdaterar sidan i realtid (krass förklaring).
Tänk 3 checkboxar med namnen Bmw, Audi, samt Volvo.

Klickar man i Volvo syns bara Volvobilar. Kompletterar man med Bmw blir även Bmwbilar synliga.

Detta utan att man behöver klicka på en Submit-knapp.
Bör väl vara Javascript som kan ordna detta, men det är inte mitt 'modersmål' direkt.
Citera
2017-05-25, 15:20
  #2
notlegendary
Medlem
Citat:
Ursprungligen postat av Reka
Jag är ute efter en funktion som uppdaterar sidan i realtid (krass förklaring).
Tänk 3 checkboxar med namnen Bmw, Audi, samt Volvo.

Klickar man i Volvo syns bara Volvobilar. Kompletterar man med Bmw blir även Bmwbilar synliga.

Detta utan att man behöver klicka på en Submit-knapp.
Bör väl vara Javascript som kan ordna detta, men det är inte mitt 'modersmål' direkt.
Ajax?
Citera
2017-05-25, 15:42
  #3
studioxswe
Medlem
studioxswes avatar
När du säger uppdaterar antar jag att det är en "sökning"? eller är det ett filter?

Är det en sökning behöver du lära dig ajax och skriva om en massa kod på din server.
Är det ett filter kan du nog lösa det lätt med jquery.
Citera
2017-05-25, 20:44
  #4
Povel
Medlem
Povels avatar
Om det är så att du bara vill visa/dölja vissa element beroende på om checkboxar är aktiverade så kan du göra det med endast CSS, om du strukturerar markupen med tanke på det.

Ex:

Kod:
<style>
.simple div { display: none; }
.simple [type=checkbox][value="1"]:checked ~ .one,
.simple [type=checkbox][value="2"]:checked ~ .two {
  display: block;
}
</style>
<div class="simple">
  <input type="checkbox" value="1">
  <input type="checkbox" value="2">
  <div class="one">one</div>
  <div class="two">two</div>
</div> 

1: Alla element dolda
2: Selektorer som avser syskon till checkboxarna, och som visar syskonen om checkboxarna är kryssade

Här är ett exempel med dina bilar: https://codepen.io/anon/pen/ybwwpR

/p
Citera
2017-05-26, 10:19
  #5
Reka
Medlem
Rekas avatar
Citat:
Ursprungligen postat av studioxswe
När du säger uppdaterar antar jag att det är en "sökning"? eller är det ett filter?

Är det en sökning behöver du lära dig ajax och skriva om en massa kod på din server.
Är det ett filter kan du nog lösa det lätt med jquery.


Hm, ja, hur ska jag göra. Det kanske blir enklare med sökning ändå.
Varje gång en checkbox klickas så utförs databasanropet m.h.a. auto submit och ny sökning sker.

Men kollar det där med Jquery, tack för input.
Citera
2017-05-26, 10:22
  #6
Reka
Medlem
Rekas avatar
Citat:
Ursprungligen postat av Povel
Om det är så att du bara vill visa/dölja vissa element beroende på om checkboxar är aktiverade så kan du göra det med endast CSS, om du strukturerar markupen med tanke på det.

Ex:

Kod:
<style>
.simple div { display: none; }
.simple [type=checkbox][value="1"]:checked ~ .one,
.simple [type=checkbox][value="2"]:checked ~ .two {
  display: block;
}
</style>
<div class="simple">
  <input type="checkbox" value="1">
  <input type="checkbox" value="2">
  <div class="one">one</div>
  <div class="two">two</div>
</div> 

1: Alla element dolda
2: Selektorer som avser syskon till checkboxarna, och som visar syskonen om checkboxarna är kryssade

Här är ett exempel med dina bilar: https://codepen.io/anon/pen/ybwwpR

/p

Det där var inte dumt alls! Det där använder jag.
Tack så mycket!
Citera
Svara

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback