✔ Probleme mit Ajax -> onclick bei image Button

H

Hanschur

Grünschnabel
Hallo zusammen,

ich stehe hier vor einem Problem, für welches ich keine Lösung habe. Folgendes Szenario:

Innerhalb eines Formulares befinden sich mehrere image Buttons. Es soll erkannt werden, wenn ein Button geklickt wird. Meine Überlegung war, bei onClick auf den jeweiligen Button die dortige ID an meinen Ajax Request zu übergeben, dort mittelst if Abfrage die URL für mein PHP Script zu modifizieren.

Zu Testzwecken gebe ich mir, bei erfolgen Klick mal via alert das Ergebnis der Variable url aus. Wie ich sehe, ist die URL richtig modifiziert und sollte so auch an die PHP Datei gesendet werden. Tut sie aber nicht....

Also habe ich den Wert url außerhalb der if Abfrage nochmals ausgegeben. Interessanterweise fehlt hier die Modifizierung aus dem Wert der If Abfrage.

Vielleicht kann hier jemand erkennen, warum das nicht funktioniert... Vielen Dank für jede Hilfe...

Anbei die Codeteile...

Formular
HTML: 
<form action="javascript:ajaxAnzeige(document.getElementById('data'));" method="post" name="data" id="data">
.
.
.
.
<input type="image" src="img/links.jpg" id="l1" onClick="ajaxAnzeige(this.id)">
<input type="image" src="img/rechts.jpg" id="r1" onClick="ajaxAnzeige(this.id)">
<input type="image" src="img/oben.jpg" id="o1" onClick="ajaxAnzeige(this.id)">
<input type="image" src="img/unten.jpg" id="u1" onClick="ajaxAnzeige(this.id)">
</form>

Javascript
Javascript: 
function ajaxAnzeige(clicked_id)
{
    xmlhttp_ajaxAnzeige=GetXmlHttpObject();
    if (xmlhttp_ajaxAnzeige==null)
    {
        alert ("Browser does not support HTTP Request");
        return false;
    }
          
              
   var url="generator.php";
   var send = document.getElementById('send').value;
   var s1 = document.getElementById('s1').value;
   var f1 = document.getElementById('f1').value;
   var t1 = document.getElementById('t1').value;
   var l1 = document.getElementById('l1').value;
   var r1 = document.getElementById('r1').value;
   var o1 = document.getElementById('o1').value;
   var u1 = document.getElementById('u1').value;

  url=url+"?send="+send+"&s1="+s1+"&t1="+t1+"&f1="+f1;

  /// Prüfe ob Button gedrückt wurde.
  if (clicked_id == "l1") {url=url+"&l1=yes"; alert(url);}
  if (clicked_id == "r1") {url=url+"&r1=yes"; alert(url);}
  if (clicked_id == "o1") {url=url+"&o1=yes"; alert(url);}
  if (clicked_id == "u1") {url=url+"&u1=yes"; alert(url);}

alert(url); /// Zum test hier nochmal das Ergebnis von url zeigen

    xmlhttp_ajaxAnzeige.onreadystatechange=stateChanged_ajaxAnzeige;
    xmlhttp_ajaxAnzeige.open("GET",url,true);
    xmlhttp_ajaxAnzeige.send(null);
    return false;
}
 
Zuletzt bearbeitet von einem Moderator:
Hallo,

zuallererst solltest du beim Zusammenbauen einer URL mit benutzerdefinierten Eingaben vorsichtig sein. Es empfiehlt sich, für jede benutzerdefinierte Variable encodeURIComponent() zu nutzen.

Beispiel:
Javascript: 
// Außerdem kannst du" url = url + ... "durch "url += ..." ersetzen!
url += "?send=" + encodeURIComponent(send) + encodeURIComponent("&s1=") + ...;
Ansonsten kannst du auch mal in die Developer Console deines Browsers schauen, welche URI für den AJAX Request benutzt wird.
 
Hi,

grundsätzlich sieht die Funktion in Ordnung aus. Allerdings kann es sein, dass der Event an das Formular weitergereicht wird und das Formular nochmal ein alert anstösst. Als Abhilfe könntest du false im onclick-Handler zurückgeben.
HTML: 
<input type="image" src="img/links.jpg" id="l1" onClick="return ajaxAnzeige(this.id)">
Javascript: 
function ajaxAnzeige(clicked_id)
{
    // Dein Code wie bisher ...
   
    return false;
}
Ciao
Quaese
 
Danke Quaese - das zeigt Wirkung. Hatte das return bei onClick vergessen. Interessanterweise funktioniert es mit Chrome. IE und Firefox Antworten nun mit einem
"false" auf dem Bildschirm. Warum auch immer...
 
hmmmm, leider hab ich für das "false" Problem noch keine Lösung. Ich kann probieren was ich will - im IE und FF geht es nicht. Ich poste nochmal den Code, vielleicht kann man mir noch einen Gedankenanstoß geben ;-)

Das Formular
Code: 
<form method="get" name="data" id="data" action="javascript:ajaxAnzeige(document.getElementById('data'));">
<input type="hidden" id="send" value="yes">

<input type="text" value ="<?php echo $z1_text;?>" name="t1" id="t1" onChange='this.form.submit();'>

<select name="f1" id="f1" onChange='this.form.submit();'>
<option........
</select>

<select name="s1" id="s1" onChange='this.form.submit();'>
<option........
</select>

<INPUT TYPE="image" SRC="img/links.jpg" id="l1" onClick="return ajaxAnzeige(this.id)">
.
.
.
</form>

und hier der relevante Ausschnitt aus der request.js

Code: 
var xmlhttp_ajaxAnzeige;
    
function ajaxAnzeige(clicked_id)
{
    xmlhttp_ajaxAnzeige=GetXmlHttpObject();
    if (xmlhttp_ajaxAnzeige==null)
    {
        alert ("Browser does not support HTTP Request");
        return false;
    }
          
    var url="generator.php";
    var send = document.getElementById('send').value;
    var s1 = document.getElementById('s1').value;
    var f1 = document.getElementById('f1').value;
    var t1 = document.getElementById('t1').value;

  url=url+="?send="+encodeURIComponent(send)+"&s1="+encodeURIComponent(s1)+"&t1="+encodeURIComponent(t1)+"&f1="+encodeURIComponent(f1);

  /// Prüfe ob Button gedrückt wurde.
  if (clicked_id == "l1") {url=url+="&l1=yes";}
        

  xmlhttp_ajaxAnzeige.onreadystatechange=stateChanged_ajaxAnzeige;
  xmlhttp_ajaxAnzeige.open("GET",url + "&" + new Date().getTime(), true);
  xmlhttp_ajaxAnzeige.send(null);
  document.getElementById('ajaxAusgabe').innerHTML = '<div class="loading"><IMG SRC="img/loading.gif"></div>';  

     return false;
}

function stateChanged_ajaxAnzeige()
{
   if (xmlhttp_ajaxAnzeige.readyState==4)
   {
   document.getElementById("ajaxAusgabe").innerHTML=xmlhttp_ajaxAnzeige.responseText;
   }
}


function GetXmlHttpObject () {

var xmlHttp = null;

try {
   // Firefox, Opera 8.0+, Safari, IE 7+
   xmlHttp = new XMLHttpRequest();
} catch (e) {
   // Internet Explorer - old IE - prior to version 7
   try {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
}

return xmlHttp;
}
 
Noch immer kein Ergebnis! Der Debugger zeigt, das die Variable URL sauber gefüllt, aber keine Übertragung an generator.php erfolgt. Ändere ich return false; in Zeile 30 auf return; wird zumindest die generator.php aufgerufen - bei return false; gibt es nur die Ausgabe: false auf dem Bildschirm. (Bei Firefox und Internet Explorer, im google Chrome funktioniert es tatellos) Egal was ich ändere - es führt zu keinem Ergebnis. Wo könnte der Fehler liegen? Vermutlich ist er für einen Javascript Spezialisten erkennbar - ich sehe ihn nicht ;-(
 
Hi,

es reicht doch, das Senden zu organisieren, wenn die image-Buttons gedrückt werden. So könntest du immer den Event und das auslösende Element mitgeben und damit innerhalb der Funktion arbeiten.

Beispiel:
HTML: 
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function GetXmlHttpObject () {
    var xmlHttp = null;

    try {
       // Firefox, Opera 8.0+, Safari, IE 7+
       xmlHttp = new XMLHttpRequest();
    } catch (e) {
       // Internet Explorer - old IE - prior to version 7
       try {
          xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
       } catch (e) {
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
       }
    }

    return xmlHttp;
}

function ajaxAnzeige(evt, input) {
    // XMLHttpRequest-Objekt erstellen
    var xhr = GetXmlHttpObject();

    (window.event) ? (evt.returnValue=false) : evt.preventDefault();

    var url="generator.php",
        send = document.getElementById('send').value,
        s1 = document.getElementById('s1').value,
        f1 = document.getElementById('f1').value,
        t1 = document.getElementById('t1').value,
        clicked_id = input.id;

    url += "?send="+encodeURIComponent(send)+"&s1="+encodeURIComponent(s1)+"&t1="+encodeURIComponent(t1)+"&f1="+encodeURIComponent(f1);

    // Prüfe ob Button gedrückt wurde.
    if (clicked_id == "l1") {url=url+="&l1=yes";}

    xhr.onreadystatechange = function(){
        if((xhr.readyState==4) && (xhr.status==200)){
            console.log("xhr: ", xhr);
        }
    };
    xhr.open("GET",url + "&" + new Date().getTime(), true);
    xhr.send(null);
}
</script>
</head>
<body>
<form method="get" name="data" id="data" action="">
    <input type="hidden" id="send" value="yes">
    <input type="text" value ="value_t1" name="t1" id="t1">

    <select name="f1" id="f1">
        <option value="eins">
        <option value="zwei">
    </select>

    <select name="s1" id="s1">
        <option value="eins">
        <option value="zwei">
    </select>

    <input type="image" src="img/links.jpg" id="l1" onclick="ajaxAnzeige(event, this);">
</form>
</body>
</html>
Beim Klick auf den Button werden die erforderlichen Element analysiert. Weiterhin wird die ID des auslösenden Elements ermittelt und zum Schluss die URL erstellt und der XHR abgesendet.

Ciao
Quaese
 
Oh ja - das funktioniert ;-) Ich hatte zwischenzeitlich eine andere Lösung, nämlich das return false nur zu setzen, wenn der Wert aus meiner clicked_id nicht null ist. Das war aber umständlich und erforderte eine Menge an Codezeilen die ich mit Deiner Lösung sparen kann. Vielen Dank für die gute Hilfe!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück