form conrfirmation and mediabox

[evantro]

Hello

I have a problem with 2 versions of Contao. With the 2.9 version the following script works, with the 2.11 or 3rc1 it doesn't.
can anyone help me to solve it out?

The purpose of the script is to display the confirmation page of a form in a mediabox. The mediabox opens but is empty... in the script $('f7') is the ID of the form.

<script type="text/javascript">
window.addEvent('domready',function() {
    $('f7').addEvent( 'submit', function(event){
        // Stop the submission of the form by the normal channels
        event.stop();
        // Submit the form using AJAX
        var myHTMLRequest = new Request.HTML(
            {
                url:'/mapage.html',
                // When the form submission is complete...
                onComplete:function(response) {
                    // Clear anything out of the mb_inline div
                    $('mb_inline').getChildren().destroy();
                    // Dump the response into the div
                    $('mb_inline').adopt(response);
                    // And open the div in the MediaBox
                    Mediabox.open('#mb_inline','Results of Submitted Form','300 200');
                }
            }).post($('f7'));
    });
});
</script>

you need somewhere on the page the following code and activate the moo_mediabox script.

<div id="mb_inline" style="display:none;"></div>

Thanks for your help

[Medianomaly]

Starting from 2.10, you also need to pass a request token when you submit the form. This is for security.

The form templates normally include this, but if you're using a custom template or copied the template you customized for 2.9, you'll need to make sure this is in there:

<input type="hidden" name="REQUEST_TOKEN" value="{{request_token}}">

Since you're posted everything in the form with your AJAX request, as long as that's in there it should work.

[evantro]

Hi,

I'm using a "standard" form, I didn't change the template, so the token exist. And I submit the entire form.

The thing is that the result I see in the div is the alias of the confirmation page instead of its result. It seems that the page is not processed...

There is an example here: http://franc-risqueurs.com/test.html

Thanks

[Medianomaly]

There's a syntax error in your script (line 266, column 16). The "function" is missing from the onComplete...

[evantro]

Thanks for your help, but it still not working...
The windows open but still empty
How could I debug ajax ?

how could I know what's wrong?

[Medianomaly]

It's progress at least...

But we're doing it wrong.

The AJAX call is returning the name of the page your supposed to redirect to ("confirmation.html") but we're setting up the script as though we're expecting to receive HTML code.

So... instead of setting it up like this:

onComplete: function(response)
{
    $('mb_inline').getChildren().destroy();
    $('mb_inline').adopt(response);
    Mediabox.open('#mb_inline','aaa','300 200');
    $$('input[type=submit]').set('disabled', false);
}

The mediabox docs say we could do this instead:

onComplete: function(response)
{
    // Just pass the URL directly...
    Mediabox.open(response,'aaa','300 200');
    $$('input[type=submit]').set('disabled', false);
}

So try that one out.

As far as how to debug AJAX, I'm using Firebug. Open the console, and every call logs an entry that you can expand and see what's being sent and what you're getting back. Other browsers like Chrome should some similar "developer tools" baked in.