[Twitter Bootstrap] Modals mit remote?

Dustin84

Erfahrenes Mitglied
Hallo,

ich bekomme die Modal mit einer Remote-Datei nicht zum laufen, obwohl für mich alles richtig.

Hier die Docs: http://twitter.github.com/bootstrap/javascript.html#modals
Ich verwende die bootstrap-modal.js v2.2.2: https://raw.github.com/twitter/bootstrap/master/js/bootstrap-modal.js

Hier mein Aufruf:
HTML:
<a href="/php/remote.php" data-target="#myModal" data-toggle="modal">Launch demo modal</a>

Und hier meine remote.php:

HTML:
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal Test Header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

Laut der Doku sollte das so gehen. Ist das ein Bug oder fehlt mir noch irgendwas?
Es tut sich gar nichts. Die remote.php wird auch nicht geladen, zumindest sagt das Firebug.

Gruß
D.
 

ikosaeder

Teekannen-Agnostiker
Hm, was mich stutzig macht, deine remote.php enthält ausschließlich html code.
Musst du vielleicht die Bootstrap.js mit in deine remote.php mit einbinden?
 

ikosaeder

Teekannen-Agnostiker
Wie ist denn der tatsächliche Pfad zur remote.php?
Lass mal den / am Anfang weg.
Also
PHP:
<a href="php/remote.php"
statt
PHP:
<a href="/php/remote.php"
 

Dustin84

Erfahrenes Mitglied
Hey,

ich habe jetzt ein wenig rumgetestet und die remote.php bzw der Pfad ist schon ok.
Kann jemand evtl. mal ein komplettes Beispiel posten?

So, hier mein neuer Code, der auch nicht geht! Aber er muss! Langsam #?!%"/& :mad: ...

Aufruf von irgendeiner Seite:
HTML:
<button type="button" data-toggle="modal" data-target="#modallogin">Login</button>

Modal Javascript:
HTML:
	// Modals
	// -------------------------	
	$("[data-toggle=modal]").click(function() {
		$('#modallogin').modal({
			backdrop: false,
			remote: '/php/remote.php',
			keyboard: false,
			show: true
		});
	});

Das ist doch so richtig! Oder bin ich gerade komplett blöde? ;-)
 
Zuletzt bearbeitet:

rd4eva

Erfahrenes Mitglied
Du machst da Grundlegend etwas falsch.

Schau mal was hier steht:
If a remote url is provided, content will be loaded via jQuery's load method and injected into the .modal-body. If you're using the data api, you may alternatively use the href tag to specify the remote source. An example of this is shown below:

Das bedeutet das nicht die gesamte Box geladen wird sodern lediglich der Inhalt der am Ende in .modal-body landet.
Die Box musst du immer noch lokal definieren.

index.html
HTML:
<a data-toggle="modal" href="php/remote.php" data-target="#myModal" >Launch demo modal</a>

<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">Modal Test Header</h3>
		  </div>
		  <div class="modal-body">
			<p>One fine body…</p>
		  </div>
		  <div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
			<button class="btn btn-primary">Save changes</button>
		  </div>
		</div>

Die remote.php enthält dann das was anstatt "<p>One fine body…</p>" angezeigt werden soll.
 

ikosaeder

Teekannen-Agnostiker
Und ich bin mir nach wie vor sicher, das remote: '/php/remote.php', falsch ist.
Hast du ssh Zugriff auf den Server?
 

rd4eva

Erfahrenes Mitglied
Wie willst du dir denn da sicher sein?
Wenns der Ordner php im DocumentRoot liegt ist das doch ok.
In meinem Beispiel war das nicht der Fall deswegen hab ich den / weg gelassen.
 

Dustin84

Erfahrenes Mitglied
Heyho,
die remote.php wird schon geladen. Dass sehe ich ja im Firebug :)

@rd4eva
Ja so hatte ich mir das auch schon gedacht.

Aber ich finde die Lösung von Bootstrap nicht so praktisch, da ich ja immer einen Teil der Modalbox auf meiner Seite haben muss, was dann durch display:none; ausgeblendet wird. Dann kann ich auf meiner Seite auch gleich die komplette Modalbox+Inhalt setzen.

Ich dachte nur, dass die Modalbox komplett von der remote.php geholt wird...