Ajax in preSubmit

Olan

Hello,
I'm trying to do a syntax check before my data is submitted into the database. If my data is not correct, there should be the possibility to change the data. My data is checked and is wrong but for some reason i don't get the option to change. The wrong data is inserted.

My code is now:

editor.on( 'preSubmit', function ( e, o, action ) {
        if ( action !== 'remove' ) {
            var XMLrawData = editor.get( 'ECSSDATA_ssiformtekstblokken.xml' );
            var XMLdata = XMLrawData.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') ;
            o.data.ECSSDATA_ssiformtekstblokken.xml = XMLdata;

            $.ajax({
                type: "POST",
                data: {data:XMLrawData},
                dataType: "json",
                url: 'iformchecksyntax.php',
                cache: false,
                success: function(returnData) {
                    if (returnData != ''){
                        ECSSDATA_ssiformtekstblokken.xml.error('syntax not correct. Omschrijving: '+returnData);
                    }

                    if ( this.inError() ) {
                        return false;
                    }
                }
            });
        }
    } );

Someone know a way to get a ajax call working inside the preSubmit and get the ability to change the data when there is a error?

Thanks!
Olan

allan

The problem here if that the $.ajax call is async. There is no way for it to stop the preSubmit from completing. You could possibly use async: false, but that is deprecated in the XHR specification now so that wouldn't help much.

If you need an Ajax call to check the data, why not just allow it to submit and be validated as part of the form?

Allan

Olan

Thanks Allan. Can you give me a example of your idea how to do this?
I tried the async: false but this almost works. The only problem now is that the editor screen load indicator starts spinning and never stops. While the load indicator is spinning i can change the data now but cannot submit it.

aaronw

I think you're doing this in a strange manner. The point of presubmit is to do an immediate kick-back if the data is all wrong (i.e, the date isn't filled in). If you have a more exhaustive list of things to check, check it on the server side and then if it fails whatever you need it to check there, send it back as an error. Look at http://editor.datatables.net/manual/server

allan

You would need to return a value from the preSubmit event handler. At the moment your return is an inner function and thus it is never seen by Editor. In the success function you could assign a value and then the preSubmit would return that value.

However, as I say, async:false is deprecated - you'll get a warning about it in Chrome. It would be better to simply do the validation as part of the Editor submit rather than need two Ajax requests for every submit.

Allan

Olan

Thanks for the input! Can one of you provide a example?

allan

I'm not sure I understand I'm afraid. My recommendation (very strongly so) is not to make an Ajax call in preSubmit). Just let the form submit and validate the data as normal. You'd have to do it there anyway.

Allan

Olan

The data (syntax) that's submitted must be check externally. That's why i tried the ajax call. If the data is incorrect, the user must have the abillity to correct it.
If there is a good way to do this, please provide a example.

Thank you!

allan

You would still need to check it when you submit it to the server. It is trivial for someone who wants to do some damage to change the data of a request.

My suggestion is to do the validation as part of the form validation. Whatever server-side script you are using will likely have the ability to call an external service to validate it. That method is far more secure and more maintainable in the long run.

Allan