JQuery/Ajax: Frage zu einer Funktion, die Content in ein DIV lädt

Trash · 21. November 2011

Moin,
ich habe diese wundervolle Funktion gefunden, die einen bestimmten Content per Click z.B: im GET-Verfahren per Ajax in ein DIV mit der ID #content lädt:

Code:

<a id="divid">blablabla</a>

$(document).ready(function(){

			$("#divid").click(function(){
				$.ajax({
					type: "GET",
					url: "test.php",
					data: "ajaxget=ajax()-Daten+(GET)",
				
					success: function(data){
						$("#content").html(data);
					}
				});
			});

	});

Meine Frage ist nun, wie kann ich diesen Codeschnipsel so umbauen, dass daraus eine Funktion wird, die ich aufrufen kann? Die #divid ist dynamisch und soll halt n Mal funktionieren, für verschiedene #divid's. Ich dachte irgendwie an sowas:

Code:

<a id="divid" onclick="myloader('#divid')">blablabla</a>

function myloader(id) {

$(document).ready(function(){

			$(id).click(function(){
				$.ajax({
					type: "GET",
					url: "test.php",
					data: "ajaxget=ajax()-Daten+(GET)",
				
					success: function(data){
						$("#content").html(data);
					}
				});
			});

	});
}

Nun ist aber das onclick im <a Tag und das $(id).click(function(){ in der Funktion irgendwie obsolet und ich stehe irgendwie auf dem falschen Fuß. Kann mir kurz jemand helfen?

Danke!

Edit: Habe es jetzt so hinbekommen, indem ich die div von der alles ausgeht, weggelassen habe. Ich finde das onclick im <a-Tag aber relativ unschön. Bekommt man das auch anders dynamisch hin?

Code:

function myloader(url) {

	$(document).ready(function(){

				$.ajax({
					type: "GET",
					url: url,
					data: "ajaxget=ajax()-Daten+(GET)",
				
					success: function(data){
						$("#content").html(data);
					}
				});

	});
}

para_noid · 22. November 2011

Wenn ich das richtig verstanden habe, soll ein DIV über click-Events der a-Tags verändert werden.
Zugriff auf alle geklickten a-Tags:

Code:

$(document).ready(function(){
  $('a').click(function(){
    myloader();
  }
});

Ich kann in deinem Beispiel keine Verwendung von #divid finden, nehme aber an, du wirst das irgendwann benötigen. Dann muss das Ganze so aussehen:

Code:

$(document).ready(function(){
  $('a').click(function(){
    myloader($(this).attr('id'));
  }
});

Die Funktion selber dann außerhalb des $(document).ready-Events:

Code:

function myloader(id) {
 
   $.ajax({
      type: "GET",
      url: "test.php",
      data: "ajaxget=ajax()-Daten+(GET)",                
      success: function(data){
        $("#content").html(data);
      }
  });
}

abstractizm · 22. November 2011

Hi,
du möchtest also mal das eine mal das andere div ansprechen.
Kann ja auch sein, das Du auch mal eine andere Url aufrufen möchtest?

PHP:

// ** Funktion Anfang
function ajaxLoader(adresse, ziel){

 // die Funktion erwartet 2 Parameter
 // die zu ladende Url, in deinem Fall war das test.php
 // und das ziel div worin der Inhalt ausgegeben wird

  $.ajax({
      type: "GET",
      url: adresse,
      data: "name=John&location=Boston", 
            
      success: function(antwort){
        $(ziel).html(antwort);
      }
  });

}
// ** Funktion Ende


// So kannst Du die Funktion direkt in JavaScript aufrufen
ajaxLoader('test.php', '#divName');

// oder so in Html
<a href="javascript:ajaxLoader('test.php', '#divName');">Jetzt laden</a>

// oder so in JavaScript einer Id names myButton zuweisen, 
// das dieser beim Klicken ausgeführt wird
$('myButton').click(ajaxLoader('test.php', '#divName'));

// der Html Code dazu
<div id="myButton>klicke mich endlich</div>

Wie du schnell feststellen wirst, wäre es sehr sinnvoll den Punkt data in der ajax Funktion auch als Variable zu definieren. Aber das schaffst Du jetzt selber!

Trash · 23. November 2011

Moin,
danke. So ähnlich habe ich es mittlerweile auch hinbekommen. Die div-Klasse #content bleibt in meinem Beispiel immer gleich. Was mich im letzten Code-Schnipsel von para_noid irritiert, ist das "id" an die Funktion übergeben wird, aber in der Funktion gar nicht verwendet wird?

Da ist meine obere Funktion, bei der ich nur die URL mitgebe, ziemlich ähnlich, da die durch das onClick auch nicht auf die Link-ID angewiesen ist:

Code:

<a id="meinlink" onclick="loader(url)">blablabla</a>

Was ich an der Lösung etwas "unschön" finde ist, dass der User über Quelltest anzeigen genau sehen kann, welche URL übergeben wird, welche Parameter etc. Im Prinzip ist es bei der "Ajax-Lösung" ohne spezifisches onClick nicht anders, nur etwas "versteckter".

Was mich eigentlich die ganze Zeit interessiert ist, dass ich 2 Möglichkeiten haben:

1. Ich arbeite mit onClick und lasse die ID des a-Tags weg, wodurch meine Loader-Funktion einfach direkt angesprochen wird und ich die nötigen Informationen "mitgebe".

2. Ich kann mit dem Code von para_noid eine Jquery/Ajax Funktion definieren:

Code:

$(document).ready(function(){
  $('a').click(function(){
    myloader($(this).attr('id'));
  }
});

die so ebenfalls "dynamisch" ist, da hier die ID des a-Tags eine Rolle spielt, ich dafür aber das onClick weglassen kann. Aber wie kann ich hier url etc. übergeben?

Sehe ich das richtig oder seid ihr nun völlig verwirrt? Konnte mir jemand folgen?

para_noid · 23. November 2011

ist das "id" an die Funktion übergeben wird, aber in der Funktion gar nicht verwendet wird?

Darauf wollte ich mit

Ich kann in deinem Beispiel keine Verwendung von #divid finden, nehme aber an, du wirst das irgendwann benötigen.

Bezug nehmen. Aus deinen Beispielen konnte ich nicht entnehmen, wofür man eine ID genau verwenden sollte. Hab ich das jetzt richtig verstanden, das bei dem Event immer derselbe Content geladen werden soll?

Das mit der url hatte ich jedenfalls bislang nicht mitbekommen. Wenn es aber immer dieselbe ist, langt es doch, die im ajax-Bereich anzugeben? Und wo und wie werden die GET-Parameter erstellt?

Konnte mir jemand folgen?

Ehrlich gesagt nein

Brett vorm Kopf...

Trash · 23. November 2011

hehehehe.

Okay, fangen wir mal bei meinem 1. Post oben an. Im 1. Code-Kasten habe ich eine JQuery/Ajax-Funktion, die in einem ausgelagerten .js-File liegen kann und bei einem Link z.B. <a id="divid">Blabla</a> angesprochen wird.

Nun habe ich eine Möglichkeit, diese Funktion id-unabhängig zu definieren und im Link mit onclick="meineFunktion()" anzusprechen. Das finde ich relativ unschön, es scheint aber eine "gültige" und machbare Möglichkeit zu sein. In dieser Funktion kann ich sämtliche Daten mitgeben: Ziel-Div, Url des zu ladenden Objekts, Übergabeparameter.

In meinem Fall ist das Ziel-Div immer gleich. Die Datei, die dort eingebunden werden soll und die Parameter aber unterschiedlich. Sprich: Ich habe mehrere Links, die unterschiedliche Aktionen auslösen sollen.

Nun verstehe ich deine Funktion

Code:

$(document).ready(function(){
  $('a').click(function(){
    myloader($(this).attr('id'));
  }
});

so, dass diese Funktion bei einem Klick auf irgendeinen Link aufgerufen wird und an myloader der Inhalt des jeweiligen id-Attributs des Links übermittelt wird. Dies hieße, dass ich keine onclick-Funktion im Link benötige. Was ich mich aber Frage, wie bekomme ich es bei dieser Funktion hin, dass ich z.B. URL der einzubindenden Datei und die Parameter übergeben kann. Das ginge ja nicht, oder? In diesem Fall müsste die myLoader-Funktion differenzieren, wie der Inhalt des übergebenen Attributs ist und dementsprechend in der Funktion myLoader reagieren und z.b. die URL setzen, richtig?

Demnach führt bei mir kein Weg daran vorbei eine Funktion zu definieren und per onClick anzusprechen, um eben Datei, URL und Parameter zu übergeben, oder?

abstractizm · 23. November 2011

Hallo,
das siehst Du genau richtig.

Da gute Entwickler allerdings immer darauf abzielen, JavaScript und Html von einander zu trennen, empfehle ich Dir die Event Handler Version. Allerdings sprichst Du in Deinem Beispiel alle Links an. Um gezielt nur einen Link anzusprechen schreibst Du folgendes:

Html

PHP:

<div id="meinLink">klick mich</a>

JavaScript

PHP:

$(document).ready(function(){
 
 $('#meinLink').click(function(){
    myloader($(this).attr('id'));
  }

});

Ich habe jetzt oben ein Div Container benutzt, Du kannst natürlich auch ein <span> oder auch ein <a> benutzen.

Ein weitere Vorteil abgesehen der Trennung ist, das sollte Dein JavaScript wachsen (weitere Funktionen, etc...) hast Du eine gute Lesbarkeit deines Scriptes und spätere Anpassungen können einfacher umgesetzt werden.

Noch ein wichtiger Hinweis bei Ajax Befehlen. Vergiss nicht, der User sieht bei deinem Script nicht, das etwas passiert, bis der Ajax Befehl erfolgreich zurückgekommen ist. Das kann dazu führen, das der User im schlimmsten Fall mehrmals den Link klickt.

Das kannst Du ganz einfach lösen. Dein Ajax Befehl wird ja bei Erfolg in einem Zielbereich ausgegeben. Diesen kannst Du auch dazu benutzten, um bis zu Erfolg eine "Bitte warten" Meldung anzuzeigen.

Ich nehme meinen Code als Beispiel:

PHP:

// ** Funktion Anfang 
function ajaxLoader(adresse, ziel){ 

 // die Funktion erwartet 2 Parameter 
 // die zu ladende Url, in deinem Fall war das test.php 
 // und das ziel div worin der Inhalt ausgegeben wird 

// *** BITTE WARTEN MELDUNG ***
$(ziel).html('Bitte warten...');

  $.ajax({ 
      type: "GET", 
      url: adresse, 
      data: "name=John&location=Boston",  
             
      success: function(antwort){ 
        $(ziel).html(antwort); 
      } 
  }); 

} 
// ** Funktion Ende

Du siehst es wird vor dem Ajax Befehl das Ziel mit dem Html Code "Bitte warten..." befüllt und bei Erfolg dann mit dem Inhalt Deines Adresse.

Wenn Du Dein Ajax Befehl so aufbauhst, kommst Du in den Himmel!

Trash · 23. November 2011

@abstractizm:
Das hieße aber, ich trenne JS von HTML-Code und habe für 3 Links, die alle das selbe Div mit unterschiedlichem Inhalt befühlen, auch 3 Funktionen, richtig? Und eben nicht eine, der ich die URL mitgebe etc.

abstractizm · 23. November 2011

Hallo Trash,
wir haben Zeitgleich auf diesen Beitrag geantwortet, meine Nachricht sollte auch Deine Frage beantworten.

Html

PHP:

<a id="DAS_IST_DIE_KENNUNG">klick mich</a>

JavaScript

PHP:

$('#DAS_IST_DIE_KENNUNG').click(
    function(){
      alert('geklickt');   
    }
);

Klick nochmals auf diesen Link hier:
http://jsfiddle.net/tXXRg/

Dann solltest Du es verstanden haben.

para_noid · 23. November 2011

Nu hab ich's.

Ja, deine Rückschlüsse zu dem Code sind korrekt. Dann reicht das auch natürlich nicht aus...

Die Datei, die dort eingebunden werden soll und die Parameter aber unterschiedlich.

Gibt es einen triftigen Grund, warum (theoretisch) jedes a-Tag mit einer anderen PHP-Datei bearbeitet werden soll? Ich will dir das nicht absprechen, seh da aber ehrlich gesagt keinen Sinn. Ich hatte mir jetzt vorgestellt, du verwendest immer dieselbe php-Datei, der du mit GET die id des geklickten a-Tags übergibst. Die php-Datei switcht sich dann den passenden Inhalt und gibt ihn zurück. Die kann ja intern noch auf andere Scripte zugreifen.

Sonst fällt mir da leider auch keine "schöne" Lösung ein, außer den Kram in der loader-Funktion zu bewerten, wie du gesagt hast

In diesem Fall müsste die myLoader-Funktion differenzieren, wie der Inhalt des übergebenen Attributs ist und dementsprechend in der Funktion myLoader reagieren und z.b. die URL setzen

Die Prüfung würde sich aber meines Erachtens in der angesprochenen Datei besser machen.

JQuery/Ajax: Frage zu einer Funktion, die Content in ein DIV lädt

Trash

Erfahrenes Mitglied

para_noid

hirnrissig

abstractizm

Grünschnabel

Trash

Erfahrenes Mitglied

para_noid

hirnrissig

Trash

Erfahrenes Mitglied

abstractizm

Grünschnabel

Trash

Erfahrenes Mitglied

abstractizm

Grünschnabel

para_noid

hirnrissig

Neue Beiträge