DOM вместо innerHTML

adamsalex · April 2, 2012

Добрый день, не работает innerHTML в IE. Погуглил в итоге необходимо переписать с помощью DOM -не могу до конца понять как.

Суть необходимо - из БД mySQL запросами через AJAX получать в select значения (асинхронно). В комментарии кода "строим DOM" насколько я понял не хватает каких то параметров.

Index.html


//функция получения названия фирм из БД
function showFirm(str)
{
if (str=="")
  {
  document.getElementById("parts_firm").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
	// строим DOM
	var para = document.createElement("option");
	var txt = document.createTextNode(xmlhttp.responseText);
	para.appendChild(txt);
	document.getElementById('parts_firm').appendChild(para);

		//Через innerHTML не работает в IE
                //document.getElementById("parts_firm").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","load_form_ajax.php?t="+str,true);
xmlhttp.send();
}
......
<td>Производитель:</td>
			<td>
			<!-- передаем в select id="parts_firm" инфо из БД, запускаем showModel() -->
<select id="parts_firm" name="firm" onchange="showModel(this.value)"> 
<option></option>
</select>

Great Rash · April 2, 2012

Быть не может. InnerHTML замечательно работает в ИЕ. Можно еще попробовать insertAdjasentHTML. Какую ошибку пишет ИЕ в консоли?

br3t · April 2, 2012

Скрипт передаёт один (!) option с производителем, запуская запрос по изменению селекта, но по умолчанию в селекте только один пункт, потому никакого запроса не происходит

Поправьте меня,если я чего-то не усмотрел

adamsalex · April 2, 2012

Быть не может. InnerHTML замечательно работает в ИЕ. Можно еще попробовать insertAdjasentHTML. Какую ошибку пишет ИЕ в консоли?

Пишет Неизвестная ошибка выполнения

Код 0

Строка 31 символ 5 - как раз начинается код document.getElementById("parts_firm").innerHTML=xmlhttp.responseText;

полный код ФУНКЦИИ


function showFirm(str)
{
if (str=="")
  {
  document.getElementById("parts_firm").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("parts_firm").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","load_form_ajax.php?t="+str,true);
xmlhttp.send();
}

Great Rash · April 2, 2012

А что приходит в responseText? ИЕ к этому делу чуткий, мало ли обо что он спотыкается.

adamsalex · April 2, 2012

А что приходит в responseText? ИЕ к этому делу чуткий, мало ли обо что он спотыкается.

приходит вся страница с тэгами - в которой есть нужные данные -все броузеры кроме IE корректно отражают информацию

<head><br />
<font size='1'><table class='xdebug-error' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined variable: f in C:\xampp\htdocs\frame\ARX\Form-local\load_form_ajax.php on line <i>4</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0021</td><td bgcolor='#eeeeec' align='right'>356128</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\xampp\htdocs\frame\ARX\Form-local\load_form_ajax.php' bgcolor='#eeeeec'>..\load_form_ajax.php<b>:</b>0</td></tr>
</table></font>
<br />
<font size='1'><table class='xdebug-error' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined variable: m in C:\xampp\htdocs\frame\ARX\Form-local\load_form_ajax.php on line <i>4</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0021</td><td bgcolor='#eeeeec' align='right'>356128</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\xampp\htdocs\frame\ARX\Form-local\load_form_ajax.php' bgcolor='#eeeeec'>..\load_form_ajax.php<b>:</b>0</td></tr>
</table></font>
<br />
<font size='1'><table class='xdebug-error' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined variable: y in C:\xampp\htdocs\frame\ARX\Form-local\load_form_ajax.php on line <i>4</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0021</td><td bgcolor='#eeeeec' align='right'>356128</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\xampp\htdocs\frame\ARX\Form-local\load_form_ajax.php' bgcolor='#eeeeec'>..\load_form_ajax.php<b>:</b>0</td></tr>
</table></font>
<title>||</title><meta http-equiv='X-UA-Compatible' content='IE=7'/>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name='robots' content='index, follow' />
<link rel='stylesheet' href='css/reset.css' type='text/css'/>
<link rel='stylesheet' href='css/main.css' type='text/css'/></head><option value="">выберите..</option><option value ="SUZUKI" >SUZUKI</option><option value ="DAIHATSU" >DAIHATSU</option><option value ="FUSO [MITSUBISHI_TRUCKS]" >FUSO [MITSUBISHI_TRUCKS]</option><option value ="HINO" >HINO</option><option value ="HONDA" >HONDA</option><option value ="ISUZU" >ISUZU</option><option value ="LEXUS" >LEXUS</option><option value ="MAZDA" >MAZDA</option><option value ="MITSUBISHI" >MITSUBISHI</option><option value ="NISSAN" >NISSAN</option><option value ="SUBARU" >SUBARU</option><option value ="TOYOTA" >TOYOTA</option><option value ="UD NISSAN_DIESEL" >UD NISSAN_DIESEL</option><br />
<font size='1'><table class='xdebug-error' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined variable: f in C:\xampp\htdocs\frame\ARX\Form-local\load_form_ajax.php on line <i>40</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0021</td><td bgcolor='#eeeeec' align='right'>356128</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\xampp\htdocs\frame\ARX\Form-local\load_form_ajax.php' bgcolor='#eeeeec'>..\load_form_ajax.php<b>:</b>0</td></tr>
</table></font>
<br />
<font size='1'><table class='xdebug-error' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined variable: f in C:\xampp\htdocs\frame\ARX\Form-local\load_form_ajax.php on line <i>50</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0021</td><td bgcolor='#eeeeec' align='right'>356128</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\xampp\htdocs\frame\ARX\Form-local\load_form_ajax.php' bgcolor='#eeeeec'>..\load_form_ajax.php<b>:</b>0</td></tr>
</table></font>
<br />
<font size='1'><table class='xdebug-error' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined variable: m in C:\xampp\htdocs\frame\ARX\Form-local\load_form_ajax.php on line <i>50</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0021</td><td bgcolor='#eeeeec' align='right'>356128</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\xampp\htdocs\frame\ARX\Form-local\load_form_ajax.php' bgcolor='#eeeeec'>..\load_form_ajax.php<b>:</b>0</td></tr>
</table></font>
<br />
<font size='1'><table class='xdebug-error' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined variable: f in C:\xampp\htdocs\frame\ARX\Form-local\load_form_ajax.php on line <i>60</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0021</td><td bgcolor='#eeeeec' align='right'>356128</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\xampp\htdocs\frame\ARX\Form-local\load_form_ajax.php' bgcolor='#eeeeec'>..\load_form_ajax.php<b>:</b>0</td></tr>
</table></font>
<br />
<font size='1'><table class='xdebug-error' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined variable: m in C:\xampp\htdocs\frame\ARX\Form-local\load_form_ajax.php on line <i>60</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0021</td><td bgcolor='#eeeeec' align='right'>356128</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\xampp\htdocs\frame\ARX\Form-local\load_form_ajax.php' bgcolor='#eeeeec'>..\load_form_ajax.php<b>:</b>0</td></tr>
</table></font>
<br />
<font size='1'><table class='xdebug-error' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined variable: y in C:\xampp\htdocs\frame\ARX\Form-local\load_form_ajax.php on line <i>60</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0021</td><td bgcolor='#eeeeec' align='right'>356128</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\xampp\htdocs\frame\ARX\Form-local\load_form_ajax.php' bgcolor='#eeeeec'>..\load_form_ajax.php<b>:</b>0</td></tr>
</table></font>
<br />
<font size='1'><table class='xdebug-error' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined variable: mysqli in C:\xampp\htdocs\frame\ARX\Form-local\load_form_ajax.php on line <i>66</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0021</td><td bgcolor='#eeeeec' align='right'>356128</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\xampp\htdocs\frame\ARX\Form-local\load_form_ajax.php' bgcolor='#eeeeec'>..\load_form_ajax.php<b>:</b>0</td></tr>
</table></font>
<br />
<font size='1'><table class='xdebug-error' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Fatal error: Call to a member function close() on a non-object in C:\xampp\htdocs\frame\ARX\Form-local\load_form_ajax.php on line <i>66</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0021</td><td bgcolor='#eeeeec' align='right'>356128</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\xampp\htdocs\frame\ARX\Form-local\load_form_ajax.php' bgcolor='#eeeeec'>..\load_form_ajax.php<b>:</b>0</td></tr>
</table></font>

Great Rash · April 2, 2012

Да вы что? Тут же тихий ужас приходит! <table> завернутая в <font> это вообще что-то с чем-то, не говоря уже о <meta> и <title> посреди кода. Наличие <option> при отсутствии <select>. В общем оно и не должно работать.

В остальных браузерах это работает чудом. Просто парсер в остальных браузерах прощает даже грубейшие ошибки, чего на самом деле в вашем случае делать не стоит.

br3t · April 2, 2012

Некоторые проблемы с кодировкой в ИЕ решаются заменой GET на POST

nerv · April 2, 2012

xmlhttp.send( null ); // <-- null

p.s.: не вникал, на первый взгляд

Edited April 2, 2012 by nerv

adamsalex · April 2, 2012

Да вы что? Тут же тихий ужас приходит! <table> завернутая в <font> это вообще что-то с чем-то, не говоря уже о <meta> и <title> посреди кода. Наличие <option> при отсутствии <select>. В общем оно и не должно работать.
В остальных браузерах это работает чудом. Просто парсер в остальных браузерах прощает даже грубейшие ошибки, чего на самом деле в вашем случае делать не стоит.

В итоге как должно быть код load_form_ajax.php , даже если комментировать все в head результат аналогичный


<?php
include('db_login.php');
echo '<head>';
echo '<title>' .$f. '|' .$m. '|' .$y. '</title>';
echo "<meta http-equiv='X-UA-Compatible' content='IE=7'/>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name='robots' content='index, follow' />
<link rel='stylesheet' href='css/reset.css' type='text/css'/>
<link rel='stylesheet' href='css/main.css' type='text/css'/>";
echo '</head>';

$db = new mysqli($db_server, $db_login, $db_pass, $db_name);
$db->set_charset("utf8");// говорим что обрабатываем в скрипте в кодировке utf8
if(!$db) {
// Show error if we cannot connect.
echo 'ERROR: Could not connect to the database.';
} 
else {
//инициализируем переменные
if(isset($_GET['t'])) $t=$_GET['t']; // HTML -> PHP передаем type
if(isset($_GET['f'])) $f=$_GET['f']; // HTML -> PHP передаем firm
if(isset($_GET['m'])) $m=$_GET['m']; // HTML -> PHP передаем model
if(isset($_GET['y'])) $y=$_GET['y']; // HTML -> PHP передаем year

	echo'<option value="">выберите..</option>'; // подставляем первое значение в option для всех столбцов

	// получаем в форму название фирм из БД
	if(isset($_GET['f']) == '') {
	$query = $db->query("SELECT firm FROM firm WHERE type_id = '".$t."'");

		while ($result = $query ->fetch_object()) {
		  echo '<option value ="'.$result->firm.'" >' .$result->firm. '</option>';
		}
	}
		// получаем в форму название моделей из БД c проверкой что m пока не существует
		if(isset($_GET['m']) == '') {
			$query = $db->query("SELECT model FROM type,firm,model
					WHERE type.type_id=firm.type_id AND firm.firm_id=model.firm_id
					AND type.type_id='" .$t. "' AND firm.firm = '".$f."'");

			while ($result = $query ->fetch_object()) {
			  echo '<option value ="'.$result->model.'" >' .$result->model. '</option>';
			}
		}
			// получаем в форму год из БД
			if(isset($_GET['y']) == '') {
				$query = $db->query("SELECT year FROM type,firm,model,year
						WHERE type.type_id=firm.type_id AND firm.firm_id=model.firm_id AND model.model_id=year.model_id
						AND type.type_id='" .$t. "' AND firm.firm = '".$f."' AND model.model ='".$m."'");

				while ($result = $query ->fetch_object()) {
				  echo '<option value ="'. $result->year.'" >' .$result->year. '</option>';
				}
			}
					// получаем в форму кузов из БД
					$query = $db->query("SELECT frame FROM type,firm,model,year,frame
								WHERE type.type_id=firm.type_id AND firm.firm_id=model.firm_id 
									AND model.model_id=year.model_id AND year.year_id=frame.year_id
								AND type.type_id='" .$t. "' AND firm.firm = '".$f."' AND model.model ='".$m."' AND year.year='".$y."'");

							while ($result = $query ->fetch_object()) {
							  echo '<option value ="'. $result->frame.'" >' .$result->frame. '</option>';
							}
}
$mysqli->close();  
?>

Great Rash · April 2, 2012

Начните с простого. Закомментируйте весь код и оставьте для начала одну строку:

<?php
echo '<b style="color: red;">test</b>';
?>

И посмотрите что вам придет. Если эта строка придет нормально, то ищите проблему в вашем PHP, значит, что-то не так вы отдаете. Если даже этот код не вставится, тогда будем внимательно изучать ваш скрипт.

adamsalex · April 2, 2012

Начните с простого. Закомментируйте весь код и оставьте для начала одну строку:
<?php
echo '<b style="color: red;">test</b>';
?>
И посмотрите что вам придет. Если эта строка придет нормально, то ищите проблему в вашем PHP, значит, что-то не так вы отдаете. Если даже этот код не вставится, тогда будем внимательно изучать ваш скрипт.

Теперь все ок- в load_form_ajax.php приходит


<option value="">выберите..</option><option value ="SUZUKI" >SUZUKI</option><option value ="DAIHATSU" >DAIHATSU</option><option value ="FUSO [MITSUBISHI_TRUCKS]" >FUSO [MITSUBISHI_TRUCKS]</option><option value ="HINO" >HINO</option><option value ="HONDA" >HONDA</option><option value ="ISUZU" >ISUZU</option><option value ="LEXUS" >LEXUS</option><option value ="MAZDA" >MAZDA</option><option value ="MITSUBISHI" >MITSUBISHI</option><option value ="NISSAN" >NISSAN</option><option value ="SUBARU" >SUBARU</option><option value ="TOYOTA" >TOYOTA</option><option value ="UD NISSAN_DIESEL" >UD NISSAN_DIESEL</option>

в HTML форме все вставляется в один селект сплошной строкой

насколько я понимаю нужно делать цикл которого у меня не хватает в js - сейчас код такой


xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
	var para = document.createElement("option");
	var txt = document.createTextNode(xmlhttp.responseText);
	para.appendChild(txt);
	document.getElementById('parts_firm').appendChild(para);
    }
  }
xmlhttp.open("GET","load_form_ajax.php?t="+str,true);
xmlhttp.send();
}

Edited April 3, 2012 by adamsalex

Great Rash · April 3, 2012

Вы вставляете текстовую ноду. Внутри текстовой ноды парсинг HTML не происходит. Потому там будет тупо текст. Вам лучше использовать не responseText, а responseXML, тогда на выходе вы получите XML и сможете перемещаться по его DOM-дереву.

adamsalex · April 3, 2012

Вы вставляете текстовую ноду. Внутри текстовой ноды парсинг HTML не происходит. Потому там будет тупо текст. Вам лучше использовать не responseText, а responseXML, тогда на выходе вы получите XML и сможете перемещаться по его DOM-дереву.

ага сделал


if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {

	var para = document.createElement("option");
	var txt = document.createTextNode(xmlhttp.responseXML);
	para.appendChild(txt);
	document.getElementById('parts_firm').appendChild(para);

    }

теперь выдает в selecte [object] - где то я "DOM не достроил"

Great Rash · April 3, 2012

Да не надо вообще createTextNode вызывать.

1) в load_form_ajax.php надо поставить XML-доктайп, чтобы быть уверенным, что придет XML.

<?xml version="1.0" encoding="UTF-8"?>

2) в переменную записываем полученный ответ сервера

var xml = xmlhttp.responseXML;

3) работаем с ним как с DOM

var options = xml.getElementsByTagName('option');

for (var i = 0, l = options.length; i < l; i++) {
  var option = options[i];
  document.getElementById('parts_firm').appendChild(option);
}

adamsalex · April 3, 2012

Да не надо вообще createTextNode вызывать.
1) в load_form_ajax.php надо поставить XML-доктайп, чтобы быть уверенным, что придет XML.
<?xml version="1.0" encoding="UTF-8"?>
2) в переменную записываем полученный ответ сервера
var xml = xmlhttp.responseXML;
3) работаем с ним как с DOM
var options = xml.getElementsByTagName('option');

for (var i = 0, l = options.length; i < l; i++) {
  var option = options[i];
  document.getElementById('parts_firm').appendChild(option);
}

Да... теперь пишет

xml is null
var options = xml.getElementsByTagName('option');

строчку

<?xml version="1.0" encoding="UTF-8"?>

прописал в index.html, если прописать в

load_form_ajax.php, то так?

echo '<xml version="1.0" encoding="UTF-8">';

Great Rash · April 3, 2012

В load_form_ajax.php, то так: echo '<?xml version="1.0" encoding="UTF-8"?>';

Строка должна быть самой первой.

adamsalex · April 3, 2012

