How to load an external js file as plain text and assign to variable as a string

Question

Really sorry if this is a dumb question but I can't seem to get this to work. As the title says i am trying to load an external js file and assign it to a variable as plain text. The project is a simple js "compiler" that stitches together a number of js files and minifies them into one. I am currently using the $.get() method and appending the response to a string.

The problem is that the js file that handles the above also needs to be included in the final minified file. I can load in all the other files and stitch them together just fine but when i load this main file into itself sourcing a js file it seems to evaluate and overwrite itself and so stops the process.

For the time being i have got around the problem by loading in a copy as a .txt file but it means i have to keep two files up to date which isn't ideal.

I found this article but it refers to javascript loaded via script tags in the head.

Any help would be appreciated. I will happily post code but not sure which bits would be useful.

Update: I probably should have mentioned that the project needs to run entirely client side so i can't use PHP/.NET pages. All the files I'm loading in are on the same domain though.

Answer 1

Note that $.get() and $.post() and $.ajax() are all the same thing.

$.get and $.post are just shorthand versions of $.ajax() that come with presets (obviously, type: "GET" and type:"POST" for one...). I prefer using $.ajax because the format can be more structured, and therefore easier to learn/use.

Javascript/jQuery would look something like this:

<script type="text/javascript">

    $(document).ready(function() {
        $.ajax({
            type: "POST",
            url: "loadmyfile.php",
            data: 'filename=js/myscript.js',
            success: function(whatigot) {
                //alert('Server-side response: ' + whatigot);
                $('#myhiddentext').val(whatigot);
            } //END success fn
        }); //END $.ajax
    }); //END $(document).ready()

</script>

Important: Note that you would need to do all the post-AJAX processing inside the success function. See this link for some simple AJAX examples.

Note that you can send data across to the PHP file by specifying a data: parameter in the AJAX code block. Optionally, you can leave out that line and simply hard-code the filename into the PHP file.

The text of the retrieved js file comes back into the AJAX success function (from the PHP file) as a string in the variable specified as the function param (in this case, called 'whatigot'). Do what you want with it; I have stored it inside a hidden <input> control in case you wish to retrieve the text OUTSIDE the AJAX success function.

PHP would look something like this:

loadmyfile.php

<?php
    $fn = $_POST['filename'];

    $thefile = file_get_contents($fn);
    echo $thefile;

References: PHP file_get_contents

Answer 2

Try to use Ajax.get() :

var script;
$.get('script.js', function(data) {
  script = data;
});

for Ajax.get() it will work inside your domain, you can't call external domains, if your application requires loading external JS file then my guess is that you have to use PHP or another server-side language as:

var script;
$.get('getScript.php', {url: "http://test.com/script.js"}function(data) {
  script = data;
});

in getScript.php you can use CURL or file_get_contents