AJAX i SPRY - Kako onemogućiti form submit

[ misxa @ 23.08.2007. 11:49 ] @

Upotrebom AJAX i SPRY tehnika programiranja želimo da izbjegnemo dosadno ponovno učitavanje stranica prilikom razmjene podataka između stranice i baze podataka. Ukoliko koristimo HTML formu za unos i slanje parametara bazi podataka, kako bi izbjegli ponovno učitavanje stranice moramo onemogućiti FORM SUBMIT tako što vezujemo onSubmit() događaj za formu, u okviru koga navodimo:

Code:

<form class="forma" onsubmit="process(); return false;">

Evo i primjera koda:

Code:

<script type="text/javascript" src="spry/includes/xpath.js"></script>
<script type="text/javascript" src="spry/includes/SpryData.js"></script>
<script type="text/javascript">
var url = 'xml.php';
var xpath = 'kategorije/kategorija';
var dsKategorije = new Spry.Data.XMLDataSet(url, xpath);
dsKategorije.setColumnType("rbr", "number");
dsKategorije.setColumnType("@id", "number");

// MySQL data update and XML data refresh
function process()
{
    var formMethod = "POST";
    var naziv = Spry.$('naziv').value;
    var formData = 'naziv=' + naziv;
    formData = encodeURI(formData);
    var header = { "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8" };

    //dsKategorije.setURL(url, {method: "POST", postData: formData, headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"}});
    dsKategorije.setURL(url, {method: formMethod, postData: formData, headers: header});
    dsKategorije.loadData();
}

...

Code:

<div spry:region="dsKategorije" class="podaci">
<table class="tabela">
      <caption class="naslov">Kategorije</caption>
      <tr class="zaglavlje">
            <th scope="col" spry:sort="rbr">#</th>
            <th scope="col" spry:sort="@id">ID</th>
            <th scope="col" class="nnaziv" spry:sort="naziv">Naziv</th>
      </tr>
      <tr spry:repeat="dsKategorije" spry:odd="red0" spry:even="red1" spry:hover="red2">
            <td class="broj">{rbr}</td>
            <td class="broj">{@id}</td>
            <td><div class="tekst">{naziv}</div></td>
      </tr>
</table>
<form class="forma" onsubmit="process(); return false;">
    <div class="akcija">
        <span>Naziv: </span><input id="naziv" type="text" value="" size="35">
        <input type="button" value="Dodaj">
        <input type="hidden" value="akcija">
    </div>
</form>
</div>