✔ jquery ajax link / wie?

C

chaosgoettin

Mitglied
Hallo,

ich habe bis jetzt folgenden Link verwendet:
PHP: 
echo link_to_remote('> Ihre Reiseroute', array(
             'update'   => 'bild_extra',
             'script'   => true,
             'url'      => 'reiseansicht?action=BildExtra&bildname='.$karte['karte'].'
                             &inetbeschreibung=Ihre Reiseroute', array('href'   => '/reiseansicht?action=BildExtra&bildname='.$karte['karte'].'&inetbeschreibung=Ihre Reiseroute')));

nun wollen wir das ajax aber mit jquery machen, ich finde aber einfach keine richtige anleitung wie ich dem nun sage welchen link er machen solll und welches div er updaten soll?

Ich wollte es eigentlich so schreiben:
HTML: 
     <script type="text/javascript">
      // JavaScript-Code hier...

      $(document).ready(function() {
        // ausführen, wenn das DOM bereit ist
        
        $("a").click(function(){
          $.ajax({
          type: "POST",
          url: "reiseansicht?action=BildExtra&bildname=test&inetbeschreibung=Ihre Reiseroute",
          data: "bild_extra",
          });
        });
      });

     </script>

     <a href=“#“>Datei test.txt laden...</a>

aber er macht das ajax nicht, er lädt einfach nur die Seite neu.
Vielen Dank
 
So klappte es erstmal mit dem ajax (er lädt die Seite nicht mehr neu macht aber das Ajax) aber wo sage ich ihm jetzt das er das DIV z.B. anzeigt?
Und das Alert bringt er auch nicht.
Es kommt aber auch keine Fehlermeldung?


HTML: 
     <script type="text/javascript">
      // JavaScript-Code hier...

      $(document).ready(function() {
        // ausführen, wenn das DOM bereit ist
        
        $("a").click(function(){
          $.ajax({
            type: "POST",
            url: "reiseansicht?action=BildExtra&bildname=test&inetbeschreibung=Ihre Reiseroute",
            data: "action=BildExtra&bildname=test&inetbeschreibung=Ihre Reiseroute",
            update:  "bild_extra",
            dataType: "script",
            success: function(){
              alert( "Data Saved:" );
            }
          });
        });
      });

     </script>

     <a href="#" onclick="">Datei test.txt laden...</a>
 
okay nun bin ich noch einen Schritt weiter:

HTML: 
     <script type="text/javascript">
      // JavaScript-Code hier...

      $(document).ready(function() {
        // ausführen, wenn das DOM bereit ist
        
        $("a").click(function(){
          $.ajax({
            type: "POST",
            url: "reiseansicht?action=BildExtra&bildname=test&inetbeschreibung=Ihre Reiseroute",
            data: "action=BildExtra&bildname=test&inetbeschreibung=Ihre Reiseroute",
            update:  "bild_extra",
            dataType: "html",
            complete: function(){
              document.getElementById("bild_extra").style.display='block';
            }
          });
        });
      });

     </script>

Er macht das Ajax, er führt die Action aus und lädt auch das Template (er zeigt es mir im Response vom Firefox - Firebug an) auch stellt er jetzt das div dar. Aber was er nicht macht ist das Div (bild_extra) mit den Daten aus dem Responce bzw. aus dem Template zu füllen. Er lässt das Div einfach leer.

LG
 
Hi,

versuch es mal so:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
  <!--
body{ background: #fff;}
 //-->
</style>
<script type="text/javascript" src="../JS-Scripts/jquery/jquery-1.1.3.1.js"></script>
<script type="text/javascript">
  <!--
$(document).ready(function(){
  $("a#ajaxLink").click(function(){
    $.ajax({
      type: "POST",
      url: "reiseansicht?action=BildExtra&bildname=test&inetbeschreibung=Ihre Reiseroute",
      data: "action=BildExtra&bildname=test&inetbeschreibung=Ihre Reiseroute",
      success: function(strResponse){
        document.getElementById("bild_extra").innerHTML = unescape(strResponse);
      }
    });
    return false;  // Verhindern, dass Link ausgeführt wird
  });
});
 //-->
</script>
</head>
<body>
<a id="ajaxLink" href="#">AJAX-Request</a>
<div id="bild_extra"></div>
<a href="http://www.tutorials.de/">Ein weiterer Link (www.tutorials.de)</a>
</body>
Der AJAX-Request wird auch nur dann ausgeführt, wenn der Link mit der ID ajaxLink betätigt wird.

Weiterhin bin ich mir nicht sicher, ob Deine URL stimmt. Normalerweise sollte dort etwas der Form
Code: 
url: "reiseansicht.php",
stehen.

Ciao
Quaese
 
Hallo,

ja vielen Dank so funktioniert es.

HTML: 
<script type="text/javascript">
    $(document).ready(function(){
      $("a#ajaxLink").click(function(){
        $.ajax({
          type: "POST",
          url: "reiseansicht.php",
          data: "action=BildExtra&bildname=test&inetbeschreibung=Ihre Reiseroute",
          success: function(strResponse){
            document.getElementById("bild_extra").style.display='block';
            document.getElementById("bild_extra").innerHTML = unescape(strResponse);
          }
        });
        return false;  // Verhindern, dass Link ausgeführt wird
      });
    });

     </script>

    <a id="ajaxLink" href="#">AJAX-Request</a>

Kann ich nun noch irgendwie über das <a> meine variablen mit übergeben oder muss ich bei jedem Ajax Link diesen Teil darüber schreiben.
Was sich jedes mal ändert wäre der data: Teil.

LG
 
Hi,

ich bin mir nicht sicher, ob ich das Problem richtig verstanden habe. Aber mit bind sollte es möglich sein,
Parameter an Events zu übergeben.

Folgendes Beispiel durchläuft ein Array, welches die Link-IDs und URL-Daten enthält. Damit kann jedem
Link ein individueller AJAX-Request zugeordnet werden.
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="jquery-1.1.3.1.js"></script>
<script type="text/javascript">
  <!--
var arrLinks = new Array(['ajaxLink_01', 'test=1'], ['ajaxLink_02', 'test=2']); 

$(document).ready(function(){

  for(var i=0; i<arrLinks.length; i++){
    $("a#"+arrLinks[i][0]).bind("click", {intI: i}, function(event){
      $.ajax({
         type: "POST",
         url: "ajax_response.php",
         data: arrLinks[event.data.intI][1],
         success: function(strResponse){
           document.getElementById("ajaxOut").innerHTML = unescape(strResponse);
         }
      });
      return false;
    });
  }
});
 //-->
</script>
</head>
<body>
<a id="ajaxLink_01" href="#">AJAX-Request</a>
<a id="ajaxLink_02" href="#">AJAX-Request</a>
<div id="ajaxOut"></div>
<a href="http://www.tutorials.de/">www.tutorials.de</a>
</body>
</html>
Vielleicht kannst Du damit etwas anfangen.

Ciao
Quaese
 
Hallo Quaese,

was ich gern wollte ich das wenn ich mehrere Links habe und sich jedes Mal im data: Bereich der Bildname und die Beschreibung ändert ich nicht jedes Mal das JS schreiben muss sondern die Variablen über das <a href ...> gleich mit übergeben kann.

<a href="#" onclick="javascript:test(bildname,beschreibung);" ...>
so geht es ja nicht, weil die onclick function im Ajax JS keinen Namen hat.

LG
 
Hi,

das Codefragment macht doch genau das, was Du gerne hättest. Nur werden die data-Informationen nicht
beim Betätigen des Links übergeben, sondern nach dem Laden des Dokumentes.

Willst Du später noch etwas ändern, kannst Du doch das Array an den entsprechenden Stellen anpassen.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück