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 :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<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 :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<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 :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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

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 :

1 2 3 4 5

$(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 :

1 2 3 4 5

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

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

Code :

1 2 3 4 5 6 7 8 9 10 11

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

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-Code:

// ** 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!

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 :

1	<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 :

1 2 3 4 5

$(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?

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...

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 :

1 2 3 4 5

$(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?

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-Code:

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


JavaScript

PHP-Code:

$(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-Code:

// ** 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!

@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.

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

Html

PHP-Code:

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


JavaScript

PHP-Code:

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


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

Dann solltest Du es verstanden haben.

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.

Danke an Euch beide. Ich glaube ihr habt mich jetzt beide verstanden.

Das Prinzip, wie die Funktionen arbeiten kenne ich - mir ging es eher um die praktische Umsetzbarkeit und wie man es am schönsten macht.

Es handelt sich bei mir um ein Menü, das derzeit aus 3 Punkten besteht und je nach Klick soll eine andere Datei in dem Div angezeigt werden. Ich habe bis jetzt immer gedacht, dass ich also die Datei, die eingebunden werden soll direkt mit JQuery lade. Jetzt, para_noid, macht es natürlich Sinn eine Art "Weiche" zu definieren, die anhand der DIV-ID erkennt, welche Datei gemeint ist und dementsprechend die jeweiligen Dateien anzeigt. Dies kann ich ja entweder mit einer PHP-Datei machen, die durch JQuery inkludiert wird oder ich mache es in der myLoader-JavaScript Funktion... das macht für mich jetzt faktisch keinen Unterschied, oder?

Danke an Euch beide!

Hallo Trash,
richtig. Es würde aber keine schöne Lösung ergeben, wenn Du dein Ajax Befehl in 3 Funktionen schreiben würdest, oder?

Sehr unschön. Also schau Dir nochmals diese Funktion an:

Html

PHP-Code:

<a id="link1">hier</a> 
<a id="link2">da</a>
<a id="link3">dort</a> 


JavaScript

PHP-Code:

// ** 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 



// ** Jetzt kommen die Click Handler für meine 3 Links

$('#link1').click(
  ajaxLoader('kontakt.php','#zielID');
);

$('#link2').click(
  ajaxLoader('uebermich.php','#zielID');
);

$('#link3').click(
  ajaxLoader('portfolio.php','#zielID');
); 


Sieht das nicht super aus so?
Deine Funktion ajaxLoader kannst Du jetzt immer wieder auf Deiner Seite für unzählige Links nutzen.

Dies kann ich ja entweder mit einer PHP-Datei machen, die durch JQuery inkludiert wird oder ich mache es in der myLoader-JavaScript Funktion... das macht für mich jetzt faktisch keinen Unterschied, oder?

Faktisch nicht, funktionieren würde beides. Liegt dann an der persönlichen Einstellung was man lieber nutzen will...ich möchte JS nur verwenden, wenn ich dieselbe Funktionalität nicht auch über PHP erreichen könnte. Mal angenommen du hättest 20 Menüpunkte, dann müsstest du bei diesem Vorgehen auch zwanzig verschiedene Dateien auf den Server legen...aber das steht jedem frei

Jap, so jetzt haben wirs

Danke! Euch nen schönen Abend!

Vorsicht, will hier nicht den Klugscheisser raushängen lassen. Includieren wie in Php bedeutet das die Datei bei Laden der Seite angezeigt wird. Ajax wird nur geladen wenn der User es möchte, das ist der große Vorteil.