$.get() method JQuery reads nothing (html)

Question

Goal:

When click_div is clicked, the script should read a file (text.html) from my own computer using $.get() method, and set the html of a div (cont_div) to the file's content.

Code:

$(document).ready(function() {
    $('#click_div').click(function(){
        var HTML_FILE_URL = 'text.html';
        $.get(HTML_FILE_URL, function(data){
            alert(data);
            $('#cont_div').html(text);
        });
    });
});

Problem:

The content of cont_div keeps blank, after clicking click_div. I put an alert to show the content of what the get method read, and it displays a blank dialog.

Further information:

• The file is on the same folder as the .js file, and the index.html page file.

• All the other javascript functions work well.

Question:

Given that the alert function displays nothing, but is still called, what could I possibly be doing wrong? I've tried many things, but it really doesn't work.

@JeffPowers Only if you're using google chrome without removing the security settings — Kevin B, Aug 28 '13 at 18:05
Are you sure your `text.html` html document actually contains anything? if you're getting to success but no data is in the alert, that suggests that it is found but is empty. — Kevin B, Aug 28 '13 at 18:10
In the off-chance that naomik is not correct and you really are trying to do AJAX, [here are some examples to review](http://stackoverflow.com/questions/17973386/ajax-request-callback-using-jquery/17974843#17974843) — cssyphus, Aug 28 '13 at 18:12
Are you running this through a web browser or just loading the file into your browser straight from the file system? You may get permission problems if trying to do the latter. — Chris, Aug 28 '13 at 18:24
@Chris yeah, that might be the problem. Let me try using __load__, as naomik suggested. — user2489690, Aug 28 '13 at 21:05

score 0 · Answer 1 · answered Aug 28 '13 at 18:11

It looks like you are appending the wrong variable

$('#cont_div').html(text);

should likely be

$('#cont_div').html(data);

Also, I would look into $.load(). I think it would be a bit simpler for your case.

Something like:

$(document).ready(function() {
    $('#click_div').click(function(){
        var HTML_FILE_URL = 'text.html';
         $('#cont_div').load(HTML_FILE_URL);
    });
});

should work.

$.get() method JQuery reads nothing (html)

1 Answers1