ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / jQuery+Javascript добавление элемента
25 сообщений из 28, страница 1 из 2
  1  все
jQuery+Javascript добавление элемента
    #38448848
Валисий
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Валисий
Гость
Всем добрый день!
Использую библиотеку jQuery Mobile с CSS для Андроида. Пытаюсь сделать следующее: на странице page1.html имеется список ul. Пытаюсь добавить в него выпадающий список (collapsible) в функции JavaScript. В функции также читаются данные из файла JSON. При проверке - вроде все работает, но добавляется не выпадающий список, а отдельные два элемента (типа li). Что я делаю не так?
Вот код header-a описанной страницы:
Код: html
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.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
<!DOCTYPE HTML>
<html>
    <head>
        <title>Books</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"> 
		
		<!-- FontAwesome - http://fortawesome.github.io/Font-Awesome/ -->
        <link rel="stylesheet" href="css/font-awesome.min.css" />

		<!-- jQueryMobileCSS - original without styling -->
        <link rel="stylesheet" href="css/jquerymobile.css" />

		<!-- nativeDroid core CSS -->
        <link rel="stylesheet" href="css/jquerymobile.nativedroid.css" />

		<!-- nativeDroid: Light/Dark -->
        <link rel="stylesheet" href="css/jquerymobile.nativedroid.dark.css"  id='jQMnDTheme' />

		<!-- nativeDroid: Color Schemes -->
        <link rel="stylesheet" href="css/jquerymobile.nativedroid.color.green.css" id='jQMnDColor' />

		<!-- jQuery / jQueryMobile Scripts -->
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
		
        <script type='text/javascript'>
              function start(){  
              xhttp=new XMLHttpRequest();
              xhttp.open('GET','bookbase.json',true);
              xhttp.send();
              xhttp.onreadystatechange=function(){
              if (xhttp.readyState==4){
	      // alert('OKEJ!');
              var json=eval( '('+xhttp.responseText+')' );
	      var list=document.getElementById('ul1');
	      var list1=document.createElement('div');
	      list1.innerHTML='<div data-role="collapsible" data-content-theme="b" onclick="start()"><h3>Books</h3></div>';
	      for (var i=0; i<2; i++) {
		 var l=document.createElement('li');
		 l.innerHTML='<li><h3 class="ui-li-heading">'+json.bookbase[i].author+'</h3><p class="ui-li-desc">Book1</p><p class="ui-li-aside ui-li-desc"><b>Name1</b></p></li>';
		 list1.appendChild(l);		 
		 }
		 list.appendChild(list1);
             }
         }
         }
        </script>		
	  
    </head>
...
Рейтинг: 0 / 0
31.10.2013, 18:08
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38448905
от оно как
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
от оно как
Гость
вы создаете в цикле элементы li, и еще в придачу их innerHTML присваиваете li
получаются вложенные друг в друга li

и не пользуйтесь eval для получения json, есть и BIF, и jquery функции для этого
...
Рейтинг: 0 / 0
31.10.2013, 18:45
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38448910
от оно как
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
от оно как
Гость
у вас получается такая какая-то иерархия:

ul > div > li > li

прочитайте какой нибудь букварь про хтмл
...
Рейтинг: 0 / 0
31.10.2013, 18:48
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38448913
Валисий
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Валисий
Гость
Иерархия такая и должна быть: ul > div(collapsible) > ul > li. В innerHTML для li поубирал <li>, не помогло.
...
Рейтинг: 0 / 0
31.10.2013, 18:54
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38448917
от оно как
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
от оно как
Гость
ВалисийИерархия такая и должна быть: ul > div(collapsible) > ul > li. В innerHTML для li поубирал <li>, не помогло.

