JQUERY

[ASchwiedy]

Hallo,

ich habe ein DIV mit der ID = status
Beim öffnen der Seite wird mittels

     <script type="text/javascript">
        $(function () {
          $.ajax({
        type: "POST",
        dataType: "html",
        url: "status.php?id=<?php echo $id; ?>",
        success: function (d) {
             $('#status').html(d);
        },
            beforeSend:function() {
        }
          });
        });
        </script>

die Seite status.php geöffnet in der eine MySQL abfrage stattfindet und das Ergebniss in #status angezeigt werden soll.

$status=mysql_query("SELECT * FROM test WHERE nummer='".$_GET['id']."'");
$status2=mysql_fetch_object($status);
if ($status->status == aktiv) {
    echo ("<a href='javascript:void(0)'><img src='images/status_offen.png' width='15' height='15' alt='Aktiv'></a>");
} else {
    echo ("a href='javascript:void(0)'> img src='images/status_blocked.png' width='15' height='15' alt='Geblockt'>");
}

Auf der Seite im DIV #status wird also entweder das Bild status_offen oder status_blocked geladen. Nun möchte ich aber erreichen, das man mit einem Klick auf das Bild den MySQL Eintrag ändert und eben die andere Grafik angezeigt wird. Also aus status_blocked wird status_offen und umgekehrt.

Ich kriege es aber nicht hin

MfG
ASchwiedy

 

[jeipack]

Hi
(erstmal dein PHP Code vermisst klammern im Geblockt HTML Teil, aber das kommt vom kopieren?)

Ein Klickevent kannst du so an dein Bild anhängen:

$("#status").on("click", "img", function() {
  //Eventhandler bei Klick auf Image
});

Nun würde ich jeweils den Status als Data-Attribute in deinem status-div speichern (Alternativ kannst du auch den Bildnamen auslesen):

$("#status").on("click", "img", function() {
  var aktuellerStatus = $(this).data("status");
  var neuerStatus = 1 - aktuellerStatus; //War der Status 0, ist er nun 1, war er 1 ist er nun 0.

  //Neuen AjaxRequest machen wo du den neuen Status übergibst (von dir kopiert und erweitert):
 
$.ajax({
        type: "POST",
        dataType: "html",
        url: "status.php",
        data:{id:myId,newSatus:neuerStatus},
        success: function (d) {
             $('#status').html(d);
        }
          });
//Hier kannst du entweder PHP den neuen Bildnamen zurückschicken lassen, oder da die Statusbildernamen statisch sind, könntest du es auch direkt per Javaascript setzen.
});

 

[ASchwiedy]

Hi,

erstmal dankeschön für Deine Antwort.
Habe dies nun so integriert. Allerdings kommt keine Reaktion beim onklick. Die Bilder werden ja per AJAX über die PHP-Datei in das DIV#status auf der Hauptseite geladen. Wo muß das Skript nun eingebunden werden? Also auf welcher Seite?

 

[ASchwiedy]

Sorry reagiert jetzt. War nur ein falscher Pfad meinerseits drinn.
Was ich nicht verstehe: der neue Status (newSatus) wird nicht korrekt übergeben. Wenn ich den Inhalt der Variable zum Test ausgeben lasse kommt nur "NaN".
liegt das an der Zeile:

var aktuellerStatus = $(this).data("status");

??

wie soll das Skript auf 'status' zugreifen?

LG
ASchwiedy

 

[jeipack]

Ja genau das liegt daran. Damit der status ausgelesen werden kann must du eben den Status (1 oder 0) dem div#status als data element setzen.

Das kannst du mit:

$("#status").data("1");

oder direkt beim erstellen als Attribut

<div id="status" data-status="1" />

Dafür musst du natürlich deinen ersten Ajax Request ein wenig anpassen, sodass du dort den Status mitbekommst.