Javascript jQuery>；在表单提交时更新内联脚本

我正在使用在网页上显示分子。基本上，我可以在我的页面中插入以下脚本，它将创建一个HTML5画布元素来显示分子

<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>

---

这段代码在表单提交时设置“molecular”变量，但并没有像我所希望的那样将其传递回内联脚本。我尝试了很多不同的方法，但似乎都做不好。任何关于我可能出错的线索都将不胜感激。

编辑：我想我对这个问题的理解有很大的错误。我认为您有一个JavaScript代码文本框，需要将其解析为JavaScript以形成一个molocules:）。万一我没看错问题，我就把答案留在这里……）

你必须使用脏的，但要注意

设置

molecular=pdb

实际上没有意义

eval

返回最后一个表达式返回的值（例如，在您的示例中，

loadMolecule

返回的值）

---

目前它不起作用的原因是因为

pdb

只是字符串（JavaScript不关心它是否包含有效的JavaScript；它只是一个字符串！）

也许可以将内联脚本作为函数

<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>

---

你提到你正在使用一个表单。如果是真的，是否需要阻止页面提交？如果是这样，我认为您需要在成功路径的某个地方返回false，以防止表单实际提交。

与您的问题无关，但是您可以通过从选择器中删除节点类型（例如，

$（“#pdb”）

）来优化按ID选择的jQuery选择器（

）。ID在页面上应该是唯一的，因此不需要限制结果。对于通过类（

.something

）和属性（

[name=something]

）进行的选择，最好指定节点类型。Matt，感谢您的建议。不幸的是，当我尝试这种方法时，画布出现了一瞬间，然后消失了。我认为这可能与ChemDoodle脚本如何生成画布有关。考虑到我有限的脚本能力，我可能只需要退一步，重新考虑一下我的目标！这就是我所缺少的（再加上马特·谢尔曼斯的投入）。谢谢

try { 
  eval(pdb);
} catch (e) {
  // error; syntax error in their code.
};

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