Onclick IE hiba

cserkesz1 · 2011. Már. 21. (H), 02.44

Sziasztok!

A következő divbe töltő kód működik firefox, opera, chrome alatt, de IE alatt nem történik semmi:(
Tud valaki segíteni nekem?

Kód:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="mootools.svn.js"></script>
		
<script type="text/javascript">
	function ahah(url, target) {
  document.getElementById(target).innerHTML = ' Betöltés...';
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (req != undefined) {
    req.onreadystatechange = function() {ahahDone(url, target);};
    req.open("GET", url, true);
    req.send("");
  }
}  
</script>
</head>

<select name="id" id="speedA" style="width:200px" onchange="this.form.submit();"  >
<option  value="">első</option>
<option  onclick="load('tartalom.html','idetoltibe'); return false;">második </option>
</select>

<div id="idetoltibe">
</div>

■

HTML, CSS, JavaScript, Ajax

csirip

onclick

Poetro · 2011. Már. 21. (H), 03.26

Az Internet Explorer 8 és régebbi változatai nem támogatja az click eseményt az option elemen. Ezt elkerülheted azzal, hogy például használod a select elemed change eseményét, és ott ellenőrzöd, melyik is lett kiválasztva. Egyébként, ha már betöltötted a MooTools keretrendszert, akkor miért nem használod?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
</head>
<body>
  <form method="get" action="#">
    <select name="id" id="speedA" style="width:200px">
      <option value="első">első</option>
      <option value="második" id="masodik">második </option>
    </select>
    <input type="submit" />
  </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');
    
    function ahah(event) {
      event.preventDefault();
      target.set('text', 'Betöltés...');
      new Request.HTML({
        'update' : target,
        'evalScripts': false,
        'url': 'tartalom.html'
      }).get();
    }
    
    $('speedA').addEvent('change', ahah);
    $('masodik').addEvent('click', ahah);
    $$('form').addEvent('submit', ahah);
  </script>
</body>
</html>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

select.onclick

vbence · 2011. Már. 21. (H), 10.50

Amennyire tudom a select elem onchange eseménye (egyes böngészőkön?) csak akkor fut le, ha a control elveszíti a fókuszt. A select elem onclick és onkeypress eseményével viszont figyelhető a változás.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

billentyűzet

Poetro · 2011. Már. 21. (H), 11.35

Az keypress eseménnyel az a probléma, hogyha billentyűzettel akarod megváltoztatni a select értékét, akkor minden egyes billentyűleütés monitorozva lesz, ami szerintem nem a kívánt működés. Azaz minden esetben, amikor például a billentyűzet fel / le gombjait nyomogatod a select elemen, hogy új értéket válassz ki, mindannyiszor kiváltódik a keypress, pedig igazából még nem is választottál, csak például lenyitottad a választási lehetőségeket, illetve végigmész azokon, hogy elérd a neked tetszőt.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Ez így van

vbence · 2011. Már. 21. (H), 11.41

... ezt tapasztalva beiktatsz egy setTimeoutot, de a usernek joggal nem egyértelmű, hogy a változtatása akkor kezelődik le, ha leveszi a fókuszt a kontrolról. - Vagyis az onchange usability szempontjából mindenképpen egy horror. Ami marad az a klikk és keypress. Egy kis töltési animációval jelezheted már az első keypresskor hogy itt dinamikus válasz lesz, de a valódi requestet csak a nyugalmi állapot elérésekor küldöd el.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Lehetne még egy kérésem?

cserkesz1 · 2011. Már. 21. (H), 10.57

Köszönöm a segítséget Poetro.
Lehetne még egy kérésem?
Szeretnék több tartalom betöltő opciót.

Ezzel probálkoztam:


<!DOCTYPE html>  
<html>  
<head>  
  <meta charset="utf-8" />  
  <title>Page Title</title>  
</head>  
<body bgcolor="000000">  
  <form method="get" action="#">  
    <select name="id" id="speedA" style="width:200px">  
      <option value="első">első</option>  
      <option value="második" id="masodik">második </option>  
      <option value="harmadik" id="harmadik">harmadik </option>  	  
    </select>  
    <input type="submit" />  
  </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');  
      
    function ahah(event) {  
      event.preventDefault();  
      target.set('text', 'Betöltés...');  
      new Request.HTML({  
        'update' : target,  
        'evalScripts': false,  
        'url': 'tartalom.html'  
      }).get();  
    }  
    function ahah2(event) {  
      event.preventDefault();  
      target.set('text', 'Betöltés...');  
      new Request.HTML({  
        'update' : target,  
        'evalScripts': false,  
        'url': 'tartalom2.html'  
      }).get();  
    } 	
      
    $('speedA').addEvent('change', ahah);  
    $('masodik').addEvent('click', ahah);  
    $('harmadik').addEvent('click', ahah2);	
    $$('form').addEvent('submit', ahah);  
  </script>  
</body>  
</html>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Példa

Poetro · 2011. Már. 21. (H), 11.30

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
</head>
<body bgcolor="000000">
  <form method="get" action="#">
    <select name="id" id="speedA" style="width:200px">
      <option value="első">első</option>
      <option value="második">második</option>
      <option value="harmadik">harmadik</option>
    </select>
    <input type="submit" />
  </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',
        },
        select = $('speedA');

    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);
    $$('#speedA option').addEvent('click', ahah);
    $$('form').addEvent('submit', ahah);
  </script>
</body>
</html>

Megjegyzés: most először használtam MooTools-t nem tudok, ez-e az optimális megközelítése a problémának.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Két select egy oldalon

cserkesz1 · 2011. Már. 22. (K), 01.05

Köszönöm, így már rendesen működik.
Két selectet szeretnék egy oldalon, a következőkkel probálkoztam, de nem működik:



<!DOCTYPE html>  
<html>  
<head>  
  <meta charset="utf-8" />  
  <title>Oldal cím</title>  
</head>  
<body bgcolor="000000">  
  <form method="get" action="#">  
    <select name="id" id="speedA" style="width:200px">  
      <option value="első">első</option>  
      <option value="második">második</option>  
      <option value="harmadik">harmadik</option>  
    </select>  
    <input type="submit" />  
  </form>  
  
   <form method="get" action="#">  
    <select name="id2" id="speedA" style="width:200px">  
      <option value="első_2">első_2</option>  
      <option value="második_2">második_2</option>  
      <option value="harmadik_2">harmadik_2</option>  
    </select>  
    <input type="submit" />  
  </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',  
          'első_2' : 'tartalom4.html',  
          'második_2': 'tartalom5.html',  
          'harmadik_2': 'tartalom6.html',  		  
        },  
        select = $('speedA');  
  
    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);  
    $$('#speedA option').addEvent('click', ahah);  
    $$('form').addEvent('submit', ahah);  
  </script>  
</body>  
</html>

és



<!DOCTYPE html>  
<html>  
<head>  
  <meta charset="utf-8" />  
  <title>Oldal cím</title>  
</head>  
<body bgcolor="000000">  
  <form method="get" action="#">  
    <select name="id" id="speedA" style="width:200px">  
      <option value="első">első</option>  
      <option value="második">második</option>  
      <option value="harmadik">harmadik</option>  
    </select>  
    <input type="submit" />  
  </form>  
  
   <form method="get" action="#">  
    <select name="id2" id="speedA2" style="width:200px">  
      <option value="első_2">első_2</option>  
      <option value="második_2">második_2</option>  
      <option value="harmadik_2">harmadik_2</option>  
    </select>  
    <input type="submit" />  
  </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',  
  		  
        },  
        select = $('speedA');  
  
    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);  
    $$('#speedA option').addEvent('click', ahah);  
    $$('form').addEvent('submit', ahah);  
  </script>  
  
    <script type="text/javascript">  
    var target = $('idetoltibe');  
        files = {  
           'első_2' : 'tartalom4.html',  
          'második_2': 'tartalom5.html',  
          'harmadik_2': 'tartalom6.html',  
        },  
        select = $('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', ahah2);  
    $$('#speedA2 option').addEvent('click', ahah2);  
    $$('form').addEvent('submit', ahah2);  
  </script> 
 
  
</body>  
</html>

Tudsz segíteni még ebben? Remélem nem lesz több problémám ezek után.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

H	K	Sze	Cs	P	Szo	V
25	26	27	28	29	30	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31	1	2	3	4	5

Weblabor

Keresés

Onclick IE hiba

onclick

select.onclick

billentyűzet

Ez így van

Lehetne még egy kérésem?

Példa

Két select egy oldalon

Friss blogmarkok

Könyvajánló

Cikkajánló

Friss csiripek

Aktív fórum témák

Új fórum témák

Archívum

Címkék