Я разрабатываю сайт WordPress MU с форумом PHPBB3, который объединен с сайтом. На веб-сайте есть страница, которая использует SimpleModal OSX Style Modal Dialog, который запрашивает некоторые данные пользователей сайта. Я также использую плагин, который позволяет создавать пользовательскую метаинформацию для каждого пользователя под названием Cimy User Extra Fields . Прежде чем я углубится в детали проблемы, я хочу убедиться, что полностью согласен с моим объяснением, поскольку, по-видимому, я не был раньше.
На проблему ……….
Проблема заключается в том, что на странице, которая использует функцию jQquery модального стиля OSD Style Modal Dialog . На этой странице он запрашивает данные пользователей веб-сайтов и проходит через секцию Foreach в PHP; отображение данных на странице в столбцах div. Часть кода, использующая SimpleModal OSX Style Modal Dialog , отображается как кнопка рядом с каждым пользователем, указанным в столбцах.
Когда вы нажимаете кнопку, которая активирует окно Modal; внутри этого модального окна есть метаданные для этого пользователя. Данные, хранящиеся в каждом модальном окне, должны соответствовать каждому пользователю. Вместо этого он отображает только данные для первого пользователя, который он находит в системе, во всех модальных окнах на странице.
Первоначально я запускал функцию через цикл foreach, и результирующие данные, которые хранятся в окнах MODAL, являются одними и теми же данными, а не уникальными для каждого пользователя, которые выполняют запросы функций из базы данных.
Пример состоит в том, что на веб-сайте 10 пользователей, поэтому цикл foreach возвращает 4 пользователей на этой странице, перечисленных в столбцах. Здесь вы можете увидеть визуальное представление.
Если вы просматриваете страницу, вы увидите, что в списке указано 4 пользователя. Для каждого пользователя он отображает их изображение Avatar, Display Name, Rank, кнопку для просмотра toons, кнопку вызова и ссылку для отправки им по электронной почте. Кнопка View Toons – это проблема.
Как я уже говорил выше, он отображал одни и те же данные в модальном окне снова и снова для каждой кнопки, а не уникальные данные для каждого пользователя. С помощью бабы он дал мне пощечину в момент лба с тем, что было не так со сценарием. К сожалению, я не мог заставить его работать. Извините, Баба не совсем уверен, что я делаю неправильно. Я пошел с другим подходом, который я «почувствовал», может быть, проще для моего начинающего ума.
Как сказал Баба, проблема заключается в том, что Javascript ищет конкретный идентификатор для вызова сценария, который создает модальное окно. Поскольку это цикл foreach, то в моем текущем случае он повторяет кнопку View Toons 4x. Таким образом, у нас есть 4 кнопки, которые при нажатии будут отображаться в окне Modal с метаданными, хранящимися внутри. При нажатии этих 4 кнопок одни и те же данные отображаются во всех четырех. Итак, решение? Нам нужно рандомизировать идентификатор каждой кнопки, и функция jquery сможет распознать, что она должна активироваться на каждой из этих кнопок.
Я потратил пару часов, пытаясь использовать идею Бабы и не мог заставить ее работать. Таким образом, я вырыл еще глубже в сети и наткнулся на этот вопрос / ответ на stackoverflow, который вы можете просмотреть здесь . Та же самая проблема, с которой я столкнулся, и ответ был предоставлен разработчиком SimpleModal. Единственная проблема заключалась в том, что ответ основывался на уже существующих идентификаторах, а не на идентификаторах, которые автоматически создавались в цикле …..
Мое решение …….
Мне нужен способ генерации случайной строки чисел и букв. Я нашел это решение здесь . Как я реализовал его в своем коде:
<?php $n = rand(10e16, 10e20); $x = base_convert($n, 10, 36); ?> Теперь, когда у меня было это случайное строковое поколение, работающее в коде, мне нужен был способ, чтобы функция JQuery могла распознавать эти идентификаторы с помощью строки radom чисел и букв. Мне нужен шаблон … Это то, что я использовал:
$("[id^=osx-modal-content]").modal({
С этим я думал, что это сработает! Это не …
Как ни странно, это было действительно странно, что я не уверен, что могу хорошо писать в письменной форме, и было бы намного лучше, если бы вы визуально посмотрели, что он производит, когда я пытаюсь объяснить это. Вы можете просмотреть страницу здесь .
Таким образом, эти маленькие красные символы x появляются под каждой кнопкой View. Эти маленькие красные символы x представляют эту часть кода:
<div id="osx-modal-content<?php echo $x;?>">
Ах! это div, которые содержат метаданные в каждом модальном окне. Почему красный x появляется, я понятия не имею. Что еще более странно, когда вы нажимаете любую из 4 кнопок View. Модальное окно не только полностью расширяется, но и похоже на дверь гаража, которая стала одержимой. Он немного понижается, а затем возвращается обратно. В процессе его сползания вы также не видите метаданные. Это может быть связано с тем, что модальное окно не полностью расширяется.
Затем возникает другая проблема после нажатия кнопки просмотра. Эти маленькие красные x, которые появляются под каждой кнопкой Toon, перемещаются непосредственно под первой кнопкой просмотра View. Теперь DIV.ID для osx-модального контента (случайная строка), который я перечислял выше. Все четыре из этих разделов теперь находятся под первой кнопкой просмотра. WTH ???
Вот где я нахожусь у ребят. Надеюсь, я нахожусь на правильном пути с этим кодом, и мне жаль, что Баба не смог заставить ваше решение работать, и я надеюсь, что для этого достаточно информации для вас, других парней, которые хотят помочь понять, что я делаю.
================================================== ========================================================================================================================================================================================================================= , Я посмотрел в таблицах стилей и заметил эту строку кода:
#osx-modal-content, #osx-modal-data {display:none;}
Поскольку я добавляю случайные буквенно-цифровые строки в конце # osx-modal-content. Он не регистрировал стиль отображения: none. Я добавил это в код:
<div id="osx-modal-content<?php echo $x;?>" style="display:none">
Это заставило этих призрачных маленьких красных х исчезнуть. Спасибо за это! В настоящее время я пытаюсь изменить DIV их соответствующие идентификаторы / классы, которые находятся в цикле, – чтобы узнать, изменит ли это.
Обновление 2 : я изменил строку 18 в функции jquery, которая была оригинальной:
$("osx").click(function (e) {
к этому:
$("[id^=osx]").click(function (e) {
Это вызвало безумный, одержимый эффект гаражных ворот, чтобы остановиться. Теперь он отображается и отображает метаинформацию для каждого пользователя. Однако, когда вы нажимаете кнопку View toon, в настоящее время отображается только информация обо всех пользователях метаинформации, а не только выбранный «пользователь». Кроме того, когда вы нажимаете на каждую из кнопок, они перечисляют пользователей в порядке ASC на основе этого идентификационного номера пользователя.
Обновление 3 : Я почти уверен, проблема в том, почему окно Modal отображает всю информацию о пользователях из-за настройки, которую я настраиваю. Он открывается на основе любого div, который начинается с osx-модального контента, который заставит его отображать информацию о каждой из пользователей. Мне нужно другое решение для функции jquery.
Те из вас, кто готов взглянуть на это и помочь мне. Я перечислил полный код, функцию запроса и функцию JQuery ниже:
Пользовательская функция для запроса метаданных пользователей сайта:
<?php function roster() { $members = get_users('blog_id=15&exclude=array(1)'); foreach ($members as $user) { $item['login'] = $user->display_name; $item['email'] = $user->user_email; $item['picture'] = get_cimyFieldValue($user->ID, 'picture'); $item['rank'] = get_cimyFieldValue($user->ID, 'guild_rank'); $item['game'] = get_cimyFieldValue($user->ID, 'game'); $item['avatar'] = get_cimyFieldValue($user->ID, 'avatar'); $item['toon_name'] = get_cimyFieldValue($user->ID, 'character_name'); $item['faction'] = get_cimyFieldValue($user->ID, 'faction'); $item['class'] = get_cimyFieldValue($user->ID, 'class'); $item['role'] = get_cimyFieldValue($user->ID, 'role'); } unset($members); return $ret; } ?>не<?php function roster() { $members = get_users('blog_id=15&exclude=array(1)'); foreach ($members as $user) { $item['login'] = $user->display_name; $item['email'] = $user->user_email; $item['picture'] = get_cimyFieldValue($user->ID, 'picture'); $item['rank'] = get_cimyFieldValue($user->ID, 'guild_rank'); $item['game'] = get_cimyFieldValue($user->ID, 'game'); $item['avatar'] = get_cimyFieldValue($user->ID, 'avatar'); $item['toon_name'] = get_cimyFieldValue($user->ID, 'character_name'); $item['faction'] = get_cimyFieldValue($user->ID, 'faction'); $item['class'] = get_cimyFieldValue($user->ID, 'class'); $item['role'] = get_cimyFieldValue($user->ID, 'role'); } unset($members); return $ret; } ?>
Loop для каждого пользователя, вызываемого из функции:
<?php $ret = roster(); if ( ! empty($ret)) { foreach($ret as $v) { ?> <div id = "roster_container"> <div id="left_col"> <div id="first_left_col"> <h4>Avatar</h4> <?php echo '<li><img src="' . $v['picture'] . '" alt="" /></li>';?> </div> <div id="second_left_col"> <h4>Username</h4> <?php echo '<li>' . $v['login'] . '</li>';?> </div> <div id="third_left_col"> <h4>Rank</h4> <?php echo '<li>' . $v['rank'] . '</li>';?> </div> </div> <div id="right_col"> <div id="first_right_col"> <h4>Toons</h4> <li> <div id='osx-modal'> <?php $n = rand(10e16, 10e20); $x = base_convert($n, 10, 36); ?> <input type="button" name="osx<?php echo $x;?>" value="View" class="osx<?php echo $x;?>" id="osx<?php echo $x;?>"/> </div> <div id="osx-modal-content<?php echo $x;?>" style="display:none;"> <div class="close"><a href="#" class="simplemodal-close">x</a></div> <div id="osx-modal-data"> <div id="toon_title">Game Characters</div> <div id="toon_game"> <?php echo '<h3>' . $v['game'] . '</h3>';?> </div> <div id="toon_box"> <div id="toon_name"><?php echo $v['toon_name'];?></div> <div id="toon_avatar"><?php echo '<img src="' . $v['avatar'] . '" alt="" />';?></div> <div id="toon_faction"><?php echo $v['faction'];?></div> <div id="toon_class"><?php echo $v['class'];?></div> <div id="toon_role"><?php echo $v['role'];?></div> </div> <p><button class="simplemodal-close">Close</button></p> </div> </div> </li> </div> <div id="second_right_col"> <h4>Challenge</h4> <?php echo '<li><a href="#" class="CHALLENGE">Challenge</a></li>';?> </div> <div id="third_right_col"> <h4>Email</h4> <?php echo '<li><a href="mailto:' . $v['email'] . '"><img src="http://img.ruphp.com/php/email-icon." style="height:15px;width:20px;margin-top:5px;margin-left:7px;"></a></li>';?> </div> </div> </div> <?php } } ?>
И, наконец, SimpleModal OSX Style Modal Dialog JQuery:
/* * SimpleModal OSX Style Modal Dialog * http://www.ericmmartin.com/projects/simplemodal/ * http://code.google.com/p/simplemodal/ * * Copyright (c) 2010 Eric Martin - http://ericmmartin.com * * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php * * Revision: $Id: osx.js 238 2010-03-11 05:56:57Z emartin24 $ */ jQuery(function ($) { var OSX = { container: null, init: function () { $("[id^=osx]").click(function (e) { e.preventDefault(); $("[id^=osx-modal-content]").modal({ overlayId: 'osx-overlay', containerId: 'osx-container', closeHTML: null, minHeight: 80, opacity: 65, position: ['0',], overlayClose: true, onOpen: OSX.open, onClose: OSX.close }); }); }, open: function (d) { var self = this; self.container = d.container[0]; d.overlay.fadeIn('slow', function () { $("[id^=osx-modal-content]", self.container).show(); var title = $("#osx-modal-title", self.container); title.show(); d.container.slideDown('slow', function () { setTimeout(function () { var h = $("#osx-modal-data", self.container).height() + title.height() + 20; // padding d.container.animate( {height: h}, 200, function () { $("div.close", self.container).show(); $("#osx-modal-data", self.container).show(); } ); }, 300); }); }) }, close: function (d) { var self = this; // this = SimpleModal object d.container.animate( {top:"-" + (d.container.height() + 20)}, 500, function () { self.close(); // or $.modal.close(); } ); } }; OSX.init(); });