PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : jQuery: load funktioniert nicht


BigRob
2014-05-19, 21:13:53
Hi,

ich habe ein Problem mit der load-Funktion - eigentlich simpel. Ich möchte, dass ganz einfach der Inhalt einer anderen Seite in ein div geladen wird. Dabei soll eine spezifische Datei bei klick auf einen Link in den jeweils nächsten div geladen werden.

Hier der HTML-Teil:


<div id="accordion">
<div>
<h2><a class="pageFetcher" href="ErrorPage.html">Home</a></h2>
<div>
<!--Plattzhalter-->
</div>
</div>
<div>
<h2><a class="pageFetcher" href="Olitaetenweg.html">Products</a></h2>
<div>
<!--Plattzhalter-->
</div>
</div>
</div>


Hier der JS-Teil:


$(function(){
$('.pageFetcher').click(function(){
var contentDiv = $(this).next('div');
contentDiv.load($(this).attr('href'));
});
});


Evtl. kann mir jemand hier helfen....

Danke!

Sephiroth
2014-05-19, 21:19:32
Und was genau funktioniert da nun nicht, wie sieht der Fehler aus? Laut deinem code würde bei einem click der Link ganz normal geöffnet werden, sprich du siehst die Seite auf die der Link zeigt. Ist das der "Fehler"?

ezzemm
2014-05-20, 07:18:15
Kann es sein daß du "load" mit "ajax" verwechselst?
http://api.jquery.com/jquery.ajax/

Mit load kannst du bestimmen wann der Browser ein Element fertig geladen hat, um dann damit etwas zu machen. Mit Ajax kannst du Text/Code von beliebigen Seiten laden, und u.a. in dein Dokument einbauen.

Beispiel:


<script type="text/javascript" charset="utf-8">
(function($) {
$(document).ready(function(){
$.ajax({
url: "andereseite.html",
error: function(data) {
if (data && data.responseText)
alert(data.responseText);
},
success: function(data) {
$('#inhalt').html(data);
}
});
});
})(jQuery);
</script>

BigRob
2014-05-20, 07:49:19
@Sephiroth:

Ja der Link öffnet ganz normal. Evtl. wäre es doch sinnvoll statt a-tag einen anderen zunehmen und ein anderes Attribut zu deklarieren (sollte ja in HTML5 kein Problem sein) - würde das funktionieren?


@ezzemm:

Vermutlich hast du recht, dass ich das verwechsel. Ich habe da jetzt keine tiefgründige Erfahrung und hab das aus einer "Internetrecherche" zusammen gebaut.
Nun möchte ich aber nicht, dass der Inhalt per ready-function geladen wird, sondern wirklich erst bei klick auf das Element "pageFetcher". Wie müsste das dann umgeschrieben werden?

Danke schon mal!

ezzemm
2014-05-20, 08:30:43
Nun, anstelle von document.ready nimmst du einfach:

$('.pageFetcher').on('click', function(){

AJAX-Code

});

Matrix316
2014-05-20, 10:44:07
Eigentlich müsste das relativ einfach sein: Im Jquery die ID des Divs verwenden und mit irgendwas die JS Funktion aufrufen.


function LoadSeite()
{
$( "#Inhaltsseite" ).load( "www.irgendwas.html" );
}

<control irgendwas onclick="LoadSeite()">

<div ID="Inhaltsseite">

</div>

ezzemm
2014-05-20, 11:59:54
jQuery.load() ist ein Event-Handler, kein "Lade-Programm".

j.load(handler(eventObject)) entspricht j.on(events, handler(eventObject))

http://api.jquery.com/load-event/


Ajax hat auch eine Methode namens .load(), daher vielleicht die Verwirrung. Die Beschreibung und die Hinweise dazu stehen auch in der verlinkten Dokumentation.

RattuS
2014-05-20, 15:18:34
Ihr diskutiert gerade an der Problemlösung vorbei, da .load() überhaupt nicht der Fehler ist.

Lösung:

$('.pageFetcher').click(function(event){
var contentDiv = $(this).parents('div:first').children('div:first');
contentDiv.load($(this).attr('href'));
event.preventDefault();
});


