Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / jQuery+Javascript добавление элемента / 25 сообщений из 28, страница 1 из 2
  1  все
31.10.2013, 18:08
    #38448848
Валисий
Валисий
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery+Javascript добавление элемента
Всем добрый день!
Использую библиотеку 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:45
    #38448905
от оно как
от оно как
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery+Javascript добавление элемента
вы создаете в цикле элементы li, и еще в придачу их innerHTML присваиваете li
получаются вложенные друг в друга li

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

ul > div > li > li

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

в том примере, который вы показали вы добавляете li приямо в див
возможно, вы что - то от нас скрывете? ))
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.10.2013, 19:04
    #38448921
Валисий
Валисий
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery+Javascript добавление элемента
виноват, и впрямь скрываю) добавил кое-что. приведу тело функции:
Код: 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:06
    #38448923
Валисий
Валисий
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery+Javascript добавление элемента
напрашивается вопрос: там, где я делаю createElement(div), и пишу ему innerHTML='<div data-role="collapsible"....></div>, я все верно делаю? Это задаст нужные свойства? Потому что отображаться оно отображается, но совсем не так, как хотелось бы (совсем не так, как получается при написании просто html-кода).
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.10.2013, 19:14
    #38448926
Валисий
Валисий
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery+Javascript добавление элемента
Похоже, подбираюсь к решению проблемы) Посмотрел внимательно в отладчике фаерфокса, и после клика по списку увидел следующее:
Код: 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:32
    #38448935
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery+Javascript добавление элемента
почему в названии топика jQuery
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.10.2013, 19:41
    #38448940
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery+Javascript добавление элемента
Код: 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:45
    #38448942
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery+Javascript добавление элемента
</div>
очепятка во второй строчке
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.10.2013, 20:04
    #38448951
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery+Javascript добавление элемента
" jQuery+Javascript" - очень круто!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.10.2013, 20:47
    #38448983
beg-in-er
beg-in-er
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery+Javascript добавление элемента
а вопросик по сабжу

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

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

вот есть 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, 21:01
    #38448992
asws
asws
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery+Javascript добавление элемента
beg-in-er,

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

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

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

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

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

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

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

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

Код: 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:56
    #38449756
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery+Javascript добавление элемента
проведите простейший тест
возьмите их разметку, тупо вставьте себе и посмотрите - будет ли работать
если нет, смотрите, может не те версии js или css...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / jQuery+Javascript добавление элемента / 25 сообщений из 28, страница 1 из 2
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 477ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1447711]:
 0ms
get settings:
 7ms
get forum list:
 12ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 154ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 80ms
get tp. blocked users:
 2ms
others: 203ms
total:  477ms
x
x
Закрыть


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