.append not working in firefox or safari

Question

Jquery .append is not working in firefox or safari but .val does.

Interestingly the same code works fine in IE.

code:

<head>
    <link rel="stylesheet" type="text/css" href="  https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script type = "text/javascript">
    $(document).ready(function () {           
         $("#notes").change(function () {
            $('#notes').val($('#notes').val() + "Test1");
            $('#notes').append('Test2');
        });            
    });
</script>

<textarea rows="10" name="Notes1" id="notes" style="width: 100%" ><?php
    if (isset($_SESSION['order'])) {
        echo $_SESSION['order'][0]['tNotes'];
    }
</textarea>

So the above code works fine with both Test1 and Test2 being added to the textarea in Internet explorer BUT only the .val works Test1 in FF/safari and .append does not.

Why is this? any help or alternatives to get an equivalent (appends text to the place that was edited and not just to the bottom)

score 1 · Accepted Answer · edited May 23 '17 at 12:07

1

EDIT :

(appends text to the place that was edited and not just to the bottom)

Use val() to make it works in every browsers.

See this updated fiddle

$(document).ready(function () {
  $("#notes").change(function () {
    insertAtCaret($(this).prop('id'),"this");
    $(this).val($('#notes').val() + "here");
  });
});

Note - I use a function from this SO post : Inserting a text where cursor is using Javascript/jquery

edited May 23 '17 at 12:07

Community

1
1

answered Mar 29 '16 at 14:26

Vincent G

8,547
1
18
36

Noo, my code was explaining that one works in all browsers (.val) but one only works in IE (.append) – user2229747 Mar 29 '16 at 14:28
you my friend are awesome – user2229747 Mar 29 '16 at 15:00

score 0 · Answer 2 · answered Mar 29 '16 at 14:15

0

Textarea is an input container type, so you have to use the .val() method to set the value of your element. .append() works in IE because IE doesn't care about standards.

answered Mar 29 '16 at 14:15

Kevin Grosgojat

1,386
8
13

ok thanks, is there a way to get .val() to add the text to the last changed line of the textarea (like .append)? – user2229747 Mar 29 '16 at 14:17
.val() is a getter, and a setter. Without parameter it get, with parameters, it set. – Kevin Grosgojat Mar 29 '16 at 14:19

.append not working in firefox or safari

2 Answers2