в том примере, который вы показали вы добавляете li приямо в див
возможно, вы что - то от нас скрывете? ))
...
Рейтинг: 0 / 0
31.10.2013, 19:00
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38448921
Валисий
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Валисий
Гость
виноват, и впрямь скрываю) добавил кое-что. приведу тело функции:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
function start(){  
   xhttp=new XMLHttpRequest();
   xhttp.open('GET','bookbase.json',true);
   xhttp.send();
   xhttp.onreadystatechange=function(){
      if (xhttp.readyState==4){
	  alert('OKEJ!');
         var json=eval( '('+xhttp.responseText+')' );
		 var list=document.getElementById('ul1');
		 var acn_list=document.createElement('div');
		 acn_list.innerHTML='<div data-role="collapsible" data-content-theme="b" onclick="start()">';
		 list.appendChild(acn_list);
		 var ulNew=document.createElement('ul');
		 ulNew.innerHTML='<ul data-role="listview" id="accnts" data-theme="b">Books</div>';
		 acn_list.appendChild(ulNew);
		 for (var i=0; i<2; i++) {
		 var l=document.createElement('li');
		 l.innerHTML='<h3 class="ui-li-heading">'+json.bookbase[i].author+'</h3><p class="ui-li-desc">Book1</p><p class="ui-li-aside ui-li-desc"><b>Name1</b></p>';
		 ulNew.appendChild(l);		 
		 }
      }
   }
}
...
Рейтинг: 0 / 0
31.10.2013, 19:04
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38448923
Валисий
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Валисий
Гость
напрашивается вопрос: там, где я делаю createElement(div), и пишу ему innerHTML='<div data-role="collapsible"....></div>, я все верно делаю? Это задаст нужные свойства? Потому что отображаться оно отображается, но совсем не так, как хотелось бы (совсем не так, как получается при написании просто html-кода).
...
Рейтинг: 0 / 0
31.10.2013, 19:06
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38448926
Валисий
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Валисий
Гость
Похоже, подбираюсь к решению проблемы) Посмотрел внимательно в отладчике фаерфокса, и после клика по списку увидел следующее:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
        <div onclick="start()" data-content-theme="b" data-role="collapsible"> … </div>
        <ul>
            <ul id="accnts" data-theme="b" data-role="listview"> … </ul>
            <li>
                <h3 class="ui-li-heading"> … </h3>
                <p class="ui-li-desc"> … </p>
                <p class="ui-li-aside ui-li-desc"> … </p>
            </li>
            <li>
                <h3 class="ui-li-heading"> … </h3>
                <p class="ui-li-desc"> … </p>
                <p class="ui-li-aside ui-li-desc"> … </p>
            </li>
        </ul>



то есть, получается что я ul не загоняю в div, то есть иерархии нет. как бы эту проблему решить? я неправильно использую appendChild?
...
Рейтинг: 0 / 0
31.10.2013, 19:14
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38448935
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
почему в названии топика jQuery
...
Рейтинг: 0 / 0
31.10.2013, 19:32
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38448940
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
$(function() {
    var $coll = $('<div data-role="collapsible" data-content-theme="b" onclick="start()"><div>');
    var $ul = $('<ul data-role="listview" id="accnts" data-theme="b"></ul>');
    $ul.append('<li><h3 class="ui-li-heading">test</h3></li>');
    $ul.append('<li><h3 class="ui-li-heading">test2</h3></li>');
    $coll.append($ul);
    $('#container').append($coll);                  
});

http://jsfiddle.net/Ns59H/

дальше напильником
...
Рейтинг: 0 / 0
31.10.2013, 19:41
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38448942
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
</div>
очепятка во второй строчке
...
Рейтинг: 0 / 0
31.10.2013, 19:45
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38448951
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
" jQuery+Javascript" - очень круто!
...
Рейтинг: 0 / 0
31.10.2013, 20:04
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38448983
beg-in-er
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
beg-in-er
Участник
а вопросик по сабжу

вот есть 2 способа создания элемента

var Div=document.createElement('div');
Div.innerHTML='<div ...... onclick="start()">';
Div.onclick=start()
...
Рейтинг: 0 / 0
31.10.2013, 20:47
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38448989
beg-in-er
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
beg-in-er
Участник
блин , сорвалось

вот есть 2 способа создания элемента

Код: javascript
1.
2.
3.
4.
5.
var Div=document.createElement('div');
Div.innerHTML='<div ...... onclick="start()">';
и
Div.onclick=start() 
Div.style="......";



а)
вопрос чем они отличаются. как бэ что правильнее, что не очень , или монопенисуально
по мне так второй способ лучше.

б)
и насколько кошернее создавать элементы динамически , а не прописывать их изначально в <body>


страница типа выглядит так
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
<html>
<script language="JavaScript" type="text/javascript" src="Init_script.js"></script>
<script> 
   window.onload = function()
   { 
    Init_Page();
   }
</script> 
</html>
...
Рейтинг: 0 / 0
31.10.2013, 20:54
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38448992
Фотография asws
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
asws
Участник
beg-in-er,

имхо через innerHTML быстрее и меньше кроссбраузерных несовместимостей.
...
Рейтинг: 0 / 0
31.10.2013, 21:01
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38448996
Фотография asws
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
asws
Участник
beg-in-er,

имхо по варианту б):
динамическая работа с html-кодом позволяет делать быстрый интерфейс без перезагрузки и сокращать нагрузку на сервер,
например, корзину заказов лучше хранить и считать на клиенте (в localStorage), меняя html динамически,
то-есть сервер не хранит промежуточные списки, а хранит только оформленные заказы.
...
Рейтинг: 0 / 0
31.10.2013, 21:08
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38449009
От веть как
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
От веть как
Гость
Использовать оба вариант нужно по
Необходимости и в зависимости от задачи,
И оба варианта не имеют прямого
Отношения к увеличению или снижению
Нагрузки на сервер :))

Если есть дом элемент, содержащий
Большое количество дочерних
Элементов, то при присвоении inner html
Все рендерится заново, что не всегда оправдано

Нужно разумно и по месту
Использовать оба варианта
...
Рейтинг: 0 / 0
31.10.2013, 21:37
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38449010
Фотография asws
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
asws
Участник
От веть как,

и не поспоришь ведь

А по сабжу вспомнил старое высказывание коллеги - ИТ-шника (не программиста):
"это нельзя сделать на javascript, надо на jquery"
...
Рейтинг: 0 / 0
31.10.2013, 21:41
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38449014
beg-in-er
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
beg-in-er
Участник
От веть как,И оба варианта не имеют прямого
Отношения к увеличению или снижению
почему? если вся черновая работа ложится на клинта, а сервак только данные присылает
...
Рейтинг: 0 / 0
31.10.2013, 21:48
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38449020
Фотография asws
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
asws
Участник
beg-in-erОт веть как,И оба варианта не имеют прямого
Отношения к увеличению или снижению
почему? если вся черновая работа ложится на клинта, а сервак только данные присылаетну здесь надо учитывать, что поисковики надо прикармливать постоянно... так что "серверный" html рулит,
как рулит и то, что одна и та-же инфа (типа корзины или личного кабинета), должны открываться без перехода на новую страницу в "модальном" окне.
...
Рейтинг: 0 / 0
31.10.2013, 21:53
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38449022
От он аякс то
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
От он аякс то
Гость
beg-in-er,

Поэтому я и сказал прямого ))

Можно положить сервер собственными
Аякс реквестами, при этом прося у него
Только данные и яростно используя
При этом inner html ))
...
Рейтинг: 0 / 0
31.10.2013, 21:54
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38449621
Валисий
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Валисий
Гость
Паганель, по поводу напильника: похоже, в нем-то вся и беда. Отображаться оно отображается, но очень некорректно. В результате к списку добавляется элемент типа ul (то есть просто список), а мне нужен виджет библиотеки jQuery Mobile (collapsible). Вот он никак не хочет появиться.
Кстати, поэтому в названии темы присутствует jQuery.
...
Рейтинг: 0 / 0
01.11.2013, 12:07
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38449626
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
гляньте примеры из доки http://jquerymobile.com/demos/1.2.0/docs/content/content-collapsible.html ,
сравните с тем что получается у Вас и найдите различия
...
Рейтинг: 0 / 0
01.11.2013, 12:11
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38449685
Валисий
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Валисий
Гость
Вот что получается у меня (взято из инспектора фаерфокса):

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<div data-content-theme="b" data-theme="b" data-role="collapsible">

    <h3> … </h3>
    <ul data-content-theme="b" data-theme="b" data-role="listview">
        <li>
            <h3 class="ui-li-heading"> … </h3>
            <p class="ui-li-desc"> … </p>
            <p class="ui-li-aside ui-li-desc"> … </p>
        </li>
        <li> … </li>
        <li> … </li>
    </ul>

</div>



А вот что у них:
Код: html
1.
2.
3.
4.
<div data-role="collapsible" data-theme="a" data-content-theme="a">
   <h3>Header swatch A</h3>
   <p>I'm the collapsible content with a themed content block set to "a".</p>
</div>



Разницы особой не наблюдаю (разве что порядок атрибутов, но не думаю, что он существенный).
...
Рейтинг: 0 / 0
01.11.2013, 12:29
| Ответить | Цитировать | Написать  
jQuery+Javascript добавление элемента
    #38449756
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
проведите простейший тест
возьмите их разметку, тупо вставьте себе и посмотрите - будет ли работать
если нет, смотрите, может не те версии js или css...
...
Рейтинг: 0 / 0
01.11.2013, 12:56
| Ответить | Цитировать | Написать  
25 сообщений из 28, страница 1 из 2
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / jQuery+Javascript добавление элемента
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38449626&tid=1447711]:
 0ms
get settings:
 9ms
get forum list:
 17ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 184ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 64ms
get tp. blocked users:
 1ms
others: 245ms
total:  541ms
созд. / загр.: 541ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]