JavaScript Frage zu jQuery und Ajax

[Domi83]

Moin Leute, ich habe da mal eine kleine Frage an Euch und hoffe der eine oder andere kann mir mal einen Tipp geben nach was ich gucken könnte / sollte, oder kann mir sagen was ich genau brauche

Es geht um folgendes, im Moment spiele ich mit den Features jQuery und Ajax eher ein wenig rum. Ich habe eine Tabelle erstellt, welche alle Domains die wir besitzen aus einer SQL Datenbank abruft und auflistet.... Das Grundgerüst sieht ungefähr so aus...

<table>
 <tr class="head">
  <td>ID</td>
  <td></td>
  <td>Domain</td>
  <td>IP</td>
 </tr>
 <tr class="row">
  <td>1</td>
  <td><img alt="" src="" title="" /></td>
  <td>domain.com</td>
  <td>123.456</td>
 </tr>
</table>

Ich habe jetzt jQuery eingebunden, und zwar wird bei einem Klick auf das Image das den Status der Domain anzeigt, eine andere Datei inklusive GET angesprochen, welche die Überprüfung mittels PHP ausführt...

var loadUrl = "ajax/domain.php";
$("img#aktiviert<?php echo $domains->nummer; ?>").click(function(){
 $("img#aktiviert<?php echo $domains->nummer; ?>").load(loadUrl, "<?php echo "aktiviert=yes&id=".$output['id']."&domain=".$unidomain; ?>");
});

Das funktioniert auch alles soweit. Wenn ich den Pfad den jQuery oder Ajax ausführt, im Browser eintippe... funktioniert es auch. Ich habe mir auch eine 1 oder 0 zurück geben lassen, wenn mein Wunsch erfüllt wird oder eben nicht. Was mir jetzt allerdings noch fehlt ist eine Livetime Update in dem TD wo das Bild auftaucht.

Ich muss nach aktuellem Aufbau immer einmal F5 drücken um die Veränderung zu sehen. Rein vom logischen Verstand muss ich ja die Rückmeldung aus meiner "domain.php" irgendwie abfangen und von jQuery prüfen lassen. Und wenn 0, dann soll er mir das Bild no.gif hinsetzen, wenn 1 dann yes.gif anzeigen! Aber wie programmiere ich das denn?

Gruß, Domi

 

[SymA]

Aus der Doku:

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $(this).addClass("done");
});

Du kannst ja für verschiedene Ereignisse, verschiedene Aktionen aufrufen. Zum Beispiel beim Success Event, das entsprechende DIV für das Bild mit dem neuen Inhalt füllen lassen.

 

[Domi83]

Ah... das mit dem "done" dahinter hatte ich aus der Dokumentation nicht ganz verstanden... Dann muss ich auch kein "loadurl" verwenden

$(document).ready(function(){
 $("button").click(function(){
  $.ajax({
   url: "jquery_test.php",
   type: "POST",
   data: {test : "blubb"},
   dataType: "html"
  }).done(function(msg) {
   $("div#div1").text(msg);
  });
 });
});

Damit schubst er mir jetzt meinen POST rüber an das Dokument und in dem Dokument gibt er mir das richtige aus. Firebug gibt auch gute Werte zurück. An sich scheint jQuery eine doch relativ gut erstellte Lösung zu sein... man muss sich nur mal ein wenig in den Syntax rein arbeiten.

 

[omaliesschen]

$.get( "/url/to/get.php", function( data ) { $(element).append( data ); });

$.post( "/url/to/post.php", { paramOne: "Value", paramTwo: "Value" })
.done( function( data ) { $(div).append( data ); });

 

[Domi83]

@omaliesschen, danke dafür... ich werde mal schauen was ich von den Varianten verwenden werde. Habe ja nun $.ajax, $.post und $.get zur Verfügung... eine kleine Frage hätte ich allerdings noch, falls man mir dabei helfen kann

In meinem Beispiel (Zeile 2) geht es um einen Button, wenn diese Buttons aber nun unterschiedliche IDs bekommen haben, wie leite ich denn dann an jQuery diese ID weiter? Im ganz handelsüblichen JavaScript habe ich "onclick='funktion(this.id)'" oder so etwas ähnliches verwendet, den "onclick" Parameter habe ich gar nicht mehr verbaut, wie sage ich denn jQuery jetzt das es Button 2 und nicht Button 3 ist, der da etwas tätigt..?!

Mein Test basiert ja aktuell nur auf einem einzigen Button... aber in dem aus Post 1 erwähnten Beispiel, geht es ja um mehrere Domains die in einer Tabelle dargestellt werden und somit hat jeder Button einen anderen Wert, ungefähr so id="status1" etc.

 

[omaliesschen]

$(document).on('click', '.buttonwrapper > button', function(){
var id = $(this).prop('id');
// z.B.
$.get( "/url/to/get.php?id="+id, function( data ) { $('#list').append( data ); });
});

Mit on() werden auch nachgeladenen Elemente eingebunden.

Wenn die Buttons statisch sind und nicht über ajax etc. nachgeladen werden reicht auch:

$('.buttonwrapper > button').click(function(){})

 

[Domi83]

Ja, ich habe eine durch PHP generierte Tabelle die ungefähr so aussieht...

<table>
 <tr class="row" id="row1">
  <td>
   1
   <script>
    $(document).ready(function(){
     $("img.info1").click(function() {
      $("tr#info1").fadeToggle(200, "linear");
     });
    });
   </script>
  </td>
  <td><img alt="Informationen" class="info1 pointer" src="img/info.png" title="Informationen..." /></td>
  <td></td>
  <td>xxx1.de</td>
  <td>123456</td>
 </tr>
 <tr class="info hide" id="info1">
  <td colspan="5">
   Informationen 2
  </td>
 </tr>
 <tr class="row" id="row2">
  <td>
   1
   <script>
    $(document).ready(function(){
     $("img.info2").click(function() {
      $("tr#info2").fadeToggle(200, "linear");
     });
    });
   </script>
  </td>
  <td><img alt="Informationen" class="info2 pointer" src="img/info.png" title="Informationen..." /></td>
  <td></td>
  <td>xxx2.de</td>
  <td>123456</td>
 </tr>
 <tr class="info hide" id="info2">
  <td colspan="5">
   Informationen 2
  </td>
 </tr>
</table>

Wobei die Informationen noch nicht via AJAX Nachträglich eingeladen werden, die werden gleich beim Seitenaufbau eingebunden. Standardmäßig ist der TR mit den Informationen versteckt und wird durch einen Klick auf das Image dann animiert und eingeblendet.

So habe ich es zum testen gebaut, nun ist die Frage ob man den jQuery Party nicht in den Head oder eine externe Datei auslagern kann, und übergibt halt nur eine ID... hoffe wir reden jetzt nicht aneinander vorbei und ich konnte meine Frage genauer erklären

 

[omaliesschen]

$(document).on('click', '.pointer', function(){

    $(this).closest('tr').find('.info').toggleClass('hide');

});