jQuery updates DOM, browser does not

Question

I am working on a project where for example field number 3 on the webpage should be updated with values from a database when a user enters data into field number 1. This already works fine without any problems.

But if the user modifies field number 3 first and field number 1 at a later time, just the DOM gets updated (as I can tell from Firebug) but there isn't any visible change on field number 3 to the user.

I created a very basic version of this problem and still I am not able to tell what's wrong here.

HTML

<div id="container1">
  <textarea id="container1.1">Entry 1.1</textarea>
  <textarea id="container1.2">Entry 1.2</textarea>
  <textarea id="container1.3">Entry 1.3</textarea>
</div>

jQuery

$(document).ready(function() {
  $('textarea').change(function() {
    var clickedObject = $(this);
    var id            = $(this).attr('id').substr(9);
    var value         = $(this).val();
    var dataString    = "id=" + id + "&value=" + value;

    $.ajax({
      type: "POST",
      url: "update.php",
      data: dataString,
      cache: false,
      success: function(Result)
      {
        if(Result == '-')
        {
          console.log('Nothing to do');
        } else {
          clickedObject.next().next().html(Result);
        }
      }
    });
  });
});

PHP

<?php
  if ($_POST['id'] == '1.1') {
    echo 'Modified string';
  } else {
    echo '-';
  }
?>

why would you have 2 text area with the same id? – Mark Jan 14 '16 at 09:15 — Mark, Jan 14 '16 at 09:15
Thanks. Just a typo, doesn't affect the problem. – URmeL Jan 14 '16 at 09:20 — URmeL, Jan 14 '16 at 09:20

score 0 · Accepted Answer · answered Jan 14 '16 at 09:38

0

You must set values of textarea by .val() method, instead of html().

And maybe it will be more descriptive if you will use only one id of textarea that should call request on changes.

answered Jan 14 '16 at 09:38

Sergii Shvager

1,226
9
14

This is the solution, although some more explanation as to the difference between the value and html of a textarea would be nice. – Quentin Jan 14 '16 at 09:49
.html() method is used for tags like
,,
,
.val() method is used for input tags like ,
– Sergii Shvager Jan 14 '16 at 09:51
It works on textareas too, it's just that the HTML content of the element is the default value, not the current value. – Quentin Jan 14 '16 at 09:52
that's why html() is actually useless for inputs – Sergii Shvager Jan 14 '16 at 09:54
Inputs are different, they are empty elements and have no child nodes at all. – Quentin Jan 14 '16 at 09:54
I mean inputs like a mutable elements on the page, that can be changed – Sergii Shvager Jan 14 '16 at 09:56
There are times when it is useful to set or read the default value of a textarea. – Quentin Jan 14 '16 at 09:56

jQuery updates DOM, browser does not

1 Answers1

.val() method is used for input tags like ,