Форум АНТИЧАТ

Форум АНТИЧАТ (https://forum.antichat.xyz/index.php)
-   PHP, PERL, MySQL, JavaScript (https://forum.antichat.xyz/forumdisplay.php?f=37)
-   -   Опера коряво обновляет элементы списка (https://forum.antichat.xyz/showthread.php?t=63071)

Дикс 29.02.2008 14:06
Опера коряво обновляет элементы списка
 
есть вот такой скрипт.

последовательность действий, чтобы понять в чём мой вопрос:

1. открываем страницу в ИЕ6
2. щёлкаем по February
3. первый алерт - сколько дней нужно сделать во втором выпадающем списке.
второй алерт - сколько сейчас элементов во втором выпадающем списке.
третий алерт - сколько стало элементов после работы js-функции.
4. щёлкаем по "length" - видим сколько сейчас элементов во втором списке.

Получили что хотели - второй список изменился с 31 элемента на 28.

То же самое делаем в ФФ.
Всё работает без проблем.

А теперь в Опере (у меня Version 9.25 Build 8827)
Второй список приобретает множество пустых элементов!

Как это пофиксить?


Код:

 <script type="text/javascript">

function createDate(days, slot){

var day_num = 31;
if(days == 1 || days == 3 || days == 5 || days == 7 || days == 8 || days == 10 || days == 12) day_num = 31;
if(days == 4 || days == 6 || days == 9 || days == 11) day_num = 30;
if(days == 2) day_num = 28;
alert(day_num)
alert(document.getElementById(slot).options.length)
document.getElementById(slot).options.length = day_num;
alert(document.getElementById(slot).options.length)
for(i=0; i<32; i++)
if(i < day_num){
    document.getElementById(slot).options[i] = new Option(i+1,i+1);
}
else{
    document.getElementById(slot).options[i] = null;
}
}

 </script>



<select id="date_month" name="date_month" onchange="createDate(this.options[this.selectedIndex].value, 'date_day');" >
<option value='1'>January</option>
<option value='2'>February</option>
<option value='3'>March</option>
<option value='4'>April</option>
<option value='5'>May</option>
<option value='6'>Juny</option>
<option value='7'>July</option>
<option value='8'>August</option>
<option value='9'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
</select>


<select id="date_day" name="date_day">
<script language="javascript">
for(i=0; i<31; i++)
document.getElementById('date_day').options[i] = new Option(i+1,i+1);
</script>
</select></p>



<span onclick="alert(document.getElementById('date_day').options.length)">lenght</span>

Conquerstador 29.02.2008 14:50
на maxthone так же???

Сорри за оффтоп!

astrologer 29.02.2008 18:10
Код:
document.getElementById(slot).options.length = day_num;
=)))
---------------------------------------
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">

function get_selected(id)
{
  var node = document.getElementById(id);
  return node.options[node.selectedIndex].value;
}

function createDate(year, month, slot_id)
{
  var date = new Date();
  date.setMonth(month);
  date.setFullYear(year || date.getFullYear());
  date.setDate(32);

  var days = 32 - date.getDate(),
      slot = document.getElementById(slot_id),
      list = document.createElement('select'), o, t, i;

  for(i = 1;i<=days;i++)
  {
    o = document.createElement('option');
    t = document.createTextNode(i);


    list.appendChild(o);
    o.appendChild(t);
  }

  slot.parentNode.replaceChild(list, slot);
  list.id = slot_id;
}

window.onload = function()
{
  createDate(get_selected('date_year'), get_selected('date_month'), 'date_day');
}

</script>

</head>
<body>

<select id="date_year" name="date_year" onchange="createDate(this.options[this.selectedIndex].value, get_selected('date_month'), 'date_day');" >
  <option value='2000'>2000</option>
  <option value='2001'>2001</option>
  <option value='2002'>2002</option>
  <option value='2003'>2003</option>
  <option value='2004'>2004</option>
  <option value='2005'>2005</option>
  <option value='2006'>2006</option>
  <option value='2007'>2007</option>
  <option value='2008'>2008</option>
  <option value='2009'>2009</option>
  <option value='2010'>2010</option>
</select>

