javascript - jQuery > 更新表单提交时的内联脚本

Question

我正在使用ChemDoodle Web Components在网页上显示分子。基本上，我只需在页面中插入以下脚本，它将创建一个 HTML5 Canvas 元素来显示分子。

<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 文件在外部脚本中定义的变量。这一切都很好。

现在，我想在页面上包含一个表单，允许用户粘贴 PDB 分子定义。提交表单后，我想使用表单数据更新“分子”变量，以便 ChemDoodle Web Components 脚本发挥其魔力并显示由粘贴到表单中的 PDB 定义定义的分子。

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

$(".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;

});

这段代码在表单提交时设置“分子”变量，但它没有像我希望的那样被传递回内联脚本。我已经尝试了很多变体，但似乎无法做到正确。任何有关我可能出错的地方的线索将不胜感激。

Answer 1

也许让你的内联脚本成为一个函数？

<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);    
});