MarvinJS responds with empty string in Internet Explorer 11

Hi,

I am testing the MarvinJS and find that in IE 11.0 it returns an empty string instead of molfile.  The JS to retrive the molfile to a hidden field works perfectly in Chrome, Safari, etc... but in IE 11.0 it just returns an empty value for either the mrv or molfile format.

My JS is posted below.

 

 

<script  type="text/javascript">

 

        //this is how we refer to the Marvin JS object.

 

        var marvinSketcherInstance;

 $(document).ready(function(e) {

            var promise = MarvinJSUtil.getEditor("#sketch");

            promise.then(function (sketcherInstance) {

                marvinSketcherInstance = sketcherInstance;

                RepaintChemdrawFromCache();

            }, function (error) {

                alert("Cannot retrieve sketcher instance from iframe:" + error);

            });

 

            $("[id$='form1']").submit(GetChemdrawData);

 

 

        });

 

        function ApplyMol(sMol) {

            SetMarvinJSdata('mol', sMol);

        }

 

 

        function GetChemdrawData() 

        {

            GetMarvinJSdata('hidMOL', 'mol')

            GetMarvinJSdata('hidCDXcache', 'mrv') //Cache structures so Drawing applet supports structure display over postbacks.

        }

 

        function GetMarvinJSdata(dest, type) 

        {

            var $dest = $("[id$='" + dest + "']")

 

            marvinSketcherInstance.exportStructure(type).then(function(source) {

                $dest.val(source);

            }, function(error) {

                alert("Molecule export failed:"+error);

            });

 

        }

        function SetMarvinJSdata(type, structure)

        {

            marvinSketcherInstance.importStructure(type, structure).catch(function (error) {

                alert(error);

            })

        }

 

        function RepaintChemdrawFromCache() 

        {

 

            //`function so that the Chemdraw control maintains it's structure drawing

            // during postback so UserValidation of form does not result in having 

            // the structure cleared on every submit.

            try

            {

                var sCDX = $("[id$='hidCDXcache']").val();

                if (sCDX.length > 0)

                    SetMarvinJSdata("mrv",  sCDX);

            }

            catch(err){}

 

        }

 

    </script>

I am sorry about the late reply. Thank you for reporting this issue. Unfortunately, we cannot see so far the reason of the different behavior.

Best regards,

Efi

Hi, 

We have not been able to reproduce this issue so far, but we carry on the investigation of this problem.
Thank you for your patience.

Kind regards,
Eszter 

Hi,

The exportStructure function makes an asynchronous call, and it seems to us, that in your code it is not granted that it returns with the source before the submit action.
That can cause the empty string.

However it is strange that you can only experience this issue in Internet Explorer, as it should not be a browser-dependent issue. 

Could you confirm, that the issue is still exists, when  the form is submitted after the promise get back?

Kind regards,
Eszter 

sorry for the slow reply. 

The original code I posted has intermittent issues on all browsers, definitely to do with being asynchronous.

The issue is not limited to IE, that is just the browser with the most frequent  failures.

 

 

I have created a standalone example to demonstrate how to get drawn structure and post it to another page.

Just extract the attached zip in the Marvin JS package and load examples/form/example-submit-form.html

When you push the Submit button, the current structure is retrieved from the editor in MRV format and the value of hidden input field on the form is updated. After that, the form is automatically submitted.

The form is posted to "echo.php" (also attached) that displays the posted data as string.

Can you reproduce the original issue with this example?

If you take a look at to the JavaScript code in the example-submit-form.html, you can see that the submit event was triggered after the response of the promise object is received. I recommend this way to submit molecule source.

$("#btn-submit").click(function() {
    marvinSketcherInstance.exportStructure('mrv').then(function(source) {
       $("#input-mrv").val(source);
       var form = $("#molform");
       form.submit();
    }, function(error) {
       alert("Cannot export structure:"+error);
    });
})

Tamas,

Thank you for the code snippet.  I was unfamiliar with promises, so it took me a bit to integrate your snippet into a real world case.  

For anyone else that is stuck on this, I highly reccomend reading: 

http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html.

For people trying to use the Promise returned from MarvinJS into all your other code, what I finally came to is that everything needs to be a promise, and all functions need to return promises, then it all works well.

I may have messed up the error handling, as I am not sure how the catch() "bubbles up"  but the idea of returning promises was very helpful to me.

$("[id$='cmdSubmit']").click(function () {

            if (Page_ClientValidate()) {

                //inform the user

                $(this).attr('value', 'Submitting...');

                $('#loading').show();

 

                //if load the hiddens, then do postback

                GetMarvinJSdata('hidMOL', 'mol')

                    .then(GetMarvinJSdata('hidCDXcache', 'mrv'))

                    .then(form1.submit());

            }

        });

 

        //Gets chemical data out of MarvinJS and puts

        //it into the "dest" field, by name. 

        function GetMarvinJSdata(dest, type) {

            var $dest = $("[id$='" + dest + "']")

 

            //don't use then(,) use .then().catch(), to catch if the "$dest.val(source);" fails

            return marvinSketcherInstance.exportStructure(type).then(function (source) {

                return Promise.resolve($dest.val(source));

            }).catch( function (error) {

                alert("Molecule export failed:" + error);

            });

 

        }

~mike 

 

Hi,

Thanks for the feedback and the attached article. I guess it can be useful for other users too.

I have tried the following statement in the https://marvinjs-demo.chemaxon.com/latest/examples/example-getmol.html example without any problem:

marvinSketcherInstance.exportStructure('mrv').then(function(source) { return Promise.resolve($('[id=molsource]').val(source)); }).catch(function(error) { alert("failed:"+error); });

The molecule source has been displayed in the textarea.

When I gave invalid format, the alert window appeared:

marvinSketcherInstance.exportStructure('mrv').then(function(source) {

 return Promise.resolve($('[id=molsource]').val(source)); 

}).catch(function(error) { alert("failed:"+error); });

Hi Tamas,

Excellent! that error handler example really helped me, thank you.

Yes, the article & example was for other users like me that might never have seen promises. Not for you guys, I know you already totally understand promises. :-)

~mike

P.S. Sorry for the very slow replies, my account does not email me when the forum is updated, so I need to remember to go back and check.

 

Thanks for the feadback.

Hi 

 

I tested your example : 

http://chidept.cn.cnrs.fr/examples/form/example-submit-form.html

 

but nothing when i push the submit button?

why?

 

Best 

 

Kiet

ok it works nows ;)

 

Kiet