VPF::Вывод больших блоков HTML - Форум программистов

SoWa

Дата 26.8.2009, 13:30 (ссылка)

(нет голосов)

Загрузка ...

Харекришна

Профиль
Группа: Комодератор
Сообщений: 2422
Регистрация: 18.10.2004

Репутация: нет
Всего: 74

Предисловие: делаю виджет для Яндекса.
Есть там метод, позволяющий узнать значение пользовательской настройки.
Пишу такой код:

Код


<script type="text/javascript">
                    if (widget.getValue("show_auto")==true)
                    {

                    }
                    </script>

И вот если эта настройка и правда стоит у пользователя, мне надо вывести ХТМЛ-блок. Скажем, строку таблицы. Т.е.

Код


<tr>
<td> asd </td>
<td> asd </td>
...
<td> asd <td>
</tr>

Как быть? Ибо document.write(" сюда ХТМЛ "); меня как-то высаживает- все кавычки экранировать(в таблице есть события onClick)

--------------------

Всем добра smile

Wolf1994

Дата 26.8.2009, 14:08 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1701
Регистрация: 5.10.2004

Репутация: 1
Всего: 29

Спрятать таблицу в XHTML коде и скриптом просто открыть её.

EmilRegis

Дата 26.8.2009, 14:36 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 306
Регистрация: 21.9.2007

Репутация: 3
Всего: 4

или как написал Wolf1994 или

Код


table = document.createElement('table');
tr= document.createElement('tr');
table.appendChild(tr);
tr.innerHTML = '<td>asd</td><td>dsa</td>';

SoWa

Дата 26.8.2009, 18:30 (ссылка)

(нет голосов)

Загрузка ...

Харекришна

Профиль
Группа: Комодератор
Сообщений: 2422
Регистрация: 18.10.2004

Репутация: нет
Всего: 74

Окей, вариант конечно, но адаптировать его под дивы я не сумею- скила не хватает smile

Продублирую свой вопрос с Яндекс.Виджеты:

Если кто с этим не работал, то вкратце расскажу:
Яндекс.Виджет должен быть XHTML страницей. В <head> описываются некоторые свойства и настройки виджета, а так-же подключается Яндекс.JS API
И вот собственно что случается: при загрузке на Яндекс, мне выдается ошибка невалидного XML.
По шагам выяснил, что ломается мой виджет на добавлении в функцию блока вывода дивов. В них, как видите есть события, и кавычки я экранировал(правильно-ли?).

Код


        function show1() {
        document.write("123, допустим");
        }

Вот такая функция в разделе <head><script type="text/javascript">

До нее есть еще функции в том-же разделе, и все прекрасно работало. Но написал это, и виджет перестал загружаться на Яндекс с сообщением о невалидном XML

Помогите, где ошибка?



Дополнение:

стер функцию, начал писать по шагам. Определил функцию- закачивается на Яндекс.

Определил условие if (widget.getValue("show_auto")==true) {} - загружается.

Когда дополнил до такого вида:

        function show1() {
            if (widget.getValue("show_auto") == true) {
                document.write("<div id=\"d1\">");
                document.write("<div>");
                document.write("<span onclick=\"togle(this);\" class=\"plusminus\"><h4>Авто, мото и запчасти</h4></span>");
                document.write("</div><div class=\"expandableclose\">");
                document.write("ля ля ля");
                document.write("</div> ");
                document.write("</div>");            
            }
        }

Загружаться перестало.

На всякий случай код начала виджета:

Код


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:widget="http://wdgt.yandex.ru/ns/">

