How to clear text area?

Question

I have a problem of clearing out of the text area in my application. The app has two methods of getting a specific data format: searching online database and using a javascript library.

First method: a user types a chemical name in a text field and presses "Search" button. If requested compound is in the database, a proper format is displayed in the text area.

Second method: if the name was not found in the database, then a user can use a JS library to generate a proper format which is displayed in the same text area.

If a user uses database first, the text area contains generated data from the database which can be replaced by data generated by JS library if a user decides to use it. The problem is that if the text area already has data generated by JS library it cannot be replaced by data from the database when first method is used. I don't know how to clear the text area containing data (generated by JS library) before inserting data from the database. Sorry if it still sounds confusing.

Here is a javascript code:

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

To clear text area I the methods below but unsuscessfully:

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

Method $('#txt_area').val(""); clears the text area but prevents inserting data from database. Any comments and suggestions are highly appreciated!

Your answer is already asked - Look here... http://stackoverflow.com/questions/8284960/clear-text-area — SoEzPz, Dec 05 '14 at 22:29
@SoEzPz Thanks, I saw the answers but none of them worked for me. — chemist, Dec 05 '14 at 22:40

score 1 · Answer 1 · answered Dec 05 '14 at 22:28

1

How about $('#txt_area').val(null);?

That's how you clear a textbox but maybe it's something else that's preventing the library from doing its stuff.

answered Dec 05 '14 at 22:28

Kim

171
7

Thanks for your suggestion. Unfortunately, it clears the text area but does not allow to insert data from database. – chemist Dec 05 '14 at 22:39

David Millar · Accepted Answer · 2014-12-05T23:05:59.590

I think you simply need to change the jQuery/AJAX portion to use this:

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

However it's a bit confusing as to how the parts relate to one another since you seem to have two different pieces of JavaScript and two pieces of HTML but haven't written them together. Is that how the file is structured? If one is supposed to be a fallback to the other, it feels like it should be done automatically.

Edit - like this, if I'm understanding correctly:

$('#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()));
    }
  });  
});

Thanks for you help! $('#txt_area').val(data.smiles); works for me. Indeed, I keep JS library separately from jquery/ajax and have 2 separate HTML pieces. — chemist, Dec 05 '14 at 23:41

score 0 · Answer 3 · answered Dec 05 '14 at 23:00

If you're certain that there's some weirdness going on with clearing the data, you could try the following in your AJAX callback

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

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

This replaces the old text area with a totally new text-area DOM element

How to clear text area?

3 Answers3