Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.70/23: Рейтинг темы: голосов - 23, средняя оценка - 4.70
 Аватар для RedMirage
21 / 21 / 1
Регистрация: 28.12.2009
Сообщений: 195

Передача данных из динамических div

17.02.2010, 17:32. Показов 4800. Ответов 12
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте! Постраничная навигация. Работает. Динамически в цикле while создаются div id=catalog. Хочу сделать, чтобы по клику по выбранному div появлялся div с расширенной информацией этого дива. Сейчас работает так: клацаю по нужному диву, отображается информация только первого дива на странице. Как передать результаты запроса из созданных в цикле div, в div, который бы появляся при клике по выбранному div?
P. S. Хотел сделать плавно всплывающий div, та же проблема, всплывает div с информацией из первого на странице, а не того по которму клацнули.
PHP/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
<?
$num = 15;
$page = $_GET['page'];
$result = mysql_query("SELECT COUNT(*) FROM plitka");
$posts = mysql_result($result, 0, 0);
$total = intval(($posts - 1) / $num) + 1;
$page = intval($page);
if(empty($page) or $page < 0) $page = 1;
if($page > $total) $page = $total;
$start = $page * $num - $num;
$result = mysql_query("SELECT * FROM plitka LIMIT $start, $num");
while ( $postrow = @mysql_fetch_array($result))
{
?>
<div id="catalog" onClick="clickText()">
<?
echo "<img class='plitka' src=".$postrow['url_plitka']."><br>".$postrow['collection']."<br> ".$postrow['name_plitka']."<br>".$postrow['HxWxT'];
?>
</div>
<script>
function clickText()
{
obj_div=document.getElementById("catalog1");
if (obj_div.style.display=="block")
obj_div.style.display="none";
else
obj_div.style.display="block";
}
</script>
<div id="catalog1" style="display:none; z-index:1;">
<?
   echo "<img class='plitka' src=".$postrow['url_plitka']."><br>".$postrow['collection']."<br> ".$postrow['name_plitka']."<br>".$postrow['HxWxT']."<br>".$postrow['price']."<br>".$postrow['manufactured'];
?>
</div>
<?
}
?>
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
17.02.2010, 17:32
Ответы с готовыми решениями:

Передача из View в Controllers динамических данных
Здравствуйте! У меня получается получить статические данные &quot;formHead&quot;, но не получается контроллером получить данные с динамично...

Передача динамических данных с сервера на клиент по TCP/IP
Как только не гуглил, никак не могу найти пример реализации или что-то в этом роде. Требуется написать простенькое клиент-серверное...

Передача динамических переменных
Выводим n-раз на страницу выпадающие списки. &lt;form&gt; for($i=0;$i&lt;n-раз;$i++) { &lt;select...

12
 Аватар для cooperOk
60 / 60 / 6
Регистрация: 12.11.2009
Сообщений: 169
17.02.2010, 18:27
Скорее всего что id должен быть уникальным, а так как он для всех одинкаовый то берется именно первый. А вообще лучше передавать в функцию this и проверять стиль объекта.

т.е.

HTML5
1
<div id="catalog" onClick="clickText(this)">
JavaScript
1
2
3
4
5
6
<script>
function clickText(el)
{
el.style.display=="block" ? el.style.display="none" : el.style.display="block";
}
</script>
0
 Аватар для RedMirage
21 / 21 / 1
Регистрация: 28.12.2009
Сообщений: 195
18.02.2010, 00:29  [ТС]
Эммм... у меня в бд будет 11 000 позиций, для каждого из 11 000 div делать уникальный id, пусть даже автоматически, а как быть с CSS, там для каждого id прописывать стили? Спасибо за совет. Но это не решение. Нужно сделать так, чтобы данные из дива, по которому я кликаю передавались в открывающийся див. А сейчас данные передаются в открывающийся див из первого на странице дива.

Добавлено через 5 часов 36 минут
В общем суть. У каждого клика должен быть типа уникального id. Я клацаю по диву, и передаются данные в всплывающий див из этого (по которому клацнул). А вот как это реализовать?...
0
 Аватар для cooperOk
60 / 60 / 6
Регистрация: 12.11.2009
Сообщений: 169
18.02.2010, 11:01
Ну вот набросал тут кое что. Подходит?

HTML5
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc1/jquery-1.4.1.js"></script>
    <style type="text/css">
    #catalog{
        width: 200px;
        padding: 10px;
        border: 1px solid #000;
    }
    #container{
        position: absolute;
        width: 200px;
        height: 200px;
        border: 1px solid #999;
        left: 250px;
        top: 10px;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function(){
        $("div#catalog").click(function(){
            if($("div#catalog:hidden"))
            {
                $("div#catalog").show();
            }
            if($(this).css('display')=='block')
            {
                $(this).hide();
                $("#container").text($(this).text());
            }
        });
    });
    </script>
</head>
<body>  
 
