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
– Matt Burland, Commented May 25, 2017 at 12:48
Inside the php file, you need to echo something in order to receive it in the AJAX function — empiric
– empiric, Commented May 25, 2017 at 12:52
@EduardAvetisyan: Ah, that's your problem then. jQuery slim doesn't include the ajax functions apparently. — Matt Burland
– Matt Burland, Commented May 25, 2017 at 12:55

ADyson · Accepted Answer · 2017-05-25 12:57:15Z

3

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>

answered May 25, 2017 at 12:57

ADyson

62.9k16 gold badges86 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery/AJAX reading data from external file

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related