В load_form_ajax.php, то так: echo '<?xml version="1.0" encoding="UTF-8"?>';
Строка должна быть самой первой.

сделал - ошибка осталась xml is null

передает такой код


ПараметрыЗаголовкиОтветHTML

<?xml version="1.0" encoding="UTF-8"?><option value="">выберите..</option><option value ="SUZUKI" >SUZUKI</option><option value ="DAIHATSU" >DAIHATSU</option><option value ="FUSO [MITSUBISHI_TRUCKS]" >FUSO [MITSUBISHI_TRUCKS]</option><option value ="HINO" >HINO</option><option value ="HONDA" >HONDA</option><option value ="ISUZU" >ISUZU</option><option value ="LEXUS" >LEXUS</option><option value ="MAZDA" >MAZDA</option><option value ="MITSUBISHI" >MITSUBISHI</option><option value ="NISSAN" >NISSAN</option><option value ="SUBARU" >SUBARU</option><option value ="TOYOTA" >TOYOTA</option><option value ="UD NISSAN_DIESEL" >UD NISSAN_DIESEL</option><br />

Great Rash · April 3, 2012

Как выглядит load_form_ajax.php? Показывайте весь код.

adamsalex · April 3, 2012

Как выглядит load_form_ajax.php? Показывайте весь код.


<?php
echo '<?xml version="1.0" encoding="UTF-8"?>';
include('db_login.php');
/*echo '<head>';
echo '<title>' .$f. '|' .$m. '|' .$y. '</title>';
echo "<meta http-equiv='X-UA-Compatible' content='IE=7'/>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name='robots' content='index, follow' />
<link rel='stylesheet' href='css/reset.css' type='text/css'/>
<link rel='stylesheet' href='css/main.css' type='text/css'/>";
echo '</head>';*/

// не забываем менять на реальный сервер czmysql1
$db = new mysqli($db_server, $db_login, $db_pass, $db_name);
$db->set_charset("utf8");// говорим что обрабатываем в скрипте в кодировке utf8
if(!$db) {
// Show error if we cannot connect.
echo 'ERROR: Could not connect to the database.';
} 
else {
//инициализируем переменные
if(isset($_GET['t'])) $t=$_GET['t']; // HTML -> PHP передаем type
if(isset($_GET['f'])) $f=$_GET['f']; // HTML -> PHP передаем firm
if(isset($_GET['m'])) $m=$_GET['m']; // HTML -> PHP передаем model
if(isset($_GET['y'])) $y=$_GET['y']; // HTML -> PHP передаем year

	echo'<option value="">выберите..</option>'; // подставляем первое значение в option для всех столбцов

	// получаем в форму название фирм из БД
	if(isset($_GET['f']) == '') {
	$query = $db->query("SELECT firm FROM firm WHERE type_id = '".$t."'");

		while ($result = $query ->fetch_object()) {
		  echo '<option value ="'.$result->firm.'" >' .$result->firm. '</option>';
		}
	}
		// получаем в форму название моделей из БД c проверкой что m пока не существует
		if(isset($_GET['m']) == '') {
			$query = $db->query("SELECT model FROM type,firm,model
					WHERE type.type_id=firm.type_id AND firm.firm_id=model.firm_id
					AND type.type_id='" .$t. "' AND firm.firm = '".$f."'");

			while ($result = $query ->fetch_object()) {
			  echo '<option value ="'.$result->model.'" >' .$result->model. '</option>';
			}
		}
			// получаем в форму год из БД
			if(isset($_GET['y']) == '') {
				$query = $db->query("SELECT year FROM type,firm,model,year
						WHERE type.type_id=firm.type_id AND firm.firm_id=model.firm_id AND model.model_id=year.model_id
						AND type.type_id='" .$t. "' AND firm.firm = '".$f."' AND model.model ='".$m."'");

				while ($result = $query ->fetch_object()) {
				  echo '<option value ="'. $result->year.'" >' .$result->year. '</option>';
				}
			}
					// получаем в форму кузов из БД
					$query = $db->query("SELECT frame FROM type,firm,model,year,frame
								WHERE type.type_id=firm.type_id AND firm.firm_id=model.firm_id 
									AND model.model_id=year.model_id AND year.year_id=frame.year_id
								AND type.type_id='" .$t. "' AND firm.firm = '".$f."' AND model.model ='".$m."' AND year.year='".$y."'");

							while ($result = $query ->fetch_object()) {
							  echo '<option value ="'. $result->frame.'" >' .$result->frame. '</option>';
							}
}
$mysqli->close();  
?>

Great Rash · April 3, 2012

Блин, я ж пишу: "начните с простого"!


<?xml version="1.0" encoding="UTF-8"?>
<root>
  <option value="0">выберите, что-то там</option>
  <option value="1">выберите пункт 1</option>
  <option value="2">выберите пункт 2</option>
  <option value="3">выберите пункт 3</option>
</root>

Начните с такого файла. Для чего тянуть метаинфу? Для чего <head>?

s0rr0w · April 3, 2012

Блин, я ж пишу: "начните с простого"!
<?xml version="1.0" encoding="UTF-8"?>
<root>
  <option value="0">выберите, что-то там</option>
  <option value="1">выберите пункт 1</option>
  <option value="2">выберите пункт 2</option>
  <option value="3">выберите пункт 3</option>
</root>
Начните с такого файла. Для чего тянуть метаинфу? Для чего <head>?

Возможно, что потребуется завернуть содержимое root в CDATA...

Great Rash · April 3, 2012

Ну если там только спецсимволы есть. А так, по идее, нет необходимости.

s0rr0w · April 3, 2012

Ну если там только спецсимволы есть. А так, по идее, нет необходимости.

Даже дело не в спецсимволах. Это делается, чтобы не нарваться на потенциальный баг, когда браузер попытается что-то сделать с документом предварительно, перед вставкой в HTML-контейнер. Хотя, может я и задротствую уже...

adamsalex · April 4, 2012

Все всем спасибо кто участвовал - разобрался, проблема была в передаче нескольких запросов сразу в 1 селект + куча мусора, как только почистил мусор и стал передавать нормальный HTML все стало ОК

Sign In

DOM вместо innerHTML

Question

Link to comment

Share on other sites

24 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information