Jquery .html() - IE problem
Добрый день!
Столкнулся на днях с проблемой: в input полях на форме в IE 8 вместо пустых значений отображается следующий текст: "type = text".
Как оказалось невалидный html возвращает метод jQuery.html(), который в свою очередь использует св-во innerHTML. Браузер IE по-своему парсит исходный текст и опускает кавычки в атрибутах тэгов. В итоге получается вместо
он возвращает
и мы видим не то, что нужно...
Может кто-нибудь сталкивался с проблемой и может посоветовать пути обхода, не считая костылей с регулярными выражениями?
P.S. форма отображается в jQuery UI Dialog виджете, то есть содержимое диалога берется из div'a след. образом:
Столкнулся на днях с проблемой: в input полях на форме в IE 8 вместо пустых значений отображается следующий текст: "type = text".
Как оказалось невалидный html возвращает метод jQuery.html(), который в свою очередь использует св-во innerHTML. Браузер IE по-своему парсит исходный текст и опускает кавычки в атрибутах тэгов. В итоге получается вместо
Код:
<input type="text" name="xxx" value="">
Код:
<input value= type=text name=xxx>
Может кто-нибудь сталкивался с проблемой и может посоветовать пути обхода, не считая костылей с регулярными выражениями?
P.S. форма отображается в jQuery UI Dialog виджете, то есть содержимое диалога берется из div'a след. образом:
Код:
var htmlcode=$('#dialog-tpl').html();
У метода же даже в доке написано: For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters. а пустой value приводится к 0 у него.
Кода вашего не знаю, но смысла получать форму таким образом не вижу. Для получения данных формы, независимо откуда, лучше используйте .serialize() или .serializeArray(). Если вам надо вывести повторно ту же форму из диалога, то просто перерендерите её или вынесите в отдельный блок для tmpl
Кода вашего не знаю, но смысла получать форму таким образом не вижу. Для получения данных формы, независимо откуда, лучше используйте .serialize() или .serializeArray(). Если вам надо вывести повторно ту же форму из диалога, то просто перерендерите её или вынесите в отдельный блок для tmpl
Цитата: MrXaK
У метода же даже в доке написано: For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters. а пустой value приводится к 0 у него.
Я в курсе, что такая проблема существует, читал эти доки. Вопрос был в другом.
Есть хтмл-страница вида:
Код:
<html>
<!--page content here-->
<div id="dialog-tpl" style="display:none">
<form action="" method="post">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="NAME" value=""></td>
</tr>
<tr>
<td>Age</td>
<td><input type="text" name="AGE" value=""></td>
</tr>
</table>
</form>
</div>
</html>
<!--page content here-->
<div id="dialog-tpl" style="display:none">
<form action="" method="post">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="NAME" value=""></td>
</tr>
<tr>
<td>Age</td>
<td><input type="text" name="AGE" value=""></td>
</tr>
</table>
</form>
</div>
</html>
Цитата: MrXaK
Для получения данных формы....
Данные формы мне не нужны.
Цитата: MrXaK
Если вам надо вывести повторно ту же форму из диалога, то просто перерендерите её или вынесите в отдельный блок для tmpl
поясните, пожалуйста, что-то не совсем понял..
Ну вот такой вот IE. Microsoft с ним уже много лет радует веб-мастеров собственными стандартами. Это баг. Атрибуты могут не содержать " кавычек, если например значение текст на латинском или цифры без пробелов. Но про пустое значение атрибута ничего не сказано :D
www.w3.org/TR/html4/intro/sgmltut.html#attributes
Без костылей для IE - никак.
Вот готовый костыль можешь попробовать http://www.stevetucker.co.uk/innerxhtml.htm
Либо задай начальное значение для value
www.w3.org/TR/html4/intro/sgmltut.html#attributes
Без костылей для IE - никак.
Вот готовый костыль можешь попробовать http://www.stevetucker.co.uk/innerxhtml.htm
Либо задай начальное значение для value
Цитата: arrjj
http://www.stevetucker.co.uk/innerxhtml.htm
этот линк посещал как-то, показалось громоздко. Что ж, буду использовать наверное регулярные выражения.
Спасибо всем за проявленный интерес!
А почему нельзя вставить копию этого div'а через .appendTo() и не мучаться с html()?
Про tmpl я имел в виду следующее (у меня у самого так реализовано):
никаких .html(), и всё прекрасно работает на каждой странице. В вашем случае вместо лямбда-функции в onclick() будет ваша пользовательская с параметрами
Про tmpl я имел в виду следующее (у меня у самого так реализовано):
Код:
<script id="template-static" type="text/x-jquery-tmpl">
<form>
<fieldset>
<label for="name">111</label> <input type="text" name="name" id="name" value="${name}"/>
<br />
</fieldset>
</form>
</script>
<form>
<fieldset>
<label for="name">111</label> <input type="text" name="name" id="name" value="${name}"/>
<br />
</fieldset>
</form>
</script>
Код:
var templateStatic = $('#template-static');
$('#loginBtn').click(function() {
$('<div></div>')
.html('')
.attr({'id' : 'loginDialog', 'title' : 'blablabla'})
.appendTo($('body'));
$.tmpl(templateStatic, {'name' : 'blabla_name'}).appendTo($('#loginDialog'));
$('#loginDialog').dialog({buttons : {
'OK' : function() {
$.post(
...
)
}
});
});
$('#loginBtn').click(function() {
$('<div></div>')
.html('')
.attr({'id' : 'loginDialog', 'title' : 'blablabla'})
.appendTo($('body'));
$.tmpl(templateStatic, {'name' : 'blabla_name'}).appendTo($('#loginDialog'));
$('#loginDialog').dialog({buttons : {
'OK' : function() {
$.post(
...
)
}
});
});
Главный вопрос-то забыл) jQuery UI же позволяют из любого div'а сделать диалог)) Почему бы вам вашим кодом просто не добавить к dialog-tpl нужный title и не сделать .dialog() прямо над этим дивом? Без всякого копирования .html()?