CODEWITHSUNDEEP
javascriptjqueryhtml
Adam Chubbuck
Adam Chubbuck

Reputation: 35

Loading textarea with contents from file

The Problem

My goal is to be able to load text from a text document into the <textarea> to be displayed on the screen for the user. The $.get() call is able to retrieve the contents and seems to be storing them in the 'notes' global variable, but when .val() is called with 'notes' passed to it, it doesn't seem to be loading the string to be displayed within the <textarea>.

I have read through several previous questions on Stackoverflow and other articles on Google, but so far I haven't found any solutions. Does anyone have any suggestions?

HTML

<div class="col-md-5 module">
   <h1>My Notes</h1>
   <form>
      <textarea id="note-app" class="full-width full-height" placeholder="Save your notes here..."></textarea>
   </form>
</div>

notes.js

var notes = "pie";

$.get("../docs/notes.txt", function (data) {
    console.log('Loading notes...');
    notes = data;
});


function loadNotes(data) {
    console.log('Data:\n{\n'+data+'\n}\n');
    $("#note-app").val(data);
}

$( document ).ready(loadNotes(notes));

Output

notes.js:14
Data:
{
pie
}

jquery.min.js:4 XHR finished loading: GET
"http://localhost:63342/Dad/docs/notes.txt".k.cors.a.crossDomain.send @
jquery.min.js:4n.extend.ajax @ jquery.min.js:4n.(anonymous function) @
jquery.min.js:4(anonymous function) @ notes.js:7
notes.js:8 Loading notes...

Upvotes: 3

Views: 176

Answers (3)

bestprogrammerintheworld
bestprogrammerintheworld

Reputation: 5520

Why not just put the $.get inside of document-ready? It doesn't make sense to store this in a variable by the code you have shown. (If the only thing you want to achieve is that the content is fetched after document has been loaded)

$( document ).ready(function() {

    $.get("../docs/notes.txt", function (data) {
        $("#note-app").val(data);
    });

));

or as a function:

$( document ).ready(function() {

    function loadNotes() {
        $.get("../docs/notes.txt", function (data) {
            $("#note-app").val(data);
        });
   }

   loadNotes(); //Execute function now when DOM is loaded

));

One other thing worth mentioning is that

var notes = "pie"; in your example is outside of document ready, therefore not accessible withing document-ready.

var notes = 'pie';
$( document ).ready(function() {
    alert(notes); //will alert undefined or similar
    var notes = 'die';
    alert(notes); //will alert die
}

If you want a global variable like that you should use: window.notes = "pie";

var window.notes = 'pie';
$( document ).ready(function() {
    alert(notes); //will alert pie
    var notes = 'die';
    alert(notes); //will alert die
}

Upvotes: 0

arjabbar
arjabbar

Reputation: 6404

$( document ).ready(loadNotes(notes));

should be

$( document ).ready(function() { loadNotes(notes) });

The ready() jQuery function takes in a function. What you're doing is executing the function right then, when that line of code is read. Not when the document is actually loaded.

Let me know if that fixes things for you.

Upvotes: 2

tymeJV
tymeJV

Reputation: 104775

A couple things...

$( document ).ready(loadNotes(notes)); is invoking loadNotes immediately and not waiting for the document to be ready. You can pass a function by omitting the () - but you're simply invoking it.

Your $.get call has the potential to still be running when loadNotes gets triggered. Use a callback - wait for completion - then run loadNotes

Refactored:

function getNotes(callback) {
    $.get("../docs/notes.txt", function (data) {
        console.log('Loading notes...');
        callback(data);
    });
}

function loadNotes() {
    getNotes(function(notes) {
        $("#note-app").val(notes);
    });
}

$(document).ready(loadNotes);

Upvotes: 3

Related Questions