ugrás a tartalomhoz

Div-be töltés két select esetén

cserkesz1 · 2011. Már. 23. (Sze), 22.03
Sziasztok, egy másik topic alatt felvetettem ezt a kérdést, de nem tartozott oda, emiatt indítottam új témaként, ha nem baj.
Poetro küldött nekem egy jó kódot, amiben annyit szeretnék még változtatni, hogy több form select esetén is betöltse a tartalmat egy div-be.
Jelen állapotban csak az első form működik.

A kód, amibe bután belenyúltam, és szeretném működőképessé tenni a következő:
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4.   <meta charset="utf-8" />   
  5.   <title>Page Title</title>   
  6. </head>   
  7. <body bgcolor="000000">   
  8.   <form method="get" action="#">   
  9.     <select name="egyik" id="speedA" >   
  10.       <option value="első">első tartalom</option>   
  11.       <option value="második">második tartalom</option>   
  12.       <option value="harmadik">harmadik tartalom</option>   
  13.     </select>     
  14.   </form>   
  15.   
  16.   <form method="get" action="#">   
  17.     <select name="masik" id="speedA2" >   
  18.       <option value="negyedik">negyedik tartalom</option>   
  19.       <option value=ötödik">ötödik tartalom</option>   
  20.       <option value="hatodik">hatodik tartalom</option>   
  21.     </select>     
  22.   </form>  
  23.   <div id="idetoltibe"></div>   
  24.   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/  
  25. mootools-yui-compressed.js"></script>   
  26.   <script type="text/javascript">   
  27.     var target = $('idetoltibe');   
  28.         files = {   
  29.           'első' : 'tartalom.html',   
  30.           'második': 'tartalom2.html',   
  31.           'harmadik': 'tartalom3.html',   
  32.           'negyedik' : 'tartalom4.html',   
  33.           'ötödik': 'tartalom5.html',   
  34.           'hatodik': 'tartalom6.html',  
  35.         },   
  36.         select = $('speedA');   
  37.        select2 = $('speedA2');  
  38.   
  39.     function ahah(event) {   
  40.       event.preventDefault();   
  41.       target.set('text', 'Betöltés...');   
  42.       new Request.HTML({   
  43.         'update' : target,   
  44.         'evalScripts': false,   
  45.         'url': files[select.get('value')]   
  46.       }).get();   
  47.     }   
  48.    
  49.     select.addEvent('change', ahah);   
  50.   select2.addEvent('change', ahah);  
  51.   </script>   
  52. </body>   
  53. </html>  
‹ onclick hidden mező értékadás Görgetősáv, CSS, Drupal ›
 ■
1

Szerintem nem túl szerencsés

Hidvégi Gábor · 2011. Már. 23. (Sze), 22.30
Szerintem nem túl szerencsés ez az elképzelés.


    * a HTML 5 még nem szabvány, és sok böngésző nem támogatja, ezért elképzelhető, hogy az újonnan bevezetett elemeit - ha használsz ilyeneket - bizonyos látogatók nem látják vagy nem tudják használni (pl. audio, video elemek), ezért szerintem célszerűbb megmaradni még pár évig a 4-es változatnál
    * nem vagyok biztos benne, hogy a <meta charset>-et értelmezni fogják a régebbi böngészők
    * ha már javascript keretrendszert használsz, szerintem inkább töltsd le, mert ha valamilyen oknál fogva a látogatók számára elérhetetlen a külső szerver, akkor az oldalad használhatatlan lesz
    * nem tudom, hogy a keresők feldolgozzák-e a scripteket, de ha nem, akkor ez azt jelenti, hogy a különböző tartalom(1-6).html oldalaidat nem tudják beindexelni, így olyan, mintha nem is lennének fenn az interneten
    * szerintem tanuld meg előbb a HTML-t, aztán a javascriptet, és ha már mindent értesz, akkor csinálj ilyen oldalt, addig maradj meg a jó öreg linkelésnél, azzal okozol a legkevesebb fejfájást magadnak, és úgy érik el a legtöbben az oldaladat
2

HTML5

Poetro · 2011. Már. 23. (Sze), 22.42
A fenti HTML dokumentumot minden legfeljebb 10 éves böngésző tökéletesen kezeli. Amennyiben nem hiszed, olvass utána, miért pont így néz ki. Ajánlom figyelmedbe az HTML5 Doctor illetve a Dive into HTML5 oldalakat. A JavaScript kritikával egyetértek.
3

Persze, azzal tisztában

Hidvégi Gábor · 2011. Már. 23. (Sze), 23.03
Persze, azzal tisztában vagyok, hogy a fenti HTML-t megjelenítik, viszont én azt írtam, hogy ha olyat használ, ami új találmány, azzal gondok lehetnek (audio, video).
4

Helló, köszönöm a választ

cserkesz1 · 2011. Már. 23. (Sze), 23.33
Helló, köszönöm a választ.
javascript keretrendszert letöltöttem, ez csak ebben a példában szerepel, ahogyan a meta charset is.
javascript kapcsán a mootols-os oldalt átnéztem, az ottani példákat értem, magamtól egyet nem tudnék írni, de használni tudom nagyjából. Ezzel a két vagy több select-es dologgal nem nagyon találkoztam sehol, senki nem használja ilyen formában?
A 4-es pontban leírtakat nem igazán értem, ez a kód egy select esetén rendesen működik.
Tanulnom kell a témában sokat, alátámasztom, és próbálom is, de úgy érzem ezt a feladatot nem oldanám meg, és már nagyon lefárasztott ez a probléma, a google en keresgélek egyfolytában, legalább egy példát látnék rá, de sehol..
Lekötelezne ha valaki itt segítene ebben, hálás lennék.
5

Az ahah függvényben nézd meg

bb0072 · 2011. Már. 24. (Cs), 11.30
Az ahah függvényben nézd meg ezt a sort:

'url': files[select.get('value')]

A select itt neked mindig a $('speedA'), akkor is ha speedA2 változik. Ezért nem működik a második select
6

A következőképpen

bb0072 · 2011. Már. 24. (Cs), 11.41
A következőképpen javíthatod:
  1. 'url': files[$(this).get('value')]   
(Ezenkívül a 19. sorban szintaktikai hiba van. Lemaradt egy idézőjel.)
7

Nagyon szépen köszönöm!

cserkesz1 · 2011. Már. 24. (Cs), 11.49
Nagyon szépen köszönöm, így működik! Hálás vagyok nagyon, még egyszer köszönöm!!!!
Poetro nak is a kódot!