[Hilfe] jQuery(?) dialog polyfill

SunnieX · *-manatee, 03.12.16, Shoutbox*

Hi,

suche jemanden der JavaScript/jQuery (? m8) kann.
Ich benutze für meine Webseite dialog polyfill
https://github.com/GoogleChrome/dialog-polyfill

Was ich haben will:
Verständnisbeispiel: Ich lasse 10x ein Bild aus einer DB Tabelle auslesen. Jedes Bild hat eine ID.
Jedes Bild hat einen Button und durch den Button lässt sich der Dialog öffnen.
---
Bis hier hin ist alles okay. Ich möchte aber noch das der Dialoginhalt bei jedem Button ein anderer ist. (In meinem fall etwas, was aus der datenbank ausgelesen wird)
Mit dem Script wie unten öffnet sich quasi bei jedem Button der selbe Dialoginhalt.

Codepen: http://codepen.io/Garbee/full/EPoaMj/

JavaScript

<body>
  <button id="show-dialog<?php echo $id; ?>" type="button" class="mdl-button">Show Dialog</button>
  <dialog class="mdl-dialog">
    <h4 class="mdl-dialog__title">Allow data collection?</h4>
    <div class="mdl-dialog__content">
      <p>
        Allowing us to collect data will let us get you the information you want faster.
      </p>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button">Agree</button>
      <button type="button" class="mdl-button close">Disagree</button>
    </div>
  </dialog>
  <script>
    var dialog = document.querySelector('dialog');
    var showDialogButton = document.querySelector('#show-dialog<?php echo $id; ?>');
    if (! dialog.showModal) {
      dialogPolyfill.registerDialog(dialog);
    }
    showDialogButton.addEventListener('click', function() {
      dialog.showModal();
    });
    dialog.querySelector('.close').addEventListener('click', function() {
      dialog.close();
    });
  </script>
</body>

Alles anzeigen

Der Button wie man oben sieht hat halt seine eigene ID immer hinten stehen z.b #show-dialog451 jetzt müsste ich nur so etwas ähnliches beim dialog-inhalt (sprich der div class md1-dialog_content) haben.

Vereinfacht ausgedrückt:

drückt man auf button421 wird inhalt421 angezeigt.

drückt man auf button12 wird inhalt12 angezeigt.

Das hört sich einfach an und ich bin mir auch sicher das es einfach ist, aber keine Ahnung, ich kann kein JavaScript.
Falls jemand Ahnung hat und willig ist mir zu helfen: danke

teacher

hey,
ein text wird in javascript per

Code

document.getElementById('id von inhalt421').innerHTML = 'neuer text';

geändert.
du musst also für inhalt421 eine id anlegen und kannst den text dann per oben genannten code ändern.
da du den text aus der datenbank auslesen möchtest, kannst du am anfang deiner funktion die entsprechende zeile aus der db auslesen, in einer variable speichern und dann die variable statt 'neuer text' ins script eintragen.

SunnieX · *-manatee, 03.12.16, Shoutbox*

Zitat von teacher
hey,
ein text wird in javascript per
Code
document.getElementById('id von inhalt421').innerHTML = 'neuer text';
geändert.
du musst also für inhalt421 eine id anlegen und kannst den text dann per oben genannten code ändern.
da du den text aus der datenbank auslesen möchtest, kannst du am anfang deiner funktion die entsprechende zeile aus der db auslesen, in einer variable speicher und dann die variable statt 'neuer text' ins script eintragen.

Danke ich probier es gleich mal aus. Sieht sehr einleuchtend aus und ist auch - zumindest wenn ich es richtig verstanden habe - das was ich gesucht habe.

Kpoi

HTML

<script src="view/lib/js/jquery.js"></script> <!-- JQuery einbinden -->
<style>
#bild{
	width: 100px;
	height: 100px;
	border: 1px solid black;
	margin-top: 10px;
	text-align:center;
	line-height: 100px;
}
</style>
<script>
	$(function(){
		var i = 0;
		$("[id=bild]").each(function(){
			i ++;
			$(this).addClass(""+i);
		});
		$("[id=bild]").click(function(){
			alert("Das ist Bild Nummer: " + $(this).attr("class"));
		});
	})
</script>




<div id="bild">
Bild1
</div>
<div id="bild">
Bild2
</div>
<div id="bild">
Bild3
</div>
<div id="bild">
Bild4
</div>

Alles anzeigen

Das dürfte es machen

INCepted

Zitat von SunnieX

Danke ich probier es gleich mal aus. Sieht sehr einleuchtend aus und ist auch - zumindest wenn ich es richtig verstanden habe - das was ich gesucht habe.

Fragst am besten per AJAX die Daten an und konvertierst diese dann in ein JSON Array.
Kannst dann durch iterieren und die Elemente per jQuery erzeugen und anhängen.

innerHTML wäre bei jQuery .html(); - Sowohl einlesen als auch eingeben.

Je nachdem wo du es wie einfügen willst wählst du deine Funktion. In jQuery wird
meistens .prepend(), .append(), .appendTo(), .before() etc. verwendet.

Kpoi

Habe grade gemerkt das es für deine Verhältnisse eine bessere Lösung gibt. Sorry Brain afk.
Du könntest die Bilder durch einen Loop laufen lassen bzw. eine While-Schleife und dann aus der Datenbank das imgtext attribut in der Schleife füllen.

HTML

<script src="view/lib/js/jquery.js"></script> <!-- JQuery einbinden -->
<style>
#bild{
	width: 100px;
	height: 100px;
	border: 1px solid black;
	margin-top: 10px;
	text-align:center;
	line-height: 100px;
}
</style>
<script>
	$(function(){
		$("[id=bild]").click(function(){
			alert($(this).attr("imgtext"));
		});
	})
</script>




<div id="bild" imgtext="Hallo was geht?!">
Bild1
</div>
<div id="bild" imgtext="Aw ma god!">
Bild2
</div>
<div id="bild" imgtext="Ja HIER IST ANDERE BILÖD!">
Bild3
</div>
<div id="bild" imgtext="Super Video, echt!">
Bild4
</div>

Alles anzeigen

Jetzt mitmachen!