<select id="date_month" name="date_month" onchange="createDate(get_selected('date_year'), this.options[ this.selectedIndex ].value, 'date_day');" >
  <option value='0'>January</option>
  <option value='1'>February</option>
  <option value='2'>March</option>
  <option value='3'>April</option>
  <option value='4'>May</option>
  <option value='5'>Juny</option>
  <option value='6'>July</option>
  <option value='7'>August</option>
  <option value='8'>September</option>
  <option value='9'>October</option>
  <option value='10'>November</option>
  <option value='11'>December</option>
</select>

<select id="date_day" name="date_day"></select>

</body>
</html>

Дикс 02.03.2008 09:28
Благодарю :)

Я вот его переписал с нуля под себя, посмотрите, кому не лень, на наличие ошибок.
Так вроде всё работает, но может я что-то упустил или сделал коряво.

Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title>test</title>

<script type="text/javascript">

function getValue(id){
    var node = document.getElementById(id);
    return node.options[node.selectedIndex].value
}


function createDate(month){
    var day_slot = document.getElementById('date_day'); // указатель на список дней
    var date = new Date();  // создали объект Date
    date.setMonth(month);  // установили месяц
    date.setDate(32);      // установили кол-во дней

    var year = parseInt(document.getElementById('date_year').value); // получили введённый год

    if((year < 1920) || (year > date.getFullYear())) // проверили его на валидность
    year = date.getFullYear();  // либо установили текущий
    date.setFullYear(year);  // установили год

    var days = 32 - date.getDate(),  // кол-во элементов для списка
    list = document.createElement('select'), i  // создали новый список

    for (i = 1; i <= days; i++){
    toption = document.createElement('option');  // создали элемент в списке
    ttextnode = document.createTextNode(i);      // создали текстнод

    toption.appendChild(ttextnode);  // присоединили текстнод к элементу
    list.appendChild(toption);      // присоединили элемент к списку
    }

    day_slot.parentNode.replaceChild(list, day_slot);  // заменили текущий список на новый
    list.id = 'date_day';  // задали ему нужный id
}

window.onload = function(){
createDate(getValue('date_month')); // создаём список при загрузке документа
}

</script>
</head>

<body>
<input type="text" maxlength="4" value="19" id="date_year" name="date_year" size="4" />

<select id="date_month" name="date_month" onchange="createDate(this.options[this.selectedIndex].value)">
  <option value='0'>January</option>
  <option value='1'>February</option>
  <option value='2'>March</option>
  <option value='3'>April</option>
  <option value='4'>May</option>
  <option value='5'>Juny</option>
  <option value='6'>July</option>
  <option value='7'>August</option>
  <option value='8'>September</option>
  <option value='9'>October</option>
  <option value='10'>November</option>
  <option value='11'>December</option>
</select>

<select id="date_day" name="date_day"></select>


</body>

</html>

Дикс 02.03.2008 12:38
и всё-таки твой код пришлось поправить - у генерируемых элементов не были заданы значения и их нельзя было получить через POST.

Цитата:
for (i = 1; i <= days; i++){
toption = document.createElement('option'); // создали элемент в списке
ttextnode = document.createTextNode(i); // создали текстнод

toption.appendChild(ttextnode); // присоединили текстнод к элементу
list.appendChild(toption); // присоединили элемент к списку
}
заменил на
Цитата:
for (i = 1; i <= days; i++){
toption = document.createElement('option');
toption.value = i;
toption.text = i;
list.appendChild(toption);
}

Дикс 02.03.2008 12:45
хотя и щас блин в POST-дате не появляется переменная date_day =\\\

Дикс 02.03.2008 12:58
вот, уменьшенный код - тут остаётся тока вставить его в php-файл и нажать сабмит.
тогда выведется всё содержимое массива POST и будет видно что дата отсутствует. Помогите с этим разобраться, пожалуйста!

PHP код:
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST'){
echo "<pre>";
print_r($_POST);
echo "</pre>";
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>admin utility</title>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  </head>
<body>
<script type='text/javascript'>

// highlight active input field
function highlight(element, mode){
if(mode == 'enable')
document.getElementById(element).style.backgroundColor = '#FFFFCC';
else
document.getElementById(element).style.backgroundColor = '#FFF';
}


 // birthday functions -----------------

// update days list
function createDate(month){
    var day_slot = document.getElementById('date_day');
    var date = new Date();
    date.setMonth(month);
    var year = parseInt(document.getElementById('date_year').value);

    if((year < 1920) || (year > date.getFullYear()))
    year = date.getFullYear();
    date.setFullYear(year);
    date.setDate(32);
    var days = 32 - date.getDate(),
    list = document.createElement('select'), i

    for (i = 1; i <= days; i++){
    toption = document.createElement('option');
    toption.value = i;
    toption.text = i;
    list.appendChild(toption);
    }

    day_slot.parentNode.replaceChild(list, day_slot);
    list.id = 'date_day';
}

