[AJAX/JS] Teruggeven in verschillende DIV's

[Verwijderd]

Hoi,

Ik zit met een klein probleempje met mijn JS script. Ik maak gebruik van de functies van prototype-1.3.1, en daarmee verwerk ik een formulier, en daarna geeft het aangeknoopte PHP script een zootje HTML terug. Maar daarna, moet er weer veranderingen aangebracht worden, en moet het oude blijven staan. Maar het probleem is, bij het aanroepen van de functie, controleerd PHP het een en het ander, en daarna moet er een onderscheidt gemaakt worden, van wat op welke plek op de site komt. Maar hoe kan ik dat het beste doen met PHP/AJAX? Ik moet eigenlijk in de PHP kunnen aangeven in welk element de output komt te staan...

bedankt avlast

[Verwijderd]

kan je iets concreter zijn? voorbeeld?

[Verwijderd]

JavaScript:

    function send(){
        var params = Form.serialize($('inzet'));
        new Ajax.Updater('updateDiv', 'script.php', {asynchronous:true, parameters:params, onComplete:kaarten});
    }

Dit form submit de 'inzet'. Ik moet in het PHP script kijken of de gebruiker wel zoveel geld heeft. Als hij genoeg geld heeft, laat ik in element1 zien: Je hebt genoeg geld.

Als hij echter te kort geld heeft, wil ik dit in element 2 laten zien.

Ik denk dat ik mijn probleem zo het duidelijkst uitleg.

[Reveller]

Ik weet niet zeker of ik je probleem begrijp, maar ik probeer toch maar wat tips te geven die je wellicht kunnen helpen:

Als je probleem is dat je meerdere divs wilt updaten, kun je de server toch een string laten retourneren van de vorm {div1:inhoud_div_1, div2:inhoud_div_2}, etc. Dan splitten op "," en de divs stuk-voor-stuk updaten?

Als je probleem is dat je "je hebt genoeg geld" of "je hebt een tekort" als boodschap wil geven, hoef je toch niet 2 aparte divs hiervoor aan te leggen? Gewoon 1 div en dan als inhoud daarvan de eerste of de tweede boodschap door de server laten terugsturen?

[ Voor 8% gewijzigd door Reveller op 17-02-2007 23:36 ]

[BasieP]

volgens mij zijn er een aantal dingen:

ten eerste, dat wat je nu gebruikt is geen ajax. aangezien je geen xml terugkrijgt.

ten tweede, de reden dat mensen xml terug willen is zodat ze hun data zelf kunnen invullen. Wat jij teruggeeft is html, als platte tekst. je kan deze niet in 2 stukken hakken en op twee plekken neerzetten.
Dit is precies een van de redenen dat er XML gebruikt kan worden

XML:

<deel1>
<titel>Deel 1</titel>
<text>blaaat</text>
</deel1>
<deel2>
<titel>Deel 2</titel>
<text>dit is deel 2</text>
</deel2>

mocht je toch geen xml willen gebruiken (En dus geen ajax) dan kan je twee html requests sturen, en zodoende twee resultaten terug krijgen. Dit kan zowel synchroom als a-synchroom (zie: http://ajax.phpmagazine.n...s_versus_asynchronou.html)

[SchizoDuckie]

BasieP schreef op zaterdag 17 februari 2007 @ 23:41:
ten eerste, dat wat je nu gebruikt is geen ajax. aangezien je geen xml terugkrijgt.

Ow please stop it... Weer zo iemand die de klok wel heeft horen luiden maar niet echt weet waar de klepel hangt..

'Ajax' is een VERZAMEL naam voor allerlei technieken die via het XMLHTTP request object gegevens binnensleuren. De X hoeft dan ook niet te staan voor XML maar voor XMLHTTPRequest. Je kan over het XMLHTTPRequest namelijk ook een JSON object, HTML, XSL, BSON of wat dan ook retourneren.

Als je in dit geval zoals in reveller z'n reactie JSON terugstuurt ne hier een eval(); overheen gooit, dan voila, je hebt een JavaScript Object (en ja, er zijn mooiere manieren misschien dan eval() maar ik ben van mening dat als je wéét aan de serverside wat je terugstuurt en dat je dat dus best door een eval() heen kan kiepen.

Ik heb dit zelf op de volgende manier opgelost in m'n ietwat gemodde prototype lite (je zult dus zelf even moeten kijken of dit zo ook in jouw prototype handeltje past)

JavaScript:

onStateChange: function(){
        if (this.transport.readyState == 4 && this.transport.status == 200) {
            if (this.onComplete) 
                setTimeout(function(){this.onComplete(this.transport);}.bind(this), 10);
            if (this.update)
                setTimeout(function(){this.update.innerHTML = this.transport.responseText;}.bind(this), 10);
            if (this.updateMultiple) // JSON support!
                {
                    eval("var inputObject = "+this.transport.responseText); // we're expecting a JSON object, eval it to inputObject
                    for (var i in inputObject)  {
                        if (elm = $(i)) { elm.innerHTML = inputObject[i]; } // it's not script, update the corresponding div
                            else { alert("element "+i+" not found!");   } // or not.
                }
            this.transport.onreadystatechange = function(){};
        }
    },

[xces]

Aangezien TS zo te zien Prototype gebruikt:
Je kunt maar 1 div hebben die de ajax call ontvangt. Dat is de achterliggende gedachte achter Prototype. Je kunt deze div wel verborgen houden, zodat hij puur voor ontvangst van de data is. Afhankelijk van wat je ontvangt kun je dus de ene div of de andere div updaten. Je moet dan alleen geen ajax.updater gebruiken, maar het volgende:

JavaScript:

new Ajax.Request('/some_url',
  {
    method:'get',
    onSuccess: function(transport){
      var response = transport.responseText || "no response text";

      ... [ code hier invoegen ] ...

      alert("Success! \n\n" + response);
    },
    onFailure: function(){ alert('Something went wrong...') }
  });

Code gedeeltelijk geleend van: http://www.prototypejs.org/learn/introduction-to-ajax

Suc6

[ Voor 6% gewijzigd door xces op 19-02-2007 09:14 ]