jQuery>在表单提交时更新内联脚本 [英] jQuery > Update inline script on form submission

问题描述

我正在使用 ChemDoodle Web组件在网页上显示分子.基本上，我可以在页面中插入以下脚本，它将创建一个HTML5 canvas元素来显示分子.

I am using the ChemDoodle Web Components to display molecules on a web page. Basically, I can just insert the following script in my page and it will create an HTML5 canvas element to display the molecule.

<script>
    var transform1 = new TransformCanvas('transform1', 200, 200, true);
    transform1.specs.bonds_useJMOLColors = true;
    transform1.specs.bonds_width_2D = 3;
    transform1.specs.atoms_useJMOLColors = true;
    transform1.specs.atoms_circles_2D = true;
    transform1.specs.backgroundColor = 'black';
    transform1.specs.bonds_clearOverlaps_2D = true;
    transform1.loadMolecule(readPDB(molecule));
</script>

在此示例中，分子"是我在外部脚本中通过使用jQuery.ajax()函数加载PDB文件定义的变量.很好，一切都很好.

In this example, "molecule" is a variable that I have defined in an external script by using the jQuery.ajax() function to load a PDB file. This is all fine and good.

现在，我想在页面上包含一个表格，该表格将允许用户粘贴PDB分子定义.提交表单后，我想用表单数据更新"molecule"变量，以便ChemDoodle Web Components脚本能够发挥其魔力并显示粘贴到表单中的PDB定义所定义的分子.

Now, I would like to include a form on the page that will allow a user to paste in a PDB molecule definition. Upon submitting the form, I want to update the "molecule" variable with the form data so that the ChemDoodle Web Components script will work its magic and display molecule defined by the PDB definition pasted into the form.

我正在使用以下jQuery代码来处理表单提交.

I am using the following jQuery code to process the the form submission.

$(".button").click(function() {  
 // validate and process form here

    //hide previous errors
    $('.error').hide();

    //validate pdb textarea field
    var pdb = $("textarea#pdb").val();
    if (pdb == "") {
        $("label#pdb_error").show();
        $("textarea#pdb").focus();
        return false;
    }
    molecule = pdb;

});

此代码在提交表单时设置了分子"变量，但没有像我希望的那样传递回内联脚本.我对此进行了多种尝试，但似乎无法正确解决.任何有关我可能会出错的线索都将不胜感激.

This code is setting the "molecule" variable upon the form submission but it is not being passed back to the inline script as I had hoped. I have tried a number of variations on this but can't seem to get it right. Any clues as to where I might be going wrong would be much appreciated.

推荐答案

也许使内联脚本具有功能?

Maybe make your inline script a function?

<script>
function LoadMolecule(molecule) {
    var transform1 = new TransformCanvas('transform1', 200, 200, true);
    transform1.specs.bonds_useJMOLColors = true;
    //...etc...
    transform1.specs.bonds_clearOverlaps_2D = true;
    transform1.loadMolecule(readPDB(molecule));
}
</script>

然后...

$(".button").click(function() {  
 // validate and process form here

    //hide previous errors
    $('.error').hide();

    //validate pdb textarea field
    var pdb = $("textarea#pdb").val();
    if (pdb == "") {
        $("label#pdb_error").show();
        $("textarea#pdb").focus();
        return false;
    }
    LoadMolecule(pdb);    
});

这篇关于jQuery>在表单提交时更新内联脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！