<head>
<!--CSS -->
    <style type="text/css">
         body 
            {
            background-color: #ffffff;
            text-align: left;
            }
         .pic
            {
                height: 25px;
                width: 25px;
                
            }
            
         h4 {color: #3366cc; margin:-2px; }

        .expandableclose
        {
            display: none;
        }
        .expandableopen
        {
            display: block;
        }
        .plusminus
        {
            cursor:pointer;
        }
    </style>    
    
    
<!-- Описываем виджет -->
    <meta name="title" content="Гора Скидок.ру" />
    <meta name="description" content="Виджет, позволяющий просматривать скидки и распродажи Екатеринбурга" />

<!--Настроечки отображения  -->
<widget:preferences>
  <preference name="show_auto" type="boolean" label="Авто, мото и запчасти" defaultValue="true" />
  <preference name="show_wear" type="boolean" label="Одежда, обувь и аксессуары" defaultValue="true" />
  <preference name="show_mobile" type="boolean" label="Мобильные телефоны" defaultValue="true" />
  <preference name="show_hometech" type="boolean" label="Бытовая техника" defaultValue="true" />
  <preference name="show_electro" type="boolean" label="Электроника" defaultValue="true" />
  <preference name="show_porta" type="boolean" label="Портативная техника" defaultValue="true" />
  <preference name="show_home" type="boolean" label="Дом, быт, мебель, ремонт" defaultValue="true" />
  <preference name="show_sport" type="boolean" label="Спорт и туризм, природа" defaultValue="true" />
  <preference name="show_beauty" type="boolean" label="Красота и здоровье" defaultValue="true" />
  <preference name="show_fun" type="boolean" label="Развлечения" defaultValue="true" />
  <preference name="show_hobby" type="boolean" label="Досуг, хобби и увлечения" defaultValue="true" />
  <preference name="show_gifts" type="boolean" label="Подарки" defaultValue="true" />
  <preference name="show_food" type="boolean" label="Продукты и напитки" defaultValue="true" />
  <preference name="show_service" type="boolean" label="Услуги" defaultValue="true" />
  <preference name="show_real" type="boolean" label="Недвижимость" defaultValue="true" />
  <preference name="show_biznes" type="boolean" label="Бизнес" defaultValue="true" />
  <preference name="show_computer" type="boolean" label="Компьютеры и оргтехника" defaultValue="true" />
  <preference name="show_children" type="boolean" label="Детские товары" defaultValue="true" />
  <preference name="show_bank" type="boolean" label="Банки, финансы" defaultValue="true" />
</widget:preferences>
  
<!--JavaScript API include -->
    <script type="text/javascript" src="http://img.yandex.net/webwidgets/1/WidgetApi.js"></script>
    
    <script type="text/javascript">
        function togle(src) {
            var divs = src.parentNode.parentNode.getElementsByTagName("div");
            var exp = divs[divs.length - 1];
            exp.className = exp.className == "expandableopen" ? "expandableclose" : "expandableopen";
            widget.adjustIFrameHeight();
        }

        function show1() {
            if (widget.getValue("show_auto") == true) {
                document.write("<div id=\"d1\">");
                document.write("<div>");
                document.write("<span onclick=\"togle(this);\" class=\"plusminus\"><h4>Авто, мото и запчасти</h4></span>");
                document.write("</div><div class=\"expandableclose\">");
                document.write("ля ля ля");
                document.write("</div> ");
                document.write("</div>");            
            }
        }
    </script>
    
</head>

Вот и где тут невалидный XML?

--------------------

Всем добра smile

Wolf1994

Дата 26.8.2009, 18:53 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1701
Регистрация: 5.10.2004

Репутация: 1
Всего: 29

Попробуйте посмотреть здесь: http://validator.w3.org/check

SoWa

Дата 26.8.2009, 19:45 (ссылка)

(нет голосов)

Загрузка ...

Харекришна

Профиль
Группа: Комодератор
Сообщений: 2422
Регистрация: 18.10.2004

Репутация: нет
Всего: 74

Wolf1994, ой, спасибо тебе огромное!!! Просто MustHave это в закладках smile

Тогда вопрос тавится по другому: как мне с помощью JavaScript вывести вот этот кусок кода:

Код


<div id="d1">
<span onclick="togle(this);" class="plusminus"><h4>Авто, мото и запчасти</h4></span>
</div><div class="expandableclose">
ля ля ля
</div>
</div>

Оказалось, ругалось на слеши перед кавычками.
Собственно, как вывести? ^_^

--------------------

Всем добра smile

MrDmitry

Дата 26.8.2009, 23:39 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 556
Регистрация: 10.11.2006

Репутация: нет
Всего: нет

Код


$("id diva (в данном случаи d1)").innerHTML="<span onclick="togle(this);" class="plusminus"><h4>Авто, мото и запчасти</h4></span>
</div><div class="expandableclose">
ля ля ля
</div>";

Наверное как то так
А вообще у тебя что то с дивами не понятное. Открывающих 2 а закрывающих 3

SoWa

Дата 27.8.2009, 07:41 (ссылка)

(нет голосов)

Загрузка ...

Харекришна

Профиль
Группа: Комодератор
Сообщений: 2422
Регистрация: 18.10.2004

Репутация: нет
Всего: 74

Ну гдето потерялся кусочек кода в копипасте чтоб выложить на форум.
Не в этом суть.

Цитата(MrDmitry @ 26.8.2009, 23:39

)

$("id diva (в данном случаи d1)").innerHTML="<span onclick="togle(this);" class="plusminus"><h4>Авто, мото и запчасти</h4></span></div><div class="expandableclose">ля ля ля</div>";

Знаешь в чем дело? Дело в том, что двойные кавычки, в которые заключено все выражение, будут перекрываться кавычками из верстки.

--------------------

Всем добра smile

SoWa

Дата 27.8.2009, 08:33 (ссылка)

(нет голосов)

Загрузка ...

Харекришна

Профиль
Группа: Комодератор
Сообщений: 2422
Регистрация: 18.10.2004

Репутация: нет
Всего: 74

Решение на уровне камней и палок найдено:
использовать примерно следующее:

Код


<script type="text/javascript">
function foo() {
var a='Hello! "Its work!" beautiful.';
document.write(a);
}
</script>

--------------------

Всем добра smile

EmilRegis

Дата 27.8.2009, 09:24 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 306
Регистрация: 21.9.2007

Репутация: 3
Всего: 4

Цитата(SoWa @ 27.8.2009, 08:33

)

Решение на уровне камней и палок найдено:
использовать примерно следующее:
Выделить всёРазметка HTML
1:
2:
3:
4:
5:
6:

<script type="text/javascript">
function foo() {
var a='Hello! "Its work!" beautiful.';
document.write(a);
}
</script>

дурацкое решение...

конечно кавычки будут перекрываться,они ж везде стоят двойные...

Код


.innerHTML="<span onclick='togle(this);' class='plusminus'><h4>Авто, мото и запчасти</h4></span>

Wolf1994

Дата 27.8.2009, 11:23 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1701
Регистрация: 5.10.2004

Репутация: 1
Всего: 29

IMHO, проблему с руганью на JavaScript можно решать с помощью:

Код


<!--
код
-->

- для старого стандарта и:

Код


//<![CDATA[
код
//]]>

- для нового.

Ставится сразу после тэга script, обрамляя код.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »