Verständissfrage Jquerry/Ajax/links

fr4nk · 17. Oktober 2014

Hallo,

ich möchte per ajax Daten in ein div laden.

Mein JS:

JavaScript

$(document).ready(function() {
    function ajaxCall(currentLink, successFunction) {
        $.ajax({
          url: currentLink,
          success: successFunction
        })
      };




           

            $("a.link-map").on(
                'click',
                function() {
                  ajaxCall('module/karte/karte.php?sub=all', function(result) {
                    $("#rightopen-content").html(result);
                  });
                  return false;
                }
              );  

});

Alles anzeigen

Auf diese art muss ich für jeden einzelnen Link eine Funktion erstellen ist das so gewollt? Oder gibt es eine andere Lösung?

The Scout · 17. Oktober 2014

Jiop, hier mal ungetestetes, aber so in die Richtung kannst du mal basteln:

JavaScript

$({ // $(document).ready(function(){}) in kurz ;)
    $("a.link-map").click({
        event.preventDefault(); // das schönere "return false"

        var target = $(this).attr("href"); //Zielurl auslesen

        $.ajax({
            url: target;
        }).done(function(data) {
            $("#rightopen-content").html(data);
        }).fail({
            $("#rightopen-content").html("<p>Leider konnten keine Daten gefunden werden</p>");
        });
    });
});

Alles anzeigen

ABER!!! Falls du planst, auf diese Art und Weise eine Ajax One-Page zu bauen (genau das, wonach es klingt: via JS wird der Inhalt nachgeladen, wenn auf einen Link geklickt wird), dann lies dir vorher diesen Artikel durch: Ajax-OnePage – Inhalt richtig per Ajax nachladen. Da wird erklärt, welche Fallen es gibt und wie man sie umgeht.

fr4nk · 18. Oktober 2014

den Artikel habe ich gelesen, trifft aber hier nicht ganz zu. Für die Seite wird JS als nötig gesehen
Und die Seite wird auch nicht von Suchmaschienen indiziert. Die JS Links befinden sich im Userbereich.

Das Script hat so leider nicht funktioniert.
Ich habe das jetzt folgendermaßen gelöst, bin aber noch nicht ganz zufrieden
Leider habe ich es nicht geschafft deinen Ajaxrequest ein zu bauen, vielleicht kannst Du mal schauen...

JavaScript

$(document).ready(function() {


  	$("a.link-ro-c").on(
    	'click',
    	function(event) {
      	event.preventDefault();
      	var target = $(this).attr("href")+'&a=1';
      	ajaxCall(target, function(result) {
        	$("#rightopen-content").html(result);
      	});
      	return false;
    	}
  	);








  	function ajaxCall(currentLink, successFunction) {
    	$.ajax({
      	url: currentLink,
      	success: successFunction
    	});
  	};








  	

});

Alles anzeigen

The Scout · 18. Oktober 2014

Also, ein paar Dinge kann man noch vereinfachen:
1) Es reicht wirklich ein .click(), du brauchst kein .on("click", ...)
2) Du musst dein Ajax nicht in eine eigene Funktion packen. Wenn du das mit in die .click Eventfunktion steckst, wird es genau so ausgeführt
3) liefert dir das jQuery Ajax deine Successfunktionen bereits mit, die musst du also auch nicht extra spezifizieren

Hier nochmal eine andere Version, wo ich auf Nummer sicher gegangen bin

JavaScript

$(function() {
    $("a").click(function(event) { // Hier Link(-klasse) ändern
        event.preventDefault();

        var href = $(this).attr("href"); // Link auslesen

        $.ajax({
            url: href,
            cache: false // Neueste Version erhalten
        }).done(function(data) {
            $("#insert").html(data); // Hier Ort ändern
        }).fail(function() {
            $("#insert").html("<p>Leider nichts gefunden</p>");
        });
    });
});

Alles anzeigen

PS: Entferne mal bei meiner ersten Version das Semikolon am Ende von Zeile 8 und guck, ob es dann funktioniert

fr4nk · 18. Oktober 2014

Vielen Dank Scout!!!
Es klappt
Oder nicht so ganz
wenn ich in dem nachgeladenen html einen link mit der gleichen klasse habe(Er soll sein eigenes Div überschreiben) dann wird dieser nicht vom JS ausgeführt.
ist das richtig so?

Verständissfrage Jquerry/Ajax/links

Jetzt mitmachen!

Teilen