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ő:

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8" /> 
  <title>Page Title</title> 
</head> 
<body bgcolor="000000"> 
  <form method="get" action="#"> 
    <select name="egyik" id="speedA" > 
      <option value="első">első tartalom</option> 
      <option value="második">második tartalom</option> 
      <option value="harmadik">harmadik tartalom</option> 
    </select>   
  </form> 

  <form method="get" action="#"> 
    <select name="masik" id="speedA2" > 
      <option value="negyedik">negyedik tartalom</option> 
      <option value=ötödik">ötödik tartalom</option> 
      <option value="hatodik">hatodik tartalom</option> 
    </select>   
  </form>
  <div id="idetoltibe"></div> 
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/
mootools-yui-compressed.js"></script> 
  <script type="text/javascript"> 
    var target = $('idetoltibe'); 
        files = { 
          'első' : 'tartalom.html', 
          'második': 'tartalom2.html', 
          'harmadik': 'tartalom3.html', 
          'negyedik' : 'tartalom4.html', 
          'ötödik': 'tartalom5.html', 
          'hatodik': 'tartalom6.html',
        }, 
        select = $('speedA'); 
       select2 = $('speedA2');

    function ahah(event) { 
      event.preventDefault(); 
      target.set('text', 'Betöltés...'); 
      new Request.HTML({ 
        'update' : target, 
        'evalScripts': false, 
        'url': files[select.get('value')] 
      }).get(); 
    } 
 
    select.addEvent('change', ahah); 
  select2.addEvent('change', ahah);
  </script> 
</body> 
</html>
 
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:
'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!