Hier ein Fiddle zum Ausprobieren. (http://jsfiddle.net/96dma/)

Der Selector für [contentDiv] war inkorrekt. .next() findet nur Elemente unterhalb des selben Parents. Ich habe den Selector geändert auf "finde den (ersten) naheliegenste Parent [div] und finde darin das (erste) Child [div]" - das entspricht dann dem beabsichtigten "nächsten Element".

Damit der reguläre Anchor-Tag nicht ausgeführt wird, musst du JS anweisen die herkömmliche Ausführung mit .preventDefault() zu unterbinden. Du könntest, wie von dir erwähnt, auch einfach ein funktionsloses Element wie [span] verwenden, aber der Vorteil der aktuellen Variante ist, dass Besucher mit deaktiviertem JS die Seite trotzdem noch aufrufen könnten.

Ectoplasma
2014-05-21, 00:35:51
@RattuS, warum machst du das so kompliziert, und gibst dem ContentDiv keine eigene Klasse?

$('.contentDiv').click(function() { ...

Achja nur so nebenbei. Bitte niemals ID's verwenden, wenn es nicht unbedingt notwendig ist. IDs sind teuflisch, wenn man Seiten wiederverwenden will. Und load ist übrigens ganz normal mit ajax implementiert und kann noch ein paar besondere Dinge, wie z.B. optional das Herausfiltern von javascript code der Seite die geladen wird etc.

RattuS
2014-05-21, 03:14:44
@RattuS, warum machst du das so kompliziert, und gibst dem ContentDiv keine eigene Klasse?
Das Markup ist vom TS, nicht von mir.

$('.contentDiv').click(function() { ...
Wäre übrigens falsch. Der Klick auf <a> soll <div> triggern, nicht <div> selbst.

Bitte niemals ID's verwenden, wenn es nicht unbedingt notwendig ist. IDs sind teuflisch, wenn man Seiten wiederverwenden will.
Keine Pauschalisierung bitte. Selektion durch ID ist immer noch die mit Abstand schnellste Variante, um im DOM an Elemente zu kommen.

Ectoplasma
2014-05-21, 07:50:22
Das Markup ist vom TS, nicht von mir.

Hatte ich übersehen, sorry.


Wäre übrigens falsch. Der Klick auf <a> soll <div> triggern, nicht <div> selbst.


Richtig, war nicht ganz präzise, du weisst aber trotzdem, was ich meine.


Keine Pauschalisierung bitte. Selektion durch ID ist immer noch die mit Abstand schnellste Variante, um im DOM an Elemente zu kommen.

Ist keine Pauschalisierung, denn ich schrieb ja, wenn es nicht unbedingt notwendig ist. Ich schließe das nicht kategorisch aus, aber wenn mal Spass hatte, undefinierbare Fehler auf Seiten zu finden, nachdem man einige Seitenfragmente umändern mußte, spätestens dann weiss man, dass man mit IDs vorsichtig sein sollte.

BigRob
2014-05-21, 17:52:58
Vielen Dank!

Mit euren Vorschlägen kann ich definitiv etwas anfangen.
Vorallem hab ich gesehen, dass man schön im DOM navigieren kann, was das ganze vereinfacht.
RattuS vorschlag scheint doch die Lösung zu sein..

BigRob
2014-05-27, 21:28:37
Hallo,

ich habe noch ein weiteres Problem - ähnlich zu dem oberen:

Ich möchte einen php-Skript eine Variabel "value" eines button-elements übergeben. Dazu nutze ich JS. Der Inhalt soll in ein div geladen und eingeblendet werden. - Das funktioniert auch. Allerdings wird bei klick auf einen anderen button (mit anderem value) der Inhalt nicht neu geladen.
Somit ist es aktuell eine "Einbahnstraße".

Hier dazu die JS-Funktion:


$(function(){
$('.ajaxButton').click(function(event){
event.preventDefault();

var accom = $(this).attr('value');

if(accom===null || accom===undefined)
{
accom='nothing';
}

$.post('buchungsanfrage.php',
{
accom: accom
},
function(content){
parent.$('#Content').append( content );
parent.$('#Content').show('500');
});

});
});

RattuS
2014-05-27, 22:52:45
Der Inhalt soll in ein div geladen und eingeblendet werden. - Das funktioniert auch. Allerdings wird bei klick auf einen anderen button (mit anderem value) der Inhalt nicht neu geladen.
Deine JS-Funktion hängt die Rückgabe des POST-Request derzeit an (append). Das bedeutet gleichzeitig, dass jeder Klick auf einen Button die Rückgabe anhängt. Ist das so beabsichtigt? Außerdem wäre es nett zu wissen, was (in welcher Form vorliegend) du als Rückgabe bekommst (content). Wenn du ganze HTML-Elemente anhängen willst, stell sicher, dass das Markup korrekt formatiert ist (Tags ordentlich geschlossen etc.), ansonsten stänkert jQuery da ganz gerne mal.

Alternativ versuch einfach mal:

$.post('buchungsanfrage.php',
{
accom: accom
},
function(content){
parent.document.getElementById('Content').innerHTML = content;
parent.$('#Content').show('500');
});

Das garantiert, dass die Rückgabe auf jeden Fall gesetzt wird - auch wenn das Markup kaputt wäre.


Btw. "parent"? Verwendest du Frames?

Marscel
2014-05-28, 02:54:37
Ihr schreibt Zeug ...

$(function(){
$('.ajaxButton').click(function(event){
event.preventDefault();

var accom = $(this).attr('value') || "nothing";

$.post('buchungsanfrage.php', {
accom: accom
},
function(content) {
parent.$('#Content').html(content);
parent.$('#Content').show('500');
});
});
});

Wichtig: Je nach dem, was du da für content lädst, insbesondere wenn da Benutzer-generierte Sachen enthalten sind, darfst du die blau markierte Zeile nicht so stehen lassen. So holt man sich nämlich XSS-Exploits.

BigRob
2014-05-28, 16:01:22
Vielen Dank wieder einmal!

Die Variante von RattuS und Marscel führen zum gleichen Ergebniss. Wobei mich

parent.document.getElementById('Content').innerHTML = content;

sehr an mein Studium erinnert und doch standard-JS sein dürfte - oder?

@ Marscel: danke für den Hinweis. Vorraussichtlich wird dies kein Problem darstellen, da nur eigener Content geladen wird.

@RattuS: ja iFrames sind (noch) in der Seite. Werde aber bald möglichst für abhilfe sorgen.

RattuS
2014-05-28, 21:33:56
Der Unterschied zwischen der nativen Variante (innerHTML) und dem jQuery-Wrapper (.html()) ist, dass fehlerhaftes Markup bei jQuery u.U. gar nicht ins DOM kommt (https://github.com/jquery/jquery/blob/master/src/manipulation.js), während innerHTML selbst fehlerhaftes Markup einfügen kann und die Interpretation im Browser verbleibt. Daher zum Debuggen sehr praktisch. ;)