Question

Hello dearest community.

I have trouble in the last two days, that I can’t solved.
The problem is I had a Dojo Form defined this way :

<div id="reportBulananDialog" jsId="reportBulananDialog" dojoType="dijit.Dialog" title="Laporan Bulanan" draggable="true">
        <div dojoType="dijit.form.Form" id="reportBulananForm" jsId="reportBulananForm" action="action/display_reportBulanan.php" method="post">
...

And the connection call in a script.js file defined this way :

dojo.connect(mnuLaporanBulanan, "onClick", null, function(e) {
        dijit.byId("reportBulananDialog").show();
    });
 dojo.connect(reportBulananForm, "onSubmit", null, doReportBulananForm);
    dojo.connect(reportBulananCancel, "onClick", null, function(e) {
        reportBulananDialog.hide();
    });

You can see that I connect onSubmit event to function doReportBulananForm defined this way:

function doReportBulananForm()
{   
    alert('test1');
    dojo.xhrPost({
        form: this.domNode,
        handleAs: "json",
        load: function(data) {
            alert("after call: " + data);
            if(data.success) {
                reportBulananDialog.hide();
                okDialog.set("title","Menampilkan report");
                okDialogMsg.innerHTML = "Report";
                okDialog.show();
            }
            else {
                okDialog.set("title","Error creating group");
                okDialogMsg.innerHTML = data.error;
                okDialog.show();
            }
        },
        error: function(error) {
            okDialog.set("title","Error creating group");
            okDialogMsg.innerHTML = error;
            okDialog.show();
            alert("error " + data);
        }
    });
    alert('test2');
}

The problem is, the application always redirect the flow of application to the file action/display_reportBulanan.php, not handling its json output..

This is very confusing, what did I do wrong?

Thanks,
Eko

Answer 1

I think you have to prevent the default form submit.
In your onSubmit handler, do this instead :

function doReportBulananForm(evt)
{   
    evt.preventDefault();
    alert('test1');
    // The rest of your code goes here
}

You may also add an event argument to your function call in the connect :

dojo.connect(reportBulananForm, "onSubmit", null, doReportBulananForm(evt));

See this page for details : http://dojotoolkit.org/reference-guide/quickstart/events.html