mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Fr 19.04.2024 22:07 Benutzername: Passwort: Auto-Login

Thema: jQuery / AJAX - Teilbereich nachladen vom 30.07.2014


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> jQuery / AJAX - Teilbereich nachladen
Autor Nachricht
top
Moderator
Threadersteller

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht: Männlich
Verfasst Mi 30.07.2014 17:03
Titel

jQuery / AJAX - Teilbereich nachladen

 Antworten mit Zitat Zum Seitenanfang
Ich versuche mal wieder mit Javascript ein Stückchen weiter zu kommen. Leider hänge ich mal wieder an einer Kleinigkeit (?) fest.
Per Javascript wird ein Div ein-/ausgeblendet in dem dann weitere Details per AJAX nachgeladen werden. Mit Hilfe diverser Vorlagen läuft das auch schon. Hier mal der grundlegende Code wie ich es bisher habe:

Code:
...
<a href="bla.html" class="intern">Bla</a>
...
<div id="detail"> Platzhalter </div>
...


Code:

  var interneLinks = document.getElementsByClassName('intern');
  for (i=0;i<interneLinks.length;i++) {
    interneLinks[i].onclick = function() {
      $('#detail').fadeIn(700);
      var clickedHREF = this.href;
      $.get(clickedHREF, function(data){
        $('#detail').html(data);
      });
      return false;
    }
  }


Allerdings darf in den nachzuladenden Dateien jetzt keine Header-Daten enthalten sein. (Da diese sonst mit in das Feld "#detail" eingebunden werden.)

Gibt es da einen einfachen Befehl, damit er mir z.B. nur den Bereich innerhalb von <body /> übernimmt?
Die Anleitungen die ich bisher gefunden habe, gehen entweder von einfachen Textdateien aus, oder sind so Umfangreich, dass ich da noch nicht durchblicke.

Und ja: ich habe mir schon die Finger wund gegoogelt. <-- Schuld! Über einen passenden Suchbegriff würde ich mich aber auch freuen. * Ja, ja, ja... *
  View user's profile Private Nachricht senden
pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
Verfasst Mi 30.07.2014 17:48
Titel

Antworten mit Zitat Zum Seitenanfang
Der Response kann ja ein DOM-Knoten sein, also benutz halt einen einfachen Selector, um Dir das rauszuziehen, was Du brauchst. Ich meine auch, dass das „große“ Ajax-Kommando das sogar mitbringt, finde den Parameter aber gerade nicht.

Schöner finde ich allerdings, wenn der Server einen vorbereiteten Response liefert, kein normales Dokument.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
xaos

Dabei seit: 06.10.2004
Ort: Kargath
Alter: -
Geschlecht: -
Verfasst Mi 30.07.2014 18:20
Titel

Antworten mit Zitat Zum Seitenanfang
Code:
$( "#result" ).load( "ajax/test.html #container" );


Siehe http://api.jquery.com/load/

Code:

$( ".intern" ).on( "click", function(e) {
    e.preventDefault();
    $( "#detail" ).load( this.href + "body" );
});
  View user's profile Private Nachricht senden
pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
Verfasst Mi 30.07.2014 20:50
Titel

Antworten mit Zitat Zum Seitenanfang
Ah, ok, bei load war das *Thumbs up!*

Zitat:
+ "body"

Guck rechts! + " body"

Zuletzt bearbeitet von pantonine am Mi 30.07.2014 20:50, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
xaos

Dabei seit: 06.10.2004
Ort: Kargath
Alter: -
Geschlecht: -
Verfasst Mi 30.07.2014 22:11
Titel

Antworten mit Zitat Zum Seitenanfang
pantonine hat geschrieben:
Ah, ok, bei load war das *Thumbs up!*

Zitat:
+ "body"

Guck rechts! + " body"


Args, Leerzeichen vergessen... Danke!
  View user's profile Private Nachricht senden
top
Moderator
Threadersteller

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht: Männlich
Verfasst Do 31.07.2014 10:13
Titel

Antworten mit Zitat Zum Seitenanfang
Fragt mich nicht warum, aber mit " body" blieb der Kasten leer. (Auch mit Leerzeichen * Keine Ahnung... * ) Ich habe jetzt einfach den nachzuladenden Inhalt noch in ein div mit id="detailinhalt" verpackt und nun geht es. *Thumbs up!*

So sieht es aus:
Code:
  $('.intern').on('click', function(e) {
    e.preventDefault();
    $('#detail').load( this.href + ' #detailinhalt' );
    $('#detail').fadeIn(700);
  });

Vielen Dank - ihr seid die Gutesten. * huduwudu! *


pantonine hat geschrieben:
...
Schöner finde ich allerdings, wenn der Server einen vorbereiteten Response liefert, kein normales Dokument.

Es ist natürlich ein Stückchen kürzer. Allerdings finde ich es bei der Vorgehensweise schön, dass der Inhalt auch ohne JavaScript problemlos erreichbar ist und dort auch ein wenig gestaltet dargestellt wird. (+ Link zur Startseite und Impressum welcher nicht mit übernommen wird.)
  View user's profile Private Nachricht senden
 
Ähnliche Themen Bilder via Ajax nachladen
Seite nachladen mit jQuery geht nicht bei IE8
jquery php und ajax
Buchempfehlungen WordPress / AJAX / jQUERY
[AJAX] jQuery Post-Formular
PHP/MySQL, JQuery/Javascript, (AJAX) lernen
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB