Ich entwickle auf einem Wordpress MU Website mit einem PHPBB3 Forum, das in der Website zusammengeführt wird. Auf der Website gibt es eine Seite, die SimpleModal OSX Style Modal Dialog verwendet, die einige Daten der Website-Benutzer abfragt. Ich benutze auch ein Plugin, mit dem Sie benutzerdefinierte Meta-Informationen für jeden Benutzer Cimy User Extra Felder erstellen können. Bevor ich auf das Problem eingehe, möchte ich sicherstellen, dass ich mit meiner Erklärung gründlich bin, wie ich es vorher nicht war.Bizarre SimpleMODAL OSX Aktionen in Foreach Loop
Auf das Problem ..........
Das Problem liegt in der Tatsache, dass auf der Seite, die die SimpleModal OSX Stil Modal Dialog jquery Funktion nutzt. Auf dieser Seite werden die Daten der Benutzer der Website abgefragt und eine Foreach-Sequenz in PHP durchlaufen. Anzeigen der Daten auf der Seite innerhalb der Div-Spalten. Der Teil des Codes, der das SimpleModal OSX Style Modal-Dialogfeld verwendet, wird als Schaltfläche neben jedem Benutzer angezeigt, der in den Spalten aufgeführt ist.
Wenn Sie auf die Schaltfläche klicken, die das Modal-Fenster aktiviert; Innerhalb dieses modalen Fensters befinden sich die Metadaten für diesen Benutzer. Die in jedem modalen Fenster gespeicherten Daten sollen zu jedem Benutzer passen. Stattdessen werden nur die Daten für den ersten Benutzer angezeigt, der über alle modalen Fenster auf der Seite im System gefunden wird.
Ursprünglich hatte ich die Funktion durch eine foreach-Schleife ausgeführt und die resultierenden Daten, die in den MODAL-Fenstern gespeichert werden, sind die gleichen Daten - anstatt für jeden einzelnen Benutzer ist die Funktion Abfragen von der Datenbank.
Ein Beispiel wäre, dass es 10 Benutzer auf der Website gibt und die foreach-Schleife also 4 Benutzer auf dieser Seite innerhalb von Spalten zurückgeben würde. Sie können eine visuelle Darstellung here sehen.
Wenn Sie auf die Seite schauen, werden Sie sehen, dass 4 Benutzer aufgelistet sind. Für jeden Benutzer wird sein Avatar-Bild, Anzeigename, Rang, eine Schaltfläche zum Anzeigen von Toons, eine Challenge-Schaltfläche und ein Link zum Versenden der E-Mails angezeigt. Die Schaltfläche Toons anzeigen ist das Problem.
Wie oben erwähnt, hat es im modalen Fenster immer wieder dieselben Daten für jede Schaltfläche angezeigt - anstatt dass diese Daten für jeden Benutzer eindeutig sind. Mit Hilfe von baba gab er mir den Schlag auf den Stirnmoment mit dem, was mit dem Drehbuch nicht stimmte. Leider konnte ich es nicht zur Arbeit bringen. Tut mir leid, Baba nicht ganz sicher, was ich falsch mache. Ich ging mit einem anderen Ansatz, den ich "gefühlt" habe, vielleicht eine leichtere Lösung für meinen Anfänger Geist.
Wie Baba erwähnt hat, liegt das Problem in der Tatsache, dass das Javascript nach einer bestimmten ID sucht, um das Skript aufzurufen, das das modale Fenster erstellt. Da dies eine foreach-Schleife ist, wiederholt es in meinem aktuellen Fall die Schaltfläche View Toons 4x. Somit haben wir 4 Schaltflächen, die, wenn sie gedrückt werden, ein Modal-Fenster mit darin gespeicherten Metadaten öffnen. Wenn diese 4 Schaltflächen angeklickt werden, wurden die gleichen Daten in allen vier angezeigt. Also, die Lösung? Wir müssen die ID jedes Buttons zufällig randomisieren und die Jquery-Funktion erkennen, dass sie auf jedem dieser Buttons aktiviert werden muss.
Ich verbrachte ein paar Stunden damit, Babas Idee zu nutzen und konnte sie nicht zur Arbeit bringen. Also habe ich noch tiefer im Netz gegraben und bin über diese Frage/Antwort auf Stackoverflow gestolpert. here. Das genau gleiche Problem, das ich hatte und die Antwort wurde vom Entwickler von SimpleModal zur Verfügung gestellt.Das einzige Problem war, dass die Antwort auf ids beruhte, die bereits existierten und nicht-IDs, die innerhalb einer Schleife automatisch erstellt werden würde .....
Meine Lösung .......
ich brauchte Möglichkeit, eine zufällige Zeichenfolge aus Zahlen und Buchstaben zu generieren. Ich fand diese Lösung here. Wie ich es in meinen Code implementiert:
<?php
$n = rand(10e16, 10e20);
$x = base_convert($n, 10, 36);
?>
Nun, da ich diese zufällige Zeichenfolge Generation im Code arbeiten hatte, habe ich einen Weg für die JQuery-Funktion notwendig, um diese IDs mit der Radom Zahlenfolge erkennen zu können und Briefe. Ich brauchte eine Wildcard ..... Dies ist, was ich verwendet habe:
$("[id^=osx-modal-content]").modal({
Damit dachte ich sicher, es würde funktionieren! Es hat nicht ......
Seltsamerweise hat es wirklich seltsame Dinge, die ich nicht sicher bin, kann ich gut schriftlich erklären und es wäre viel besser, wenn Sie visuell sehen, was es produziert, wie ich es versuche und erkläre es. Sie können die Seite here anzeigen.
Also diese kleinen roten x Zeichen erscheinen unter jeder Ansicht-Taste. Diese kleinen roten X-Zeichen stellen diesen Teil des Codes dar:
<div id="osx-modal-content<?php echo $x;?>">
Ah! Dies sind die Divs, die die Metadaten in jedem modalen Fenster enthalten. Warum das rote x erscheint, habe ich keine Ahnung. Was noch seltsamer ist, wenn Sie auf einen der 4 View Buttons klicken. Nicht nur das modale Fenster wird nicht vollständig ausgefahren, sondern es ist wie ein Garagentor, das besessen ist. Es kommt ein bisschen runter und geht dann wieder hoch. Während es nach unten rutscht, können Sie auch die Metadaten nicht sehen. Dies liegt möglicherweise an der Tatsache, dass das modale Fenster jedoch nicht vollständig expandiert.
Dann tritt ein weiteres Problem auf, nachdem Sie auf die Schaltfläche "Ansicht zu" geklickt haben. Die kleinen roten X, die unter jedem Toon-Button erscheinen, positionieren sich direkt unter dem ersten View toon-Button. Jetzt die DIV.ID für osx-modal-content (zufällige Zeichenfolge), die ich oben aufgelistet habe. Alle vier dieser Divs befinden sich jetzt unter der ersten View toon-Schaltfläche. WTH ???
Dort bin ich bei Jungs. Ich hoffe, ich bin mit diesem Code auf dem richtigen Weg und es tut mir leid, Baba, ich konnte deine Lösung nicht zur Arbeit bringen und ich hoffe, dass dies genug Informationen für dich sind, die bereit sind zu helfen, zu verstehen, was ich tue.
============================================== =============================== Update: Als Point erwähnt, dass ich IDs in verwenden eine Schleife, wenn es Klassen sein soll, sah ich in dem Stylesheets und bemerkte diese Codezeile:
#osx-modal-content, #osx-modal-data {display:none;}
Da ich zufällig alphanumerical Strings am Ende # osx-modal-Gehalts am addieren. Der Stil für die Anzeige wurde nicht registriert: Keine. Ich habe diese auf den Code:
<div id="osx-modal-content<?php echo $x;?>" style="display:none">
Das die lästige kleine rote xs verschwinden lassen. Danke für diesen Pointy! Ich bin gerade dabei, zu versuchen, die DIVs ihre passende ID/Klassen zu ändern, die innerhalb der Schleife sind - um zu sehen, ob das einen Unterschied machen wird.
Update 2: Ich änderte Linie 18 in der jQuery-Funktion, die dies war originall:
$("osx").click(function (e) {
dazu:
$("[id^=osx]").click(function (e) {
Dies ist die verrückt verursacht, besaß Garagentor Wirkung zu stoppen . Es gleitet jetzt heraus und zeigt die Metainformationen für jeden Benutzer an. Wenn Sie jedoch auf die Schaltfläche View toon klicken, werden jetzt ALLE Benutzer-Meta-Informationen in der Box angezeigt, anstatt nur den ausgewählten "Benutzer". Wenn Sie auf die einzelnen Schaltflächen klicken, werden die Benutzer in ASC-Reihenfolge basierend auf dieser Benutzer-ID aufgelistet.
Update 3: Ich bin fast das Problem mit, warum das Modal-Fenster zeigt alle Benutzer Informationen ist wegen der Wildcard ich eingerichtet. Es öffnet sich basierend auf jedem Div, das mit osx-modal-content beginnt, was dazu führt, dass es die Meta-Informationen jedes Benutzers anzeigt. Ich brauche eine andere Lösung für die Jquery-Funktion.
Diejenigen von euch, die bereit sind, einen Blick darauf zu werfen und mir zu helfen. Ich habe den vollständigen Code, Abfrage-Funktion und JQuery-Funktion im Folgenden aufgeführt:
Die benutzerdefinierte Funktion den Nutzern dieser Website Meta-Daten abfragen:
<?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;
}
?>
The Loop für jeden Benutzer aus der Funktion:
<?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://conspirators.websitedesignbyneo.com/wp-content/themes/conspirators/css/dark-red/img/email-icon.gif" style="height:15px;width:20px;margin-top:5px;margin-left:7px;"></a></li>';?>
</div>
</div>
</div>
<?php
}
}
?>
und schließlich der SimpleModal OSX Art modaler 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();
});
ein Problem: eine bestimmte „id“ string nur ** einmal verwendet werden müssen ** auf einer Seite. Das heißt, das Attribut "id" jedes Elements sollte ** eindeutig ** sein. Sie erstellen HTML in einer Schleife und verwenden dieselben "ID" -Werte immer und immer wieder. – Pointy
Vielleicht möchten Sie Ihre Frage ein wenig trimmen. Natürlich sind Details gut, aber vieles von dem, was Sie hier gepostet haben, ist narrativ und nicht besonders relevant für das vorliegende Problem. Der dritte, vierte und fünfte Absatz sind weitgehend überflüssig, und der zweite ist ein wenig zweifelhaft. –
@ Pointy: Danke für das "Zeigen": P. Als ich den CSS-Teil betrachtete, bemerkte ich, dass der Inhalt standardmäßig keine anzeigt. Da ich dem div id osx-modal-Inhalt, der die Anzeige entfernt, eine zufällige Zeichenfolge hinzufüge: keine Standardwerte, die das rote x verursacht haben. Durch das Hinzufügen von Stil inline entfernt es das X Danke :) –