function getValue(id){
    var node = document.getElementById(id);
    return node.options[node.selectedIndex].value
}

window.onload = function(){
createDate(getValue('date_month'));

}
</script>
<h3>Add user</h3>
<form name="newuser" method="POST" onSubmit="return validate()">
<table border="0" >



<tr>
    <td>birthday:</td>
    <td>
    <select id="date_month" name="date_month" onchange="createDate(this.options[this.selectedIndex].value)" >
<option value='0'>January</option>
<option value='1'>February</option>
<option value='2'>March</option>
<option value='3'>April</option>
<option value='4'>May</option>
<option value='5'>Juny</option>
<option value='6'>July</option>
<option value='7'>August</option>
<option value='8'>September</option>
<option value='9'>October</option>
<option value='10'>November</option>
<option value='11'>December</option>

</select>

<select id="date_day" name="date_day" ></select>

<input type="text" maxlength="4" value="19" id="date_year" name="date_year" size="4" onBlur="createDate(document.getElementById('date_month').options[document.getElementById('date_month').selectedIndex].value)" />
    </td>
</tr>

<tr style="height: 50px">
    <td>&nbsp;</td><td style="vertical-align: bottom"><input type="submit" value="submit" />&nbsp;<input type="reset" value="reset" /></td>
</tr>
</table>
</form>
</body>
</html>

astrologer 02.03.2008 14:38
PHP код:
<?php 
if($_SERVER['REQUEST_METHOD'] == 'POST'){ 
echo "<pre>"; 
print_r($_POST); 
echo "</pre>"; 
} 
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>admin utility</title> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<script type='text/javascript'> 

// birthday functions ----------------- 

// update days list 
function createDate(month)
{
    var day_slot = document.getElementById('date_day'); 
    var date = new Date(); 
    date.setMonth(month); 
    var year = parseInt( document.getElementById('date_year').value ); 

    if((year < 1920) || (year > date.getFullYear())) year = date.getFullYear(); 
    date.setFullYear(year); 
    date.setDate(32); 
    var days = 32 - date.getDate(),
    list = document.createDocumentFragment(), o, t, i;

    while (day_slot.hasChildNodes())
    {
      day_slot.removeChild(day_slot.firstChild);
    }

    for (i = 1; i <= days; i++)
    {
        o = document.createElement('option'); 
        t = document.createTextNode(i);
        o.value = i; 
        list.appendChild(o); 
        o.appendChild(t);
    }

    day_slot.appendChild(list);
} 

function getValue()
{
    var a = arguments;
    if(!a[0]) return;
    if(typeof a[0] == 'string')
    {
        var node = document.getElementById(a[0]); 
        return node.options[node.selectedIndex].value;
    }
    else if(a[0].nodeName)
    {
        return a[0].options[a[0].selectedIndex].value;
    }
}

window.onload = function()
{ 
    createDate(getValue('date_month')); 
} 
</script>

</head> 
<body> 

<h3>Add user</h3> 
<form name="newuser" method="POST"> 
<table border="0"> 

<tr> 
<td>Birthday:</td> 
<td> 
<select id="date_month" name="date_month" onchange="createDate(getValue(this))"> 
    <option value='0'>January</option> 
    <option value='1'>February</option> 
    <option value='2'>March</option> 
    <option value='3'>April</option> 
    <option value='4'>May</option> 
    <option value='5'>Juny</option> 
    <option value='6'>July</option> 
    <option value='7'>August</option> 
    <option value='8'>September</option> 
    <option value='9'>October</option> 
    <option value='10'>November</option> 
    <option value='11'>December</option> 
</select> 

<select id="date_day" name="date_day"></select> 

<input type="text" maxlength="4" value="19" id="date_year" name="date_year" size="4" onblur="createDate(getValue('date_month'))" /> 
</td> 
</tr> 

<tr style="height: 50px"> 
<td>&nbsp;</td><td style="vertical-align: bottom"><input type="submit" value="submit" />&nbsp;<input type="reset" value="reset" /></td> 
</tr> 
</table> 
</form> 
</body> 
</html>


Время: 18:28