The title is quite self-explanatory: I need to read a HTML file through jQuery and store its contents into a string variable.

I tried using .load and $.get, but they wouldn't do what I needed.

This is the code I've tried so far, based on the ments below, but they didn't populate my template variable at all:

var template = "";

$.ajax({
    url: 'includes/twig/image_box.twig',
    type: 'get',
    success: function(html) {
        var twig = String(html);
        template.concat(twig);
    }
});

console.log(template);

AND:

var template = "";

var fileUrl = "includes/twig/image_box.twig";
jQuery.get(fileUrl).then(function(text, status, xhr){
    var html = String(text);
    template.concat(html);

    // console.log(html); // WORKS!
});

console.log(template); // Does not work

It's weird why this isn't working. Weird for me at least. This is how I'd populate a variable in PHP so I've carried the same logic to JS. Maybe there is an alternative way?

P.S:V I've also tried all alternative ways, like concatenating with += and assigning inside the callback function to template with =, but nothing worked.

Thanks to the ones who are trying to help me!

The title is quite self-explanatory: I need to read a HTML file through jQuery and store its contents into a string variable.

I tried using .load and $.get, but they wouldn't do what I needed.

This is the code I've tried so far, based on the ments below, but they didn't populate my template variable at all:

var template = "";

$.ajax({
    url: 'includes/twig/image_box.twig',
    type: 'get',
    success: function(html) {
        var twig = String(html);
        template.concat(twig);
    }
});

console.log(template);

AND:

var template = "";

var fileUrl = "includes/twig/image_box.twig";
jQuery.get(fileUrl).then(function(text, status, xhr){
    var html = String(text);
    template.concat(html);

    // console.log(html); // WORKS!
});

console.log(template); // Does not work

It's weird why this isn't working. Weird for me at least. This is how I'd populate a variable in PHP so I've carried the same logic to JS. Maybe there is an alternative way?

P.S:V I've also tried all alternative ways, like concatenating with += and assigning inside the callback function to template with =, but nothing worked.

Thanks to the ones who are trying to help me!

• javascript
• jquery
• html
• file

• Is the HTML file available on the web or is a user uploading it? – Halcyon Commented Dec 5, 2013 at 12:31
• Why won't load and get work? What was the problem? How did you try to use them? – JJJ Commented Dec 5, 2013 at 12:31
• @FritsvanCampen The HTML file is on my server, I just need it as a string to work with it. @Juhana Load worked, but I need to store my result in a variable, and .load is eager to append the result to the selector immediately. – aborted Commented Dec 5, 2013 at 12:33
• $.get should work then. Can you us your code? – Halcyon Commented Dec 5, 2013 at 12:33
• Unfortunately, I can't right now, I'm not on the PC with the project. But I know that $.get kept returning an Object when I tried to log it. I'll show you the code later. – aborted Commented Dec 5, 2013 at 12:35

2 Answers 2

Maybe you should try a AJAX request with $.ajax()

Check the jQuery API here

    $.ajax({
            url: 'yourHTMLfile.html',
            type: 'get',
            async: false,
            success: function(html) {
                    console.log(html); // here you'll store the html in a string if you want
            }
    });

DEMO

EDIT: Added a demo!

I reread your question and I noticed you're calling the console log right above the ajax request but you forgot the ajax is asynchronous that means the page will do a request and only will set the template value when the response return with success(if it returns). So the console.log(template) don't appears because it may be not loaded yet.

var template = "";

$.ajax({
    url: 'includes/twig/image_box.twig',
    type: 'get',
    success: function(html) {
        var twig = String(html);
        template.concat(twig);
        console.log(template); // the change!
    }
});

or

$.ajax({
    url: 'includes/twig/image_box.twig',
    type: 'get',
    async: false,
    success: function(html) {
        var twig = String(html);
        template.concat(twig);
    }
});

console.log(template); // the change!

You can try this:

//as you see I have used this very page's url to test and you should replace it
var fileUrl = "/questions/20400076/reading-a-file-into-a-string-in-jquery-js";
jQuery.get(fileUrl).then(function(text, status, xhr){
   //text argument is what you want
});

and if it won't work try if your browser can open the file. if it could you'd better try ajax method in jQuery if not you might have some problems regarding permissions or somethings like that in you application server.