Bootstrap 3.1.1 - Modal-Dialog (link) öffnet immer mit dem selben Inhalt

Hallo zusammen,

ich versuche mich seit einigen Tagen mit Bootstrap und habe mir die Version 3.1.1 heruntergeladen.
Nun habe ich mir das original Modal-Beispiel von der Bootstrap-Seite kopiert und bei mir ausprobiert, was auch gut funktionierte.

Anschließend habe ich eine PHP-Seite programmiert, mit der ich per while-Schleife einige Text-Zeilen aus meiner MySQL-Datenbank auslese.
Jeder dieser Zeilen habe ich einen Remote-Link hinzugefügt, der die jeweilige ID der ausgelesenen Zeile enthält. Der Remote-Link soll den Inhalt einer anderen PHP-Seite in dem Modal anzeigen und sich an der ID orientieren , damit ich die ausgelesenen Texte aus der Datenbank in dem Modal anzeigen kann, sobald ich den jeweiligen Link anklicke.

Problem:
Egal welchen Link ich anklicke folgt immer der Inhalt des zuerst angeklickten Links mit dem jeweiligen Inhalt aus der Datenbank.
Mache ich einen Browser-Reload und klicke ich dann einen anderen link an, dann öffnet sich ein Modal mit einem anderen Inhalt aus der Datenbank der korrekt angezeigt wird.

Öffne ich aber mehrmals nacheinander verschiedene Links an, dann öffnet sich immer der Modal mit dem Inhalt des zuerst angeklickten Links.

Frage:
Wie kriege ich es hin das sozusagen ein "Reset" erfolgt, sobald ich auf den Schließen-Button des Modals klicke um bei Öffnen des selben Modals (gleiche ID), jedoch über einen anderen Link, den jeweiligen Datenbankinhalt zu erhalten?

Hier nun mein Code:
HTML

<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">  
<!-- ENDE loading Bootstrap -->

<script src="http://code.jquery.com/jquery-1.11.0.min.js"> </script>  

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"> </script>  

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>   
</head>
<body>
<div class="modal fade" id="meinModal" tabindex="-1" role="dialog" aria-labelledby="meinModalLabel" aria-hidden="true">  
  <div class="modal-dialog">  
    <div class="modal-content">  

      <div class="modal-header">  
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>  
        <h4 class="modal-title" id="meinModalLabel">Modal Header Title</h4>  
      </div>

	      <div class="modal-body bg-primary">  
	
	      </div>

      <div class="modal-footer">  
        <a href="#" id="Reset" class="btn btn-primary">Close</a><button id="next" type="button" class="btn btn-primary">Next</button>  
      </div>

    </div>
  </div>
</div>
</body>
</html>

Hier der PHP-Code mit den Links:

while ($ergebnis = mysql_fetch_array($result1)) {
echo '<td align="center"><a data-toggle="modal" href="historie.php?id='.$ergebnis['id']" data-target="#meinModal" data-backdrop="false"><img width="22px" height="22px" src="../images/app_icons/book.png"></a></td>';  
}

Der Inhalt der PHP-Datei, die in dem Modal angezeigt werden soll sieht folgendermaßen aus:

<?php
session_start();
$id = $_GET['id'];  
$gutachtennummer = $_GET['ga'];  
include('../includes/connect.php');  


$id_neu = $_POST['id_neu'];   
$kommentar_neu = $_POST['kommentar_eingeben'];  
$firma = $_POST['firma_eingeben'];  
$ansprechpartner = $_POST['ansprechpartner_eingeben'];  
$thema = $_POST['thema_eingeben'];  
$grund = $_POST['grund_eingeben'];  

$datum_en = date('Y-m-d');  
$datum_en = explode("-", $datum_en);  
$jahr = $datum_en;
$monat = $datum_en[1];
$tag = $datum_en['2'];  
$datum_de =  $tag.".".$monat.".".$jahr;  
?>
<html>
	<head><title></title>
		<style>
			.body{
				background-color: #0782BD;
				color: #FFFFFF;
			}
			.input{
				background-color:#A0A0A0;
				color: #FFFFFF;
			}
		</style>
	</head>
	<body class="body">  
		

<?php

	echo '<form name="eintragen" id="eintragen" action="historie.php?id='.$id.'&&gutachtennummer='.$gutachtennummer.'" method="post">';  
		echo '<input type="hidden" name="id_neu" id="id_neu" value="'.$id.'">';  
		echo '<table>';  
			echo '<tr><td></td><td></td><th>Kommentar</th></tr>';  
			echo '<tr><th align="left">Datum</th><td valign="top"><input readonly type="text" name="heute" id="heute" value="'.$datum_de.'"></td>';  
			echo '<td rowspan="5"><textarea rows="9" cols="40" name="kommentar_eingeben" id="kommentar_eingeben">'.$kommentar_eingeben.'</textarea></td></tr>';  
			echo '<tr><th align="left">Firma</th><td colspan="2" valign="top"><input type="text" name="firma_eingeben" id="firma_eingeben" value="'.$firma_eingeben.'"></td></tr>';  
			echo '<tr><th align="left">Ansprechpartner</th><td colspan="2" valign="top"><input type="text" name="ansprechpartner_eingeben" id="ansprechpartner_eingeben" value="'.$ansprechpartner_eingeben.'"></td></tr>';  
			echo '<tr><th align="left">Thema</th><td colspan="2" valign="top"><input type="text" name="thema_eingeben" id="thema_eingeben" value="'.$thema_eingeben.'"></td></tr>';  
			echo '<tr><th align="left">Grund</th><td colspan="2" valign="top"><input type="text" name="grund_eingeben" id="grund_eingeben" value="'.$grund_eingeben.'"></td></tr>';  
			//echo '<tr><td><input type="button" data-dismiss="modal" onClick="javascript:window.close();" value="Schlie&szlig;en"></td>';  
			echo '<tr><td><input type="button" class="btn btn-primary" id="myModal"  value="Schlie&szlig;en"></td>';  
			//echo '<tr><td><a href="#" id="meinModal" class="btn btn-primary">Schlie&szlig;en</a></td>';  
			echo '<td colspan="2" align="right"><input type="submit" class="btn btn-primary" name="btn[insert]" value="Speichern"></td></tr>';  
		echo '</table>';  
	echo '</form>';  
	echo '<b>Gespeicherte Kommentare:</b>';  
	
$sql_out = "SELECT * FROM historie WHERE referenz_id='".$id."'";  
$result_out = mysql_query($sql_out) or die ("Fehler h1: Die Abfrage der Tabelle `historie` ist auf einen Fehler gesto&szlig;en. <br>Bitte wenden Sie sich an Ihren Anwendungsadministrator!<br><br>SQL: ").mysql_error();  
	
while ($row = mysql_fetch_array($result_out)) {
	
	$index = $row["referenz_id"];  
	//$ga = $row["gutachtennummer"];  
	$datum_out = $row["datum"];  
	$firma_out = $row["firma"];  
	$ansprechpartner_out = $row["ansprechpartner"];  
	$thema_out = $row["thema"];  
	$grund_out = $row["grund"];  
	$kommentar_out = $row["kommentar"];  
	
		echo '<table border="0">';  
			echo '<tr><td></td><td></td><th>Kommentar</th></tr>';  
			echo '<tr><th align="left">Datum</th><td valign="top"><input class="input" readonly type="text" name="datum" id="datum" value="'.$datum_out.'"></td>';  
			echo '<td rowspan="5"><textarea readonly class="input" rows="6" cols="40" name="kommentar" id="kommentar">'.$kommentar_out.'</textarea></td></tr>';  
			echo '<tr><th align="left">Firma</th><td colspan="2" valign="top"><input readonly class="input" type="text" name="firma" id="firma" value="'.$firma_out.'"></td></tr>';  
			echo '<tr><th align="left">Ansprechpartner</th><td colspan="2" valign="top"><input readonly class="input" type="text" name="ansprechpartner" id="ansprechpartner" value="'.$ansprechpartner_out.'"></td></tr>';  
			echo '<tr><th align="left">Thema</th><td colspan="2" valign="top"><input readonly class="input" type="text" name="thema" id="thema" value="'.$thema_out.'"></td></tr>';  
			echo '<tr><th align="left">Grund</th><td colspan="2" valign="top"><input readonly class="input" type="text" name="grund" id="grund" value="'.$grund_out.'"></td></tr>';  
			echo '</tr>';  
		echo '</table>';  
}

?>
	</body>
</html>

<?php 
if (isset($_POST['btn']['insert'])) {  
	add_comment($id_neu, date('Y-m-d'), $firma, $ansprechpartner, $thema, $grund, $kommentar_neu);  
} else {
	
}

function add_comment($id_neu, $datum, $firma, $ansprechpartner, $thema, $grund, $kommentar_neu) {
	$sql_add = "INSERT INTO historie (referenz_id, datum, firma, ansprechpartner, thema, grund, kommentar) VALUES ('".$id_neu."', '".$datum."', '".$firma."', '".$ansprechpartner."', '".$thema."', '".$grund."', '".$kommentar_neu."')";  
	$request = mysql_query($sql_add);
}
?>

Ich würde mich riesig über Eure Hilfe freuen.

Besten Dank und viele Grüße

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 319183

Url: https://administrator.de/contentid/319183

Ausgedruckt am: 23.11.2024 um 10:11 Uhr

6 Kommentare

Neuester Kommentar

Hi Abu,

dein Problem liegt darin das Modal den geladenen Inhalt über seinen constructor in ein Objekt schreibt welches sich nicht mehr verändert.

Durch deinen reload der Seite löst du ein leeren des Objektes aus

Dies kannst du aber mit JS bei jedem Link Aufruf selber machen dann braucht es keinen reload mehr

$('body').on('hidden.bs.modal', '.modal', function () {  
        $(this).removeData('bs.modal');  
      });

damit leerst du das Objekt wieder.

Grüße

Hi IrunGoldstein,

besten Dank für Deine Hilfe.
Eine Frage noch:
Wie muss der Link aussehen und wie spreche ich die JS-Funktion an?

Vielleicht mit:

function meineFunction() {
$('body').on('hidden.bs.modal', '.modal', function () {   
        $(this).removeData('bs.modal');   
      });
}

Ist das richtig ???
Wie muss der Link aussehen?

Hi,

sorry lese gerade das ich mich etwas missverständlich ausgedrückt habe.

Du musst das nicht explizit aufrufen!

Sobald ein Modal geschlossen wird löst es einen Trigger aus welches hidden.bs.modal heißt dies wiederum löst dann die Funktion aus mit dem Befehl removeData...

Ich hoffe es ist so verständlicher

Pack das in einen Script Tag:

<script>
$('body').on('hidden.bs.modal', '.modal', function () {  
        $(this).removeData('bs.modal');  
      });
</script>

Und platziere es in deinem Code

Grüße

Ps: Falls doch noch etwas unklar ist schreibst einfach nochmal.

Ich habe es hinbekommen.

Super! Vielen Dank!

Noch eine Frage bitte:

Wie kriege ich den header und footer angezeigt?
Zurzeit wird lediglich ein Fenster ohne header und / oder Footer angezeigt.