Question

我在清除应用程序中的文本区域时遇到问题。该应用程序有两种获取特定数据格式的方法：搜索在线数据库和使用JavaScript库。

第一种方法：用户在文本字段中键入化学名称，然后按“搜索”按钮。如果请求的化合物在数据库中，则在文本区域中显示正确的格式。

第二种方法：如果在数据库中找不到名称，那么用户可以使用JS库生成一个在同一文本区域中显示的正确格式。

如果用户首先使用数据库，则文本区域包含来自数据库的生成数据，如果用户决定使用它，则可以由JS库生成的数据替换。问题是如果文本区域已经有JS库生成的数据，则在使用第一种方法时，它不能被数据库中的数据替换。在从数据库插入数据之前，我不知道如何清除包含数据的文本区域（由JS库生成）。抱歉，如果它仍然听起来令人困惑。

这是一个javascript代码：

<script>
  var sketcher = new ChemDoodle.SketcherCanvas('sketcher', 400, 300, {useServices:true});
  var mol = sketcher.getMolecule();
  var molFile = ChemDoodle.writeMOL(mol);

  function myFunc($data)
 {
  document.getElementById('txt_area').value = $data
  return false
  }
</script>

<span onclick="myFunc(ChemDoodle.writeMOL(sketcher.getMolecule()));"
 <button href='javascript:void(0)'; type="submit" id="get_mol">Get Mol</button>
</span>

的Jquery / AJAX：

$('#search').on('click', function() 
  {    
    chemical = $('#chemical').val();        
    $.ajax({
    type: "GET",
    url: "/_get_smiles",
    data : { 'chemical': chemical},
    success: function(data)
    {        
    $('#txt_area').text(data.smiles);
    },
    error: function(error) 
    {
    console.log(error)
    }
   });  
  });

HTML：

<input type="text" id="chemical" size="40">
<button type="submit" id="search" value="Search">Search</button>
<textarea id="txt_area" name="smiles_mol" rows="28" cols="49"></textarea>

要清除文本区域I以下方法但不成功：

$('#txt_area').text = "";
$('#txt_area').html = "";
$("#txt_area").attr("value", "");

方法$（'＃txt_area'）。val（“”）;清除文本区域但阻止从数据库插入数据。任何意见和建议都非常感谢！

Answer 1

$('#txt_area').val(null);怎么样？

这就是你清除文本框的方式，但也许这是阻止图书馆做其他事情的其他事情。

Answer 2

我认为您只需要更改jQuery / AJAX部分即可使用它：

$('#txt_area').val(data.smiles);

然而，由于您似乎有两个不同的JavaScript和两个HTML，但它们并没有将它们写在一起，因此它们之间的相互关系有点令人困惑。这是文件的结构吗？如果一个人应该是对另一个人的后备，那么感觉它应该是自动完成的。

编辑 - 就像这样，如果我正确理解：

$('#search').on('click', function() {    
  chemical = $('#chemical').val();        
  $.ajax({
    type: "GET",
    url: "/_get_smiles",
    data: {
      'chemical': chemical
    },
    success: function(data) {
      if (data.smiles) {
        $('#txt_area').val(data.smiles);
      } else {
        $('#txt_area').val(ChemDoodle.writeMOL(sketcher.getMolecule()));
      }
    },
    error: function(error) {
      console.log(error);
      $('#txt_area').val(ChemDoodle.writeMOL(sketcher.getMolecule()));
    }
  });  
});

Answer 3

如果您确定清除数据时会出现一些奇怪现象，您可以在AJAX回调中尝试以下内容

$newTextArea = $('<textarea>').attr({ id:'txt_area', name:'smiles_mol', rows:'28', cols:'49'}).text(data.smiles)

$('#txt_area').replaceWith($newTextArea);

这将使用全新的文本区域DOM元素替换旧文本区域

如何清除文字区域？

3 个答案: