JQuery/AJAX reading data from external file

Question

In HTML, there is a textarea. When textarea content is edited, I need the AJAX to read an external file and alert its content. I have this code which doesn't alert anything:

<!DOCTYPE html>

<textarea id="area">Sample Text</textarea>

   <!-- Include jquery -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

<script type="text/javascript">

    $("#area").on("change keyup paste", function() {
        $.ajax({
          method: "POST",
          url: "externalFile.php",
          data: { content: $("#area").val() }
        })
          .done(function( msg ) {
            alert( "Reading Data: " + msg );
          });

    });

</script>

However, I know that the code successfully enters the jquery function because the following test alert works when I start typing in the textarea:

<textarea id="area">Sample Text</textarea>

   <!-- Include jquery -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

<script type="text/javascript">

    $("#area").on("change keyup paste", function() {
        alert("Test Alert");
    });

</script>

The external file is in the same directory - externalFile.php

This text is in external file!

Am I doing something wrong in the AJAX part?

Look in the console in your browser at the network tab and see if it's calling `externalFile.php` and what response it's getting. — Matt Burland, May 25 '17 at 12:48
Inside the php file, you need to `echo` something in order to receive it in the AJAX function — empiric, May 25 '17 at 12:52
@MattBurland Here is the error: `TypeError: $.ajax is not a function. (In '$.ajax', '$.ajax' is undefined)` — Eduard Avetisyan, May 25 '17 at 12:53
@EduardAvetisyan: Ah, that's your problem then. jQuery slim doesn't include [the ajax functions](https://stackoverflow.com/questions/35424053/what-are-the-differences-between-normal-and-slim-package-of-jquery) apparently. — Matt Burland, May 25 '17 at 12:55

score 3 · Accepted Answer · answered May 25 '17 at 12:57

jQuery "slim" edition doesn't include the Ajax functionality. For this to work you need to use the full library. Simply replace

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

with

<script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

JQuery/AJAX reading data from external file

1 Answers1