<div id="catalog">text1</div>
<div id="catalog">text2</div>
<div id="catalog">text3</div>
<div id="catalog">text4</div>
<div id="catalog">text5</div>
 
<div id="container"></div>
 
</body>
</html>
0
 Аватар для RedMirage
21 / 21 / 1
Регистрация: 28.12.2009
Сообщений: 195
18.02.2010, 20:56  [ТС]
HTML5
1
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc1/jquery-1.4.1.js"></script>
А за что эта строчка отвечает?

Ну как-то так. Спасибо большое. Но не подходит. Скрипт после той строчки, которая мне не понятна (пожалуйста объясните мне: что она делает и для чего, зачем jquery?), типичный. Я подобный использовал, только без строчки выше этого скрипта. Проблема в том, что мне не нужно передавать текст, мне нужно передавать результат запроса. Чтобы пропадал див тоже не нужно, но это можно исправить. Проблема в том как сделать клик уникальным для каждого дива, чтобы открывался новый див с результатом запроса того дива по которому клацнули.

cooperOk, спасибо вам.

Добавлено через 41 секунду
Короче, я завис и думаю...

Добавлено через 16 минут
Понял, ужас... за что jquery отвечает?
0
 Аватар для cooperOk
60 / 60 / 6
Регистрация: 12.11.2009
Сообщений: 169
19.02.2010, 00:06
jQuery это библиотека javascript.
0
 Аватар для RedMirage
21 / 21 / 1
Регистрация: 28.12.2009
Сообщений: 195
23.02.2010, 23:58  [ТС]
Не работает.
0
 Аватар для RedMirage
21 / 21 / 1
Регистрация: 28.12.2009
Сообщений: 195
09.03.2010, 00:08  [ТС]
А если в цикле задавать id у блока div. Примерно так id="bloki" где i изменяется от одного до 15 (количество отображений на одной странице). И впихнуть кнопку. Работать будет?

Добавлено через 1 час 41 минуту
Может я изначально не так что-то сделал? Всё равно не получается. Помогите, пожалуйста.
0
 Аватар для cooperOk
60 / 60 / 6
Регистрация: 12.11.2009
Сообщений: 169
09.03.2010, 01:34
Не силен в базах, но тут возникла мысль. Если ты берешь информацию о диве из бд, то почему бы не хранить там же id дива (например по ключевому полю), тогда и при создании их будет все проще, и выбирать будет легче... Только вот не знаю на сколько это все будет загружать серв
1
 Аватар для RedMirage
21 / 21 / 1
Регистрация: 28.12.2009
Сообщений: 195
09.03.2010, 12:10  [ТС]
Не плохая мысля. Только теперь нужно мне понять. Информацию о диве я не храню в базе. Содержимое дива у меня заполняется с помощью запроса и данные соответсвенно из базы. Все параметры дива я прописал в css. А теперь твоя идея... Я правильно понял? ID дива я храню в базе и потом вывожу в див. И получается, что у меня див с уникальным айди. Такая идея? Вот только загвоздка... сейчас в базе у меня около 500 позиций, получается 500 уникальных айди. Допустим я пропишу стили этих дивов как-нибудь с помощью скрипта... но этих позиций и соответсвенно дивов у меня в будущем будет около 5000. Блин, мне кажется есть проще путь. В сети огромное количество примеров всплывающих дивов, вот только чтбы они всплывали с инфой родителя, когда родитель сформирован динамически я не встречал... Сегодня пойду у препода по программированию спрошу, надеюсь поможет... У меня уже руки опускаются.
0
 Аватар для cooperOk
60 / 60 / 6
Регистрация: 12.11.2009
Сообщений: 169
09.03.2010, 16:45
Ну стиль для дива можно указать через class. Т.е. дивы у тебя будут примерно такие
<div class="block" id="block1">...</div>
<div class="block" id="block2">...</div>

Ну да, идея в уникальном ID.
1
 Аватар для RedMirage
21 / 21 / 1
Регистрация: 28.12.2009
Сообщений: 195
09.03.2010, 17:08  [ТС]
cooperOk, спасибо за идею. Сейчас буду реализовывать. Меня тут научили как это делать. По ходу твоя идея и есть решение. Как сделаю отпишу здесь о результатах.
0
 Аватар для RedMirage
