Calling .load from inside li click function

Question

I think this error must be very silly, but I've been trying over three hours and do not get it to work. I have some li elements, its text tells me what file to load: the files to load are stored in the same directory as the script. I want that when clicking the li, the content division is populated with the contents of the file with the same name as the text of the li. This is my code, can someone help me, please, what I'm doing wrong?

<ul class="sample_list">
    <li>AudioContext.txt</li>
    <li>AudioNode.txt</li>
    <li>AudioDestinationNode.txt</li>
    <li>AudioBuffer.txt</li>
</ul>

<div id="content"></div>


<script type="text/javascript">
    $(".sample_list li").click(function(){
        $("#content").load($(this).text());
    });
</script>

Have you tried using the full path to the file? Also if you are trying this in file:/// environment you might get browser sandbox errors. — Alexander Kludt, Jun 17 '14 at 12:10
Yes, I've tried that. If I call the .load sentence outside the $(".sample_list li").click(function() it works, so that that's not a problem of incorrect link. — gines capote, Jun 17 '14 at 12:24

ffflabs · Accepted Answer · 2014-06-17T12:43:29.960

0

Wrap your listener in the document ready event of jQuery. Additionally, declare the text variable in advance. Sometimes jQuery(this) can be tricky in terms of scope. If you call for jQuery(this) inside a method for the #content element, you're addressing that element, not the li you clicked.

$(document).ready(function() {
    $(".sample_list li").click(function(){
        var text=$(this).text();
        $("#content").load(text);
    });
});

You can see it working here: http://ffflabs.com/sandbox/loadli.html

edited Jun 17 '14 at 12:43

answered Jun 17 '14 at 12:12

ffflabs

17,166
5
51
77

i've tried that, but does not work. I've tried to write $("#content").load("AudioContext.txt"), but it doesn't work inside the li click function. If I try it outside de $(".sample_list li").click(function(), it works, but inside it doesn't. – gines capote Jun 17 '14 at 12:21
It worked for me in my localhost. I'll upload it to a public server to show you. – ffflabs Jun 17 '14 at 12:35
Ok, thank you very much. Now it works. I don't know what's happening. The same code I've posted in the original question, now works. – gines capote Jun 17 '14 at 13:22
Perhaps it was uploaded to the server, but the browser kept displaying outdated html due to cache configuration. That, or proper refresh magic. – ffflabs Jun 17 '14 at 15:42
Yes, I think that was what happened. Originally mi
were like this:
AudioContext

gines capote

Jun 17 '14 at 16:30

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

Use Ajax with dataType text and load it

   $(document).ready(function() {
    $(".sample_list li").click(function() {
        $.ajax({
            url : $(this).text(),
            dataType: "text",
            success : function (data) {
                $("#content").html(data);
            }
        });
    });
});

jQuery: load txt file and insert into div

edited May 23 '17 at 12:13

Community

1
1

answered Jun 17 '14 at 12:32

Lucky W

50
1
7

I've tried this, but does not work. Even if i write a single call inside the li.click(function) like $("#content").load("AudioContext.txt") it doesn't work. If I write this instruction outside the click function it works right. – gines capote Jun 17 '14 at 12:48
Use $(document).on("click",".sample_list li",function(){ /* your code*/}); – Lucky W Jun 18 '14 at 06:34

Calling .load from inside li click function

2 Answers2