Ajax post method

[Verwijderd]

Ik probeer via ajax een formulier dat ik in een pagina heb geladen door te sturen doormiddel van de post method maar dit wil niet echt lukken. Ik gebruik het prototype bestand dat bij scriptaculo zit. Dit is de code die ik gebruik om het formulier te submitten

code:

<a href="#" onClick="{literal}new Ajax.Updater('cat2', 'ajax_cats.php?edit={/literal}{$v.cat_id}{literal}', {method: 'post', postBody: escape('catname='), onLoad: getDiv('loading'), onComplete: closeDiv('loading')}){/literal}"><img src="templates/default/images/edit.png" alt="Bewerken" title="Bewerken" border="0"></a>

Het is dus de bedoeling dat het veld met de name catname wordt duurgestuurt naar de pagina ajax_cats en dat daar het item met id {$v.cat_id} wordt bijgewerkt. Met de get functie krijg ik het erdoor maar zo kan ik het pas ingevulde veld niet posten... Ik doe waarschijnlijk iets verkeerd en op de website van prototype vind ik over die post methode niet veel informatie.


Ondertussen heb ik wat verder gezocht naar een oplossing en nu heb ik dit stukje code:

code:

<form action="" method="post" name="edit_cat">

<table cellspacing="0" cellpadding="5" style="width: 100%">
    <tr>
        <td class="table_header" style="width: 25px; text-align: center;">&nbsp;</td>
        <td class="table_header">Categorie</td>
        <td class="table_header" style="width: 150px; text-align: center;">Inhoud</td>
        <td class="table_header" style="width: 25px; text-align: center;"><img src="templates/default/images/edit.png" alt="Bewerken" title="Bewerken" border="0"></td>
        <td class="table_header" style="width: 25px; text-align: center;"><img src="templates/default/images/delete.png" alt="Verwijderen" title="Verwijderen" border="0"></td>
    </tr>

    {foreach from=$cat key=k item=v}

        <tr>
            <td class="table_content" style="text-align: center;"><img src="templates/default/images/cat.png" alt="" title="" border="0" style="vertical-align: bottom"></td>
            <td class="table_content"><input type="text" name="cat_name" value="{$v.cat_name}" class="camouflaged"></td>
            <td class="table_content" style="text-align: center;">{$v.cat_rows}</td>
            <td class="table_content" style="text-align: center;">
                <a href="#" onClick="{literal}new Ajax.Updater('cat', 'ajax_cats.php?edit={$v.cat_id}', {method: 'post', parameters: $('edit_cat').getInputs('text', 'cat_name'), onLoad: getDiv('loading'), onComplete: closeDiv('loading')}){/literal}"><img src="templates/default/images/edit.png" alt="Bewerken" title="Bewerken" border="0"></a>
            </td>
            <td class="table_content_end" style="text-align: center;"><a href="#" onClick="{literal}new Ajax.Updater('cat', 'ajax_cats.php?delete={/literal}{$v.cat_id}{literal}', {method: 'post', onLoad: getDiv('loading'), onComplete: closeDiv('loading')}){/literal}"><img src="templates/default/images/delete.png" alt="Verwijderen" title="Verwijderen" border="0"></a></td>
        </tr>

    {/foreach}

</table>

</form>

[ Voor 50% gewijzigd door Verwijderd op 20-08-2007 10:37 ]

[SchizoDuckie]

• Wat doet dat {listeral} tusen je js? Ik hoop dat dat eruit gesloopt wordt door je template parser?
• Welk JS framework gebruik je?
• Kijk eens naar een form serialize functie

[Verwijderd]

Ja die literal wordt eruit gefilterd. Ik gebruik de smarty template parser en die gebruikt die { } tags die ook in scriptaculo gebruikt worden vandaar die functie literal. Scriptaculo gebruik voor ajax requests prototype dacht ik.

Wat bedoel je met serialized?

[JKVA]

Verwijderd schreef op maandag 20 augustus 2007 @ 18:49:
Ja die literal wordt eruit gefilterd. Ik gebruik de smarty template parser en die gebruikt die { } tags die ook in scriptaculo gebruikt worden vandaar die functie literal. Scriptaculo gebruik voor ajax requests prototype dacht ik.

Wat bedoel je met serialized?

Scriptaculous gebruikt idd onder water prototype.

En probeer voor de gein eens je catId property in je postBody te zetten, tussen de andere parameters. Ik verwacht dat dat scheelt.

[Verwijderd]

Op deze manier werkt het niet:

code:

<a href="#" onClick="{literal}new Ajax.Updater('cat', 'ajax_cats.php?edit={$v.cat_id}', {method: 'get', postBody: escape('cat_name=true'), onLoad: getDiv('loading'), onComplete: closeDiv('loading')}){/literal}"><img src="templates/default/images/edit.png" alt="Bewerken" title="Bewerken" border="0"></a>

Moet ik in de pagina ajax_cats.php de gesubmitte velde oproepen dan met $_POST of $_GET?

[JKVA]

Volgens mij kun je de get parameter niet uitvragen als je een post doet. Zoiets hangt me tenminste bij.

Post eens naar de URL ajax_cats.php en geef die edit={$v.cat_id} eens in je postBody mee.

V.w.b. de $_POST en $_GET arrays, als je post gebruik je $POST, anders $GET.

[Verwijderd]

code:

<tr>
    <td class="table_content" style="text-align: center;"><img src="templates/default/images/cat.png" alt="" title="" border="0" style="vertical-align: bottom"></td>
    <td class="table_content"><input type="hidden" name="cat_id" value="{$v.cat_id}"><input type="text" name="cat_name" value="{$v.cat_name}" class="camouflaged"></td>
    <td class="table_content" style="text-align: center;">{$v.cat_rows}</td>
    <td class="table_content" style="text-align: center;">
        <a href="#" onClick="{literal}new Ajax.Updater('cat', 'ajax_cats.php', {method: 'post', postBody: escape('edit={/literal}{$v.cat_id}{literal}&cat_name=true'), onLoad: getDiv('loading'), onComplete: closeDiv('loading')});{/literal}"><img src="templates/default/images/edit.png" alt="Bewerken" title="Bewerken" border="0"></a>
    </td>
    <td class="table_content_end" style="text-align: center;"><a href="#" onClick="{literal}new Ajax.Updater('cat', 'ajax_cats.php?delete={/literal}{$v.cat_id}{literal}', {method: 'get', onLoad: getDiv('loading'), onComplete: closeDiv('loading')}){/literal}"><img src="templates/default/images/delete.png" alt="Verwijderen" title="Verwijderen" border="0"></a></td>
</tr>

in die pagina ajax_cats.php staat niet veel speciaals voor dat onderdeel gewoon een if loop om te zien of er een variabele is meegegeven:

code:

if (isset($_POST['edit'])) {

  echo 'gelukt';

}

[funkwurm]

JKVA schreef op dinsdag 21 augustus 2007 @ 13:11:
Volgens mij kun je de get parameter niet uitvragen als je een post doet. Zoiets hangt me tenminste bij.

Ik volg dit topic niet heel goed omdat ik niet met de gebruikte libraries werk, maar deze onzekerheid kan ik wegnemen. Get en Post gebruiken gaat prima samen voor wat betreft server-side (je hebt het immers over uitvragen):

HTML:

<form action="verwerk.php?my_get_var=my_value" method="post">
[...]

Ik vind dit zelf vaak een mooiere manier dan een input type="hidden".

[JKVA]

funkwurm schreef op dinsdag 21 augustus 2007 @ 20:58:
[...]

Ik volg dit topic niet heel goed omdat ik niet met de gebruikte libraries werk, maar deze onzekerheid kan ik wegnemen. Get en Post gebruiken gaat prima samen voor wat betreft server-side (je hebt het immers over uitvragen):

HTML:

<form action="verwerk.php?my_get_var=my_value" method="post">
[...]

Ik vind dit zelf vaak een mooiere manier dan een input type="hidden".

Hmm, ok. Ik heb ooit problemen gehad met iets dergelijks, maar misschien had dat een andere oorzaak. (waarschijnlijk wel, aan jouw reactie te lezen )

[Verwijderd]

Het posten van data via AJAX gaat in het kort een beetje zo:

JavaScript:

var Requester = new XMLHttpRequest;
Requester.open('POST', './depagina.php');
Requester.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
Requester.onreadystatechange = function(){
  if((this.status == 200) && (this.readyState == 4)){
    // hier je request afhandelen wanneer je iets terug krijg
  }
}
Requester.send('variabelenaam=' + escape('de_data_die_je_wilt_versturen') + '&nogeenvariabelenaam=' + escape('de urlencoded data die nogeenvariabelenaam moet krijgen'));

BTW: >> new XMLHttpRequest; << Moet je in IE even wat anders oplossen.

[ Voor 5% gewijzigd door Verwijderd op 23-08-2007 10:36 ]