Search code examples
javascriptjqueryajaxpostweb-frontend

AJAX request causing Text.splitText to throw an error

I am writing a javascript webpage, and in it, I am trying to send this Ajax request.

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">     </script>
    <script>
     function onSubmit() {
      $.ajax({
        url: window.location.href,
        method: "POST",
        context: document.body,
        data: {newContent: $("#verseContent").contents()[0]},
        success: () => {console.log("DONE")},
        error: (err) => {console.error(err);}
      });
    }
    </script>
  </head>
  <body>
    <textarea id="verseContent"><%= content %></textarea>
    <button onClick="onSubmit()">SAVE</button>
  </body>
</html>

But it is always throwing the error:

[Error] TypeError: Can only call Text.splitText on instances of Text
    splitText (jquery.min.js:2:71316)
    i (jquery.min.js:2:71316)
    jt (jquery.min.js:2:71208)
    jt (jquery.min.js:2:71232)
    param (jquery.min.js:2:71508)
    ajax (jquery.min.js:2:75809)
    onSubmit (1:10)
    onclick (1:30)

I cannot seem to find any information to help debug this issue... Does anyone have any idea what might be going on? Thank you so much for any thoughts, ideas or any direction you may have.

Solution

  • Your AJAX request you should send data is JSON object.

    In your situation, I guess that you want to send content from textarea. If true you can try this code:

    <!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">     </script>
    <script>
        function onSubmit() {
        $.ajax({
            url: window.location.href,
            method: "POST",
            data: {
                newContent: $("#verseContent").text()
            },
            success: () => {console.log("DONE")},
            error: (err) => {console.error(err);}
        });
    }
    </script>
</head>
<body>
<textarea id="verseContent"><%= content %></textarea>
<button onClick="onSubmit()">SAVE</button>
</body>
</html>