AJAX (Asynchronous JavaScripting and XML) Forum

Ajax Request mit prototypjs

Sava — Wed, 08 Sep 2010 11:45:40 GMT

Hallo Leute,

mein Ajax will nicht so wie ich will =/
Problem: Ich arbeite heute zum ersten mal mit Ajax. Mit PHP kenne ich mich ganz gut aus. Nun m�chte ich (erst mal zu Testzwecken) einen Request an den Server machen und Variablen an ein PHP �bergeben.

HTML-Code:



                        

                

                

        



        

                "test" onsubmit="return false;">

                        "text" name="name" id="name" >

                        "submit" value="submit" onClick="sendRequest()">

                


                

                "show">

Ich verstehe was der Code tun sollte. Leider passiert einfach nichts wenn ich auf Submit klicke. Da ich den Namen mit GET �bertrage sollte ich doch in Url auch sehen, dass die PHP aufgerufen wird und der Name �bergeben wird. Leider tut sich nichts dergleichen.
Meine PHP dazu:

PHP-Code:




if($_GET["name"] == "")

    echo "name is empty";

else

    echo "you typed ".$_POST["name"];

?>

Ich vermute mir fehlt bei Ajax einfach der Durchblick.
Solltet ihr auf Anhieb sehen wo der Fehler ist, w�re ich dankbar f�r eine ausf�hrliche Beschreibung des Fehlers.
Ansonsten bitte ich um gute Ajax Tutorials und Tipps.

Vielen Dank im Vorraus!

DropDown-Men� mit Pfeiltasten steuern

AlphaBravoX — Wed, 08 Sep 2010 10:42:39 GMT

Hallo,

Frage ist schnell erkl�rt: Schaut euch bitte kurz einmal auf WG Zimmer Wohnungen Wohnungssuche WG Suche WG Wohnung vermieten WG Nachmieter Zwischenmiete : WG-Gesucht.de das Suchfeld f�r Wohnungen an. Wenn man in das Suchfeld klickt, erscheint ein DropDown-Men�, in dem man die gew�nschte Stadt aussuchen kann. Durch dieses Men� kann man auch mit den Pfeiltasten navigieren. Eigentlich nichts gro�artiges, nur ist dieses DropDown-Men� ein selbst geschriebenes und nicht durch das SELECT-Tag erzeugtes. Wie kann man das also mit JavaScript realisieren? Mit EventHandlern kenn ich mich aus und ich wei�, wie ich Tastendr�cke abfangen kann. Aber wie kann ich Elemente per Tastendruck aktivieren? Ich habe wohl einige L�sungen, aber wie hat der Entwickler es hinbekommen, dass sich auch die Scrollbar mitbewegt, wenn man mit den Pfeiltasten au�erhalb des sichtbaren Bereichs f�hrt.

Vielen Dank,
Alex

2 Eingabefelder

bastler — Sun, 05 Sep 2010 10:49:40 GMT

Hallo Leutz,
da ich ein absoluter Neuling bin was AJAX angeht wede ich mich mal an euch.
Folgendes Problem habe ich:
Es sind 2 Eingabefelder vorhanden in diese sollen Ma�e (H�he und Breite) ingetragen werden. Sind BEIDE Eingabefelder ausgef�llt soll ein PHP-Script ausgef�hrt werden das zu den Ma�en aus einer DB einige Wrte holt und diese dann anzeigen soll. Wie kann ich das anstellen?
Wie gesagt habe da nicht so recht einen Plan aber vieleicht ist jermand so nett mich dahingehnend etwas zu unterst�tzen.

Besten Dank bastler

Erfolgreicher ajax request endet mit error

chruzlee — Fri, 03 Sep 2010 09:04:14 GMT

Hallo Zusammen,

Ich bin relativ neu in der jquery-Welt. Ich habe versucht ein ajax request zu machen, der mir ein xml (von einem php generiert) zur�ck gibt.

Aus irgendeinem Grund lande ich dabei immer in der callback function des errors. trotzdem habe ich die xml �bermittelt bekommen.

was mache ich falsch?

folgend der code:

Code:

Kann mir jemand weiterhelfen?

Liebe Gr�sse,

Google Maps automatisch aktualisieren (nach Eingabe von einem Ort)

thomas_Klinger — Wed, 01 Sep 2010 19:41:43 GMT

Hi zusammen, ich bin neu hier und habe gleich mal eine Frage. Ich habe auf einer Seite (Mein das war Yelp.de) folgendes gefunden, was ich gerne f�r mich umsetzen m�chte.
Hier hat man ein Orts und Postleitzahleingabefeld.
Wenn man einen Ort z.H. Hamburg eingegeben hat, und eine zeitlang nichts weiter eingibt, wird eine Google Map automatisch (ohne Reload der kompletten Seite) neu geladen mit einem Kartenausschnitt von Hamburg.
Ich m�chte sowas gerne mit ASP.Net l�sen. K�nnt ihr mir da weiterhelfen?

Kollaboratives Schreiben

dhaseman — Wed, 01 Sep 2010 06:27:17 GMT

Hey Leute,

ich hab mal eineFrage und vielleicht k�nnt ihr mirweiterhelfen.
Ich wei�, dass es von der Performance her nicht gut ist mit meinem Mini-Programm kollaborativ zu schreiben aber trotzdem m�chte ich das gerne hinbekommen.

Hier mal mein Code:

Code:

var text='Bitte Schreiben Sie was....';

var must=1;



function ShowResult()

{    

        var xmlHttpp = null;

        // Mozilla, Opera, Safari sowie Internet Explorer (ab v7)

        xmlHttpp = new XMLHttpRequest();

    

        if (xmlHttpp) {

        xmlHttpp.open('GET', 'load.php', true);

        xmlHttpp.onreadystatechange = function () {

            if (xmlHttpp.readyState == 4) {

               if (text != xmlHttpp.responseText)

              {

                text = xmlHttpp.responseText;

                document.getElementById('livesearch').value = xmlHttpp.responseText;

              }         

        };

        xmlHttpp.send(null);

      }   

    } 

   window.setTimeout("ShowResult()", 2000);

  



}





function eintragen(str)

{

  

    var xmlHttp = null;

    // Mozilla, Opera, Safari sowie Internet Explorer (ab v7)

    xmlHttp = new XMLHttpRequest();



    if (xmlHttp) {

    xmlHttp.open('GET', 'eintragen.php?search='+str, false);

    xmlHttp.send(null);

  }

  



}

Was passiert:
Sobald jemand die Internetseite aufruft wird dieses JS geladen, daraufhin erscheint ein Textfeld, wenn jetzt 2 Leute gleichzeitig auf der Seite sind kann jeder live sehen was der andere Schreibt

Problem:
Wenn ich was schreibe wird die funktion "eintragen" aufgerufen, allerdings ist das Problem das Wenn ich was schreibe und gleichzeitig auslese, mein geschriebenes �berschrieben wird. Kompliziert ne ?

Ich hoffe ihr konntet das verstehen.

TinyMCE Contextmen�

yfolz — Fri, 27 Aug 2010 11:22:55 GMT

Hallo Allerseits,

ich habe das Contextmen� das �ber die rechte Maustaste erreichbar ist, von TinyMCE um eigene Punkte erweitert. Nun w�rde ich gerne eine Funktion beim Klick aufrufen.

Code:

       g.add({

                title: "contextmenu.essential",

                icon: "essential",

                cmd: "tag_essential"

            });

Wei� jemand ob es f�r cmd eine Anweisung wie onClick gibt?

Danke schonmal im vorraus.

Gru� Yvon

MediaOutput: Darstellen von Bildern gr��er als 5 KB nicht m�glich

janpaet — Fri, 27 Aug 2010 09:34:04 GMT

Hallo zusammen,
ich habe das Problem, dass sich Bilder, die gr��er als 5 KB sind, nicht anzeigen lassen. Alles was kleiner 5 KB ist, wird problemlos dargestellt. Leider kann ich �berhaupt nicht erkennen, woran es genau liegt. Da fehlt es mir noch am allgemeinen Verst�ndnis.

Die Bilder werden aus einer Datenbank geholt und in eine Entity geladen.
Dargestellt sollen die Bilder mit MediaOutput.

Kann irgend jemand erkennen, was die Ursache f�r das Problem ist?
�ber einen Tip oder einen Ansatz w�re ich echt dankbar.
Viele Gr��e, Jan.

Hier sind mal die meiner Meinung relevanten Code-Ausz�ge.

Meine Entity:

Code:

@Entity

@Name("news")

@Scope(ScopeType.SESSION)

@NamedQueries ({

    @NamedQuery(name  = "News.findAll",

                query = "SELECT n FROM News n")

})

 

@Table(name="webNews")

 

public class News implements Serializable{

 

    private static final long serialVersionUID = 1L;

 

    private int newsId; 

    private String newsDate;

    private String newsMessage;

    private String newsSubject; 

    private byte[] newsImage;

    private String pictureDirection;

    

    @Id

    public int getNewsId() {return newsId;}

    public void setNewsId(int newsId) {this.newsId = newsId;}

    

    @Lob @Basic(fetch = FetchType.EAGER)

    public byte[] getNewsImage() {return newsImage;}    

    public void setNewsImage(byte[] newsImage) {this.newsImage = newsImage;}

    

    public String getNewsDate() {return newsDate;}

    public void setNewsDate(String newsDate) {this.newsDate = newsDate;}

    

    public String getNewsMessage() {return newsMessage;}

    public void setNewsMessage(String newsMessage) {this.newsMessage = newsMessage;}

    

    public String getNewsSubject() {return newsSubject;}

    public void setNewsSubject(String newsSubject) {this.newsSubject = newsSubject;}

    

    public String getPictureDirection() {return pictureDirection;}

    public void setPictureDirection(String pictureDirection) {this.pictureDirection = pictureDirection;}

 

}

Die Klasse mit der Paint-Methode() f�r MediaOutput

Code:

@Name("paintPicture")

@Stateful

@Scope(ScopeType.SESSION)

public class PaintPicture implements IPaintPicture {

 

    public void paintImage(OutputStream out, Object data) throws IOException {

        out.write((byte[]) data);

    }

}

Klasse zum Lader der Bilder aus der Datenbank

Code:

@Stateful

@Name("newsManager")

@Scope(ScopeType.SESSION)



public class NewsManager implements INewsManager{



        @PersistenceContext        

        private EntityManager em;

        

        @Out(required=false) @SuppressWarnings("unused") 

        private List newsList;



        @Factory("newsList") @SuppressWarnings("unchecked") 

        public void findNews(){

                newsList = em.createNamedQuery("News.findAll").getResultList();

        }



        @Override @Destroy @Remove

        public void destroy() { }

}

Auszug aus meiner XHTML

HTML-Code:

"#{newsList}" var="newsInfos">

          
               element="img" 

               session="true"                           

               cacheable="false" 

               createContent="#{paintPicture.paintImage}" 

               value="#{newsInfos.newsImage}"   

               mimeType="image/jpeg" />

Seiten Reload in Kombination mit einfachem embedded Webserver

casif — Fri, 27 Aug 2010 07:07:42 GMT

Hallo,

ich muss eine Seite von einem kleinen embedded Webserver permanent refreshen um den aktuellen Status abzufragen. Der Browser macht im Sekunden Takt ein Refresh, was nat�rlich immer ein Zucken des Browserbildes verursacht.

Gibt es eine M�glichkeit per Javascript zu pr�fen ob die Seite sich ge�ndert hat und nur dann den Reload durch zu f�hren?

Gru�
Casif

PHP anfrage mit Ajex Aktualisieren

dema — Thu, 26 Aug 2010 12:50:53 GMT

Hallo

Ich m�chte meine Datenbank anfrage mit Ajex Aktualisieren ohne das ich die Seite neu aufgerufen wird

Code:






// hier der Ajex code der wo mir den Inhalt alle 3sec aktualisiert





    // dann kommt der PHP code der Aktualisiert werden soll



     $query = mysql_query("SELECT * FROM tabelle"); 



         while($row = mysql_fetch_assoc($query)) { 

          

             echo $row['spaltenname'];

         }

// und Ihr ist es wieder schlu�

Kann mir einer so ein beispiel zusammen stellen probier das schon seit ein paar wochen.

gru�

DeMa

Suche L�sung f�r script Thema selected

nixnotz — Thu, 26 Aug 2010 12:23:41 GMT

Wir verwenden auf unserer Vereinshomepage ein Script zur Darstellung des Ergebnisdiensts f�r verschiedenen Ligen.

Da wir das Modul auf verschiedenen Seiten anzeigen, ist immer die 3. Liga "aktiv". Dies passt aber nicht immer. Es gibt Seiten da w�re es sch�ner z. B. den Bereich Verbandsliga beim Seitenaufruf direkt anzuzeigen. In Html gibt es da so eine �hnliche L�sung die man mit Selected erledigt. Hat jemand eine Idee f�r unser Script?

F�r eine Hilfe w�re wir sehr dankbar.

Code:









  3.Liga


  Oberliga


  Verbandsliga
















(...)











(...)











(...)

Problem mit der verarbeitung mehrerer AJAX Requests

darizzle — Wed, 25 Aug 2010 16:54:35 GMT

Hallo liebe AJAX-Community,

ich sitze nun leider schon seit zwei (oder vlt auch schon mehr) verzweifelten Tagen an folgendem Problem:
Ich m�chte meinen Kunden im Administrationsbereich seiner Webseite Listeneintr�ge editieren lassen k�nnen. Auf der Seite werden die Inhalte generell via eines XmlHttpRequests nachgeladen. Das hei�t mit Klick auf z.B. "T�tigkeitsfelder" (in der Navigation) wird ein Request an eine php-datei geschickt welche via case switch eine andere php-datei (z.b. taetigkeit.php) zur�ckliefert. Diese Datei ersetzt unter Zuhilfenahme der Funktion innerHTML ein Div auf der Seite. Um die T�tigkeitsfelder editierbar zu machen wird eine Liste und gleich darunter ein Speichern-Button angezeigt. Die Listeneintr�ge werden via PHP (taetigkeit.php) aus einer MySQL DB abgefragt. Nun m�chte ich die Listeneintr�ge mit druck auf den speichern button in die DB �bertragen bzw. aktualisieren, was folgenderma�en passiert: Der Button ruft bei "onClick" die JS-Funktion update_Taetigkeit() auf. Diese soll - um ein mehrfaches �berschreiben eines globalen xmlHttpObjekts zu verhindern - mehrere xmlHttpObjekte erzeugen. Das geschieht zum Einen �ber einen Counter der die Listeneintr�ge mitz�hlt und zum Anderen �ber eine Funktion die ein Array der Gr��e des Counters erstellt. Dieses Array wird durchlaufen und jedes einzelne xmlHttpObjekt wird an eine "update.php" abgeschickt. Gleichzeitig �bergebe ich das xmlHttpObjekt an eine handleRequestStateChange()-funktion, welche nach abgeschlossenem Request die Funktion handleServerResponse() aufrufen soll.
So und hier ist nun der Haken:
Die Daten werden erfolgreich via php-skript auf dem Server bzw. in der DB aktualisiert und gespeichert. Die Funktion handleServerResponse() wird allerdings nicht mehr ausgef�hrt. Seltsam ist, dass ich wenn ich einen alert() am Anfang der handleRequestStateChange()-Fkt. einf�ge die handleServerResponse()-Fkt. schon ausgef�hrt wird, sonst nicht. Manch einer m�ge jetzt sagen:"Was denn es funktioniert doch"- ich m�chte dem User aber nat�rlich mitteilen, dass er die Daten erfolgreich gespeichert hat.
Noch eine kleine Anmerkung - ich bin eher neu in diesem Thema (AJAX), also bitte verzeiht diese in meinen Augen eher unellegante L�sung, f�r bessere L�sungen bin ich nat�rlich gerne offen!

Hier ist der Code der angezeigten php-datei die bereits via eines xmlHttpRequests eingebunden wird:

PHP-Code:




    var count = 0;











    T�tigkeitsfelder

    

        

                                    $res = mysql_query('SELECT * FROM taetigkeitsfelder ORDER BY text');

                    while ($row = mysql_fetch_array($res))

                    {

                        if ($row['sub'] == 0 && !isset($row['isSubOf'])) 

                        {                

                            echo "";

                            echo ". $row['text'] . "' type='text' name='text' />"; 

                            echo ". $row['sub'] . "' />";

                            echo ". $row['isSubOf'] . "' />";

                            echo ". $row['tFeldID'] . "' />";

                            echo "
";

                            echo "count = count + 1";

                            }

                        

                        elseif ($row['sub'] == 1) 

                        {

                            echo "";

                            echo ". $row['text'] . "' type='text' name='text' />"; 

                            echo ". $row['sub'] . "' />";

                            echo ". $row['isSubOf'] . "' />";

                            echo ". $row['tFeldID'] . "' />";

                            echo "count = count + 1";

                                echo "";

                                

                                $resSub = mysql_query('SELECT * FROM taetigkeitsfelder WHERE isSubOf ='.$row['tFeldID'].' ORDER BY text');

                                while ($rowSub = mysql_fetch_array($resSub))

                                {

                                    echo "
";

                                    echo ". $rowSub['text'] . "' type='text' name='text' />"; 

                                    echo ". $rowSub['sub'] . "' />";

                                    echo ". $rowSub['isSubOf'] . "' />";

                                    echo ". $rowSub['tFeldID'] . "' />";

                                    echo "count = count + 1";

                                    echo "
";

                                }

                                

                                echo "";

                            echo "";

                        }

                    }

                    

                ?>

Hier ist der Code der JS-Datei:

Code:

/********* GLOBAL VARS ***********/

var requestArray = new Array();

var paramArray = new Array ();





/********* FUNCTIONS ***********/



function update_Taetigkeit () 

{

        setParamArray();

        setRequestArray();

        for (var i=0; i < count; i++)

        {

                if (requestArray[i])

                {

                        try

                        {

                                params = paramArray.shift();

                                requestArray[i].open("GET", "update.php?" + params,true);

                                requestArray[i].onreadystatechange = function () { handleRequestStateChange(requestArray[i]); };

                                requestArray[i].send(null);

                        }

                        catch (e)

                        {

                                alert("Can't connect to server:\n" + e.toString());

                        }

                }

        }

}





function setParamArray()

{

        for (var i=0; i
        {

                paramArray[i] =        "tFeldID=" + document.getElementsByName("tFeldID")[i].value 

                                                + "&text=" + document.getElementsByName("text")[i].value 

                                                + "&sub=" + document.getElementsByName("sub")[i].value 

                                                + "&isSubOf=" + document.getElementsByName("isSubOf")[i].value

                                                + "&tableID=taetigkeit";

        }

}





function setRequestArray() {

        for (var i=0; i
                {

                        requestArray[i] = createMoreXmlHttpRequestObjects(i);

                }

}





function createMoreXmlHttpRequestObjects(k) 

{

        requestArray[k];

        try 

        {

                requestArray[k] = new XMLHttpRequest();

        }

        catch (e) 

        {

                var XmlHttpVersions = new Array ("MSXML2.XMLHTTP.6.0",

                                                                                 "MSXML2.XMLHTTP.5.0",

                                                                                 "MSXML2.XMLHTTP.4.0",

                                                                                 "MSXML2.XMLHTTP.3.0",

                                                                                 "MSXML2.XMLHTTP",

                                                                                 "Microsoft.XMLHTTP");

                for (var i = 0; i
                {

                        try

                        {

                                requestArray[k] = new ActiveXObject (XmlHttpVersions[i]);

                        }

                        catch (e) {}

                }

        }

        

        if (!requestArray[k])

                alert ("Error creating the XMLHttpRequest object.");

        else 

                return requestArray[k];

}





function handleRequestStateChange(xmlHttpObject) 

{

        if (xmlHttpObject.readyState == 4)

        {

                if (xmlHttpObject.status == 200)

                {

                        try

                        {

                                handleServerResponse(xmlHttpObject);

                                }

                                catch (e)

                                {

                                        alert("Eror reading the response: " + e.toString());

                                        }

                }

                else 

                {

                        alert("There was a problem retrieving the data:\n" + xmlHttp.statusText);                        

                }

        }

}





function handleServerResponse(xmlHttpObject) 

{

        var content = xmlHttpObject.responseText;

        document.getElementById('mainContent').innerHTML = content;

        evalScript(content);

}

Wer mehr Code braucht oder andere Fragen hat, bitte bescheid sagen.
Im �brigen habe ich nat�rlich die Suchfunktion des Forums ben�tzt und leider keine passende L�sung f�r meinen Fall gefunden (oder vielleicht auch nicht verstanden).
Vielen Dank im Voraus!

Halbtransparente �berlagerung der WebSite + Status-Fenster on Top

oen — Wed, 25 Aug 2010 06:58:42 GMT

Moin Zusammen,

ich m�chte beim Absenden eines Formulares, oder anklicken eines Links ein
Overlay erzeugen (halbtranspartent) und dazu on TOP eine Art Status-Anzeige.
Es soll also der esamte Bereich des Browser-Inhaltes �berlagert werden und darauf ein kleiner Bereich in dem ich Status bzw. Messages anzeigen kann.

Hat jemand daf�r einen einfachen Vorschlag ?

Danke und Gru�
oen

Prototype und der Internet Explorer

nCL — Tue, 24 Aug 2010 16:43:06 GMT

Hallo,

kann mir einer von euch sagen warum diese Javascriptfunktion (Prototype) in jedem Browser funktioniert, nur nicht im Internet Explorer?

Code:

function init() {

        menu = new nav("menu");

        new Ajax.Updater("board","login.php",{

                evalScripts:true

        });

}

Der IE sagt immer das bei "new nav("menu")" der Fehler sei....
Meldung: "Das Objekt unterst�tzt diese Eigenschaft oder Methode nicht"

Falls ihr noch mehr Infos braucht sagt bitte bescheid.

Vielen Dank schonmal f�r eure Hilfe!

Datum in Formularfeld update mit AJAX

rainerwahnsinn — Tue, 24 Aug 2010 09:30:06 GMT

Hallo zusammen!

Ich bin neu hier und auf der Suche nach einer L�sung f�r ein wahrscheinlich einfaches Problem:

Ich habe ein Formular mit mehreren Textfeldern. Eines davon ist ein Datumsfeld, welches aus einem Kalender (Grafik mit JavaScript/Ajax) gef�llt wird.
Normal werden Textfelder mit AJAX beim Verlassen des Feldes automatisch gef�llt und schreiben die Werte in eine MSSQL-Datenbank.

Bei diesem Datumsfeld habe ich aber das Problem, das das Feld zwar gef�llt wird, aber der Eintrag in die Datenbank erst vorgenommen wird, wenn ich mit der Maus einmal in das Feld klicke und dann die Return-Taste dr�cke.

Was fehlt da noch?

PHP-Code:


$html .= " DueDate :";

                            $date = $row["DueDate"] == "" ? "" : DATE();

                            $html .= " ";

                            $html .= ":jsDateSelectorShowDateSelector('DueDate')\">";

Sch�nen Dank & Gruss

Rainer