✔ [Twitter Bootstrap] Modals mit remote?

[Dustin84]

Ok, neuer versuch!

Mein Link:

<button data-target="#modallogin" data-toggle="modal" type="button" class="btn">Login</button>

Script:

	$("[data-toggle=modal]").click(function() {
		$.ajax({
			url: "/remote.php", // Pfad hat sich geändert...
			type: "post",
			dataType: 'html',
			success: function(response, textStatus, jqXHR){
				// Das komplette HTML meiner remote.php wird korrekt ausgegeben
				console.log(response);
			},
			complete: function(){
				// Hier dann die Modalbox aufrufen?
			}
		});
	});

Dazu habe ich jetzt Fragen.
1. Wie kann ich meine Anfrage filtern? In response steht jetzt der komplette Inhalt meiner remote.php. Ich möchte aber nur den Inhalt mit der ID #modallogin haben.

2. Wie kann ich jetzt die Modalbox initialisieren? Muss ich mein HTML erst meinem DOM hinzufügen oder kann ich das response nutzen und direkt das Modal aufrufen, ohne es extra in meinem DOM zu laden?

Gruß
D.

 

[rd4eva]

Ja so hatte ich mir das auch schon gedacht.

Aha... Und wieso probierst du dann die ganze Zeit etwas was schlicht nicht möglich ist (jedenfalls nicht über die data api)?
Wenn man sich die bootstrap.js mal anschaut sieht man auch warum

$target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, '')))
...
$target.modal(option)
...

Hier wird für $target ein Selektor/Objekt erwartet und du übergibst eine URL.
Das ist auch der Grund warum deine remote.php nie geladen wird. Weil versucht wird .modal() auf etwas anzuwenden was garnicht existiert.

Ich hab mal einen eigenen Eventhandler gebastelt damit deine Funktionalität auch per data api erreichbar ist

!function ($) {
	$(document).on('click.modal.data-api', '[data-toggle="remotemodal"]', function (e) {
		var $this = $(this);	
		var href = $this.attr('href');
		var $target = $this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''));
		var remote = !/#/.test($target) && $target;
		
		$.get(remote, function(response){
			
			var option = $(response).data('modal') ? 'toggle' : $.extend({ remote: undefined }, $(response).data(), $this.data());

			$(response)
			  .modal(option)
			  .one('hide', function () {
				$this.focus()				
			  })
			  .on('hidden', function(){
				$(this).remove();
			  })
		}, 'html')
		
		e.preventDefault()
	});
}(window.jQuery);

Ansonsten gäbe es nur noch die Möglichkeit per javascript

$("[data-toggle=modal]").click(function(evt) {
				$.get('php/remote.php', function(response){
					$(response).modal();
				},'html');
				
				evt.preventDefault();
			});

Wobei du dir die data api attributa dann auch sparen könnntest.

 

[Dustin84]

So, dann mal danke für die Hilfe!

Ich habs jetzt so: (Funktioniert wunderbar)

	// Modals
	// -------------------------	
	$("[data-toggle=modal]").click(function(evt) {
			var target = $(this).attr('data-target');
			
			$.get('/remote.php', function(response){
					// Filter response
					response = $(response).filter(target);
					
					$(response).modal()
					.on('hidden', function(){
						// Remove existing modals
						$(this).remove();
					});
					
			},'html');
			evt.preventDefault();
	});