21 / 21 / 1
Регистрация: 28.12.2009
Сообщений: 195
17.03.2010, 01:21  [ТС]
Всё сделал. Работает. В ie 7 небольшие проблемы с позиционированием блока.
PHP
1
2
3
4
while ( $postrow = @mysql_fetch_array($result))
{
$n=$postrow['id_plitka'];
?>
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.closeButton
{
    position: absolute;
    top: 0px;
    right: 0px;
    border-bottom: 1px solid gray;
    border-left: 1px solid gray;
    font-weight: bold;
    cursor: pointer;
    padding: 2px 4px 2px 4px;
}
</style>
Java
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
51
52
53
54
55
56
57
58
59
60
61
62
<script language="JavaScript" type="text/javascript">
var wObj; // переменная которая хранит div-который в данный момент проявляется
var sTimeout = 30; // через сколько вызывать следущую итерацию по уменьшению прозрачности (мс)
var op; // переменная отвечающая за текущую прозрачность
function AppearDivWnd() // ф-я которая проявляет объект (div-окно) хранящееся в переменно wObj
{
    if(op < 1)
    {
        op += 0.1;
        wObj.style.opacity = op;
        wObj.style.filter='alpha(opacity='+op*100+')';
        t = setTimeout('AppearDivWnd()', sTimeout);
    }
}
// ф-я получает на вход div-окно заносит его в переменную wObj и вызывает ф-ю AppearDivWnd() для того что бу его проявить
function AppearDivWndX(div)
{
    wObj = div; // присваеваем див-окно так как AppearDivWnd работает именно с wObj
    op   = 0; // начальная прозрачность 0
    wObj.style.opacity = 0; // начальная прозрачность 0
    wObj.style.display = 'block'; // окно стало видемым
    AppearDivWnd(); // начинаем его плавно проявлять...
 
}
function position()
{ var jam=div;
  div.style.top=div.offsetHeight + "px";
}
function ZDivWndClose(div)
{ div.style.display='none'; }
 
var flag=false;
var shift_x;
var shift_y;
 
function start_drag(itemToMove,e){
if(!e) e = window.event;
flag=true;
shift_x = e.clientX-parseInt(itemToMove.style.left);
shift_y = e.clientY-parseInt(itemToMove.style.top);
 
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
if(e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
 
function end_drag(){ flag=false; }
 
 
function dragIt(itemToMove,e){
if(!flag) return;
if(!e) e = window.event;
itemToMove.style.left = (e.clientX-shift_x) + "px";
itemToMove.style.top = (e.clientY-shift_y) + "px";
 
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
if(e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
</script>
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="<? echo $n; ?>" class="catalog"><?
echo "<img class='plitka' src=".$postrow['url_plitka']."><br>Коллекция: ".$postrow['collection']."<br>Название: ".$postrow['name_plitka']."<br>ШхВхТ (мм): ".$postrow['WxHxT']."<br>";
?>
<br><input class="but" type="button" value="подробнее" onclick="AppearDivWndX(document.getElementById('<? echo $n;?>skrit'));" />
<?
echo "</div>";
?>
<div  id="<? echo $n; ?>skrit" title="удерживайте нажатой левую клавишу, чтобы перетащить" style="min-width: 400px; width:auto !important; width:400px; left:100px; top: 2px; position:fixed; //position: absolute;  top: expression(parseInt( document.documentElement.scrollTop, 10) + 'px');  float: left; min-height:400px; height:auto !important; height:400px; border: 1px solid gray; background: #2F2E2E; display: none; text-align: center; z-index:1; line-height:16pt;" onMouseDown="start_drag(this,event)" onMouseUp="end_drag()" onMouseMove="dragIt(this,event)">
<div class="closeButton" onclick="ZDivWndClose(document.getElementById('<? echo $n;?>skrit'));">закрыть</div><br>
<?
echo "<br><img src=".$postrow['url_plitka']."><br>";
if ($postrow['cover']=="0") echo "облицовочная"; else echo "напольная";
echo "<br>Коллекция: ".$postrow['collection']."<br>Название: ".$postrow['name_plitka']."<br>ШхВхТ (мм): ".$postrow['WxHxT']."<br><b>Цена: ".$postrow['price']." руб.</b>";
if ($postrow['orient']=="декор" or $postrow['orient']=="бордюр" or $postrow['orient']=="карандаш") echo "<b>/шт.</b>"; else echo "<b>/м кв.</b><br>";
echo "Поверхность: ".$postrow['type_cover']."<br>Производитель: ".$postrow['manufactured']."<br>Применение: ".$postrow['room']."<br>";
echo "</div>";
?>
<?
}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
17.03.2010, 01:21
Помогаю со студенческими работами здесь

Передача динамических матриц в функцию
Здравствуйте, ребята! У меня очень простой вопрос. Я работаю с очень большими матрицами. Они создаются в куче: const N =...

Передача динамических параметров в функцию
Необходимо реализовать функцию которая принимает на вход ячейки, причем это может быть произвольное количество ячеек, и они могут быть как...

Передача динамических массивов в функции
Требования:Программа должна демонстрировать два варианта доступа к элементам массивов во вспомогательной функции: с помощью приведенного...

Передача динамических массивов в функции. А точнее отдельных частей
Вопрос до жути простой, но мне не понять. К примеру я хочу передать в функцию отдельно одну строку, сумму элементов которой мне надо...

Передача двух переменных в запрос к БД при работе динамических селектов
Привет всем! Есть динамические селекты, вот JS: $(document).ready(function () { $('#AAA').change(function () { var AAA =...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
13
Ответ Создать тему
Новые блоги и статьи
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru