[ajax]Form probleem bij opmaak.

[rhodium]

Ik ben bezig met ajax en volg een tut van http://www.captain.at/howto-ajax-form-post-get.php en dit werkt ook prima. Alleen wanneer ik het ga opmaken met table's of met div's dan weigert hij de form data te versturen of te verwerken .

Nu heb ik uren lang zitten zoeken en ben er eigenlijk al paar weken mee bezig en had dit opgelost via een andere manier, maar dit is niet zoals ik het wou.

Ik heb een voorbeeld gemaakt op: http://www.imdesign.nl/dev/got/

Zoals je in http://www.imdesign.nl/dev/got/met-opmaak.html kan zien is het een heel simpel tabletje, maar hij stuurt de data al niet meer door terwijl die in http://www.imdesign.nl/dev/got/zonder-opmaak.html wel alles doorgeeft.

Iemand hiervoor een oplossing, want het is echt gek van te worden.

[RobIII]

Je weet dat je een XML-response moet escapen?

< wordt dan &lt; e.d.

Ik heb niet je hele voorbeeld geanalyseerd; maar waarschijnlijk is dat je probleem.

[ Voor 29% gewijzigd door RobIII op 01-03-2007 14:10 ]

[SchizoDuckie]

HTML:

<form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform">

HTML:

<input type="button" name="button" value="Submit" onclick="javascript:get(this.parentNode);">

javascript: pseudo protocol is evil, sloop die om te beginnen weg.

Verder, prop een normale action in je form, gewoon index.php is genoeg.
Verder, van de onsubmit van de form af met een JS functie, en return daar false, dan wordt je form niet verzonden maar heb je wel een JS event afgevuurd.

spoiler:

Spam: Als het je niet lukt: Http://www.schizofreend.nl/Pork.Iframe/Examples/

[rhodium]

Na wat verder testen ben ik er achter gekomen dat alles in de FORM dus gestuurd wordt. Alleen wanneer hier een div of een table staat dan stuurt die dat alleen. Hoe kan ik dit oplossen?

[crisp]

Rddr schreef op donderdag 01 maart 2007 @ 14:05:
Ik ben bezig met ajax en volg een tut van http://www.captain.at/howto-ajax-form-post-get.php en dit werkt ook prima.
[...]

Wat een vreemde tutorial; ze hebben het over POST-requests mbv Ajax en vervolgens doen ze alleen maar GET's

Verder erg ranzige, incomplete en op punten zelfs incorrecte code. Ik zal thuis eens een net voorbeeld opsnorren...

[SchizoDuckie]

als je niet heel moeilijk wil doen en alleen een callback gebruiken wil bij een form submit kijk dan even op http://www.schizofreend.nl/Pork.Iframe/ (misschien heb je het gemist door m'n spoiler)
Scheelt je een hoop problemen en ik heb er examples bij staan

[crisp]

En zoals beloofd ook hier een voorbeeld maar dan echt Ajax - http://therealcrisp.xs4all.nl/meuk/ajaxpost.php

[Mark Wegener]

crisp schreef op vrijdag 02 maart 2007 @ 00:49:
En zoals beloofd ook hier een voorbeeld maar dan echt Ajax - http://therealcrisp.xs4all.nl/meuk/ajaxpost.php

Toevallig heb ik exact hetzelfde probleem as de TS. Hierboven staat een prachtig voorbeeld maar het is wel een vreselijk lang stuk code.

Ik begrijp niet welk stuk van deze code nu de waardes van het formulier uitleest. Dat zou namelijk wel makkelijk zijn als ik dat stuk in functie vorm zou hebben, zodat het makkelijk in mijn huidige code is aan te brengen.

[crisp]

Mark Wegener schreef op zondag 11 maart 2007 @ 20:15:
[...]

Toevallig heb ik exact hetzelfde probleem as de TS. Hierboven staat een prachtig voorbeeld maar het is wel een vreselijk lang stuk code.

Mwa, 400 regels code valt m.i. wel mee hoor. Het is dacht ik toch wel redelijk begrijpelijk opgezet...

Ik begrijp niet welk stuk van deze code nu de waardes van het formulier uitleest. Dat zou namelijk wel makkelijk zijn als ik dat stuk in functie vorm zou hebben, zodat het makkelijk in mijn huidige code is aan te brengen.

de method createPostBody

[Mark Wegener]

crisp schreef op zondag 11 maart 2007 @ 22:45:
[...]

Mwa, 400 regels code valt m.i. wel mee hoor. Het is dacht ik toch wel redelijk begrijpelijk opgezet...

[...]

de method createPostBody

Ik heb momenteel een stukje script van http://www.w3schools.com/ajax/ajax_example_suggest.asp afgehaald:

code:

var xmlHttp

function showValue (InputValue, DisplayTarget, ControlAction)
{
    if (InputValue.length == 0)
    {
        document.getElementById(DisplayTarget).innerHTML = "";
        return;
    }

    xmlHttp = GetXmlHttpObject()

    if (xmlHttp == null)
    {
        alert ("Your browser does not support AJAX!");
        return;
    }
 
    var url="ajax.php?sInput="+ InputValue +"&sDo="+ ControlAction +"&sid="+ Math.random();

    xmlHttp.onreadystatechange = function stateChanged()
    { 
        if (xmlHttp.readyState == 4)
        { 
            document.getElementById(DisplayTarget).innerHTML = xmlHttp.responseText;
        }
    }

    xmlHttp.open ("GET", url, true);
    xmlHttp.send (null);
}


function GetXmlHttpObject ()
{
    var xmlHttp = null;
    try
    {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    }
    catch (e)
    {
        // Internet Explorer
        try
        {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }

    return xmlHttp;
}

dat is niet zoveel regeltjes. En het doet precies wat ik wil: een ID invullen en hij geeft de bijbehorende waarde terug. En nu wilde ik dat dus uitbreiden met één extra invoer veld en dat deze, zonder de pagina te verversen, verzonden kan worden en dat onder de verzend knop komt te staan of dat gelukt is of niet. Maar blijkbaar is dat gedeelte niet zo simpel

Het moge duidelijk zijn dat ik niet die hard into Javascript ben.

[crisp]

Mark Wegener schreef op maandag 12 maart 2007 @ 00:27:
[...]

Ik heb momenteel een stukje script van http://www.w3schools.com/ajax/ajax_example_suggest.asp afgehaald:
[...]
dat is niet zoveel regeltjes.

Toch al 56, en een behoorlijk beperkt en slecht voorbeeld imo...

Het moge duidelijk zijn dat ik niet die hard into Javascript ben.

Misschien is het tijd om je daar dan toch wat meer in te verdiepen voordat je daarmee verder gaat?

[Mark Wegener]

crisp schreef op maandag 12 maart 2007 @ 00:37:
Toch al 56, en een behoorlijk beperkt en slecht voorbeeld imo...

het hoeft toch niet multi-functioneel te zijn als het gebruikt wordt voor 1 functie?

Misschien is het tijd om je daar dan toch wat meer in te verdiepen voordat je daarmee verder gaat?

ja ach, verder dan hierboven beschreven hoef ik ook niet te komen

[crisp]

Mark Wegener schreef op maandag 12 maart 2007 @ 01:04:
[...]

het hoeft toch niet multi-functioneel te zijn als het gebruikt wordt voor 1 functie?

Nee, dat niet, maar er zijn meer redenen waarom dit gewoon een voorbeeld van 'bad design' is...
En nee, ik heb geen zin om dat op dit moment te beargumenteren...

[Mark Wegener]

crisp schreef op maandag 12 maart 2007 @ 01:10:
[...]

Nee, dat niet, maar er zijn meer redenen waarom dit gewoon een voorbeeld van 'bad design' is...
En nee, ik heb geen zin om dat op dit moment te beargumenteren...

Oh, ik was wel benieuwd naar je argument(en). Zoals ik het zie is het namelijk niet nodig om extra functionaliteit toe te voegen, of de mogelijkheid hebben om deze te kunnen invoegen, aan iets dat nooit meer zal worden, keep simple things simple.

[crisp]

Mark Wegener schreef op maandag 12 maart 2007 @ 01:21:
[...]

Oh, ik was wel benieuwd naar je argument(en). Zoals ik het zie is het namelijk niet nodig om extra functionaliteit toe te voegen, of de mogelijkheid hebben om deze te kunnen invoegen, aan iets dat nooit meer zal worden, keep simple things simple.

ok, hier dan toch een paar van mijn argumenten:

Dit voorbeeld gaat uit van een asynchroon request, maar gebruikt maar 1 global variabele voor dit request-object. Op het moment dat je meerdere requests achter elkaar afvuurt zal een later request een eerder request kunnen overschrijven (wat in sommige browsers zelfs onvoorspelbare resultaten kan opleveren). Dit geheel afgezien van het feit dat elk key-event een request afvuren gewoonweg niet echt slim is. Een redelijke delay en client-side cacheing van voorgaande requests is veel handiger ook al kost dat meer code.

GetXmlHttpObject() houdt geen rekening met browsers die ueberhaupt geen XMLHttp of ActiveX ondersteunen, en gebruikt daarbij ook nog eens deprecated identifiers.

[ Voor 9% gewijzigd door crisp op 12-03-2007 01:34 ]

[aex351]

Je hebt ook niet veel code nodig om AJAX toe te passen. Om meer functionaliteit en flexibiliteit te krijgen wel. Dus gebruik lekker die 56 regels code en optimaliseer waar nodig. Heb je meer functionaliteit etc nodig dan kan je altijd je code uitbreiden en/of een (ajax) javascript framework gebruiken. Zoals prototype, Crisp gebruik die ook in zijn voorbeeld alleen heeft hij het één en ander gestript.

[ Voor 16% gewijzigd door aex351 op 12-03-2007 01:37 ]

[crisp]

aex351 schreef op maandag 12 maart 2007 @ 01:35:
Zoals prototype, Crisp gebruik die ook in zijn voorbeeld alleen heeft hij het één en ander gestript.

Ik heb me deels laten inspireren door prototype, maar het is geenszins een gestripte versie daarvan