How to load external html into a div?

Question

I've created this little code using jquery to load an external HTML file into my div, but it doesn't work, I'm running out of ideas. Any other jquery code works well. Any help appreciated:

<div id="zaladuj"> 
load external html file
</div> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    $('#zaladuj').click(function () { 
        $(this).load('s1.htm'); 
    }); 
</script>

Do you have console errors? If you insert a `console.log` in the click listener does it fire? Are you sure it is finding `s1.php`? — Robbie Wxyz, Oct 14 '13 at 22:40
**DEMO** : http://jsfiddle.net/jU6c8/ - http://forum.jquery.com/topic/loading-html-from-external-file-into-div `:))` — Tats_innit, Oct 14 '13 at 22:43

score 8 · Accepted Answer · answered Oct 14 '13 at 22:42

8

You need to wrap your code within jQuery.ready() function since you have to wait for DOM to be fully loaded.

<script type="text/javascript">
    $(document).ready(function(){
        $('#zaladuj').click(function () { 
            $(this).load('s1.htm'); 
        }); 
    });
</script>

answered Oct 14 '13 at 22:42

Fouad Fodail

2,653
1
16
16

Thanks, but it still doesn't work. Here's what JS Console gives me: Origin null is not allowed by Access-Control-Allow-Origin. – user2660811 Oct 14 '13 at 22:46
@user2660811 Probably you are executing your script by double-clicking it. try to call it via a web server using localhost or something similar. – Fouad Fodail Oct 14 '13 at 22:51

score 1 · Answer 2 · answered Oct 14 '13 at 22:55

<script type="text/javascript"> 
    $('#zaladuj').click(function () { 
        $.ajax({
            context: this,
            dataType : "html",
            url : "s1.htm",
            success : function(results) {
                $(this).html(results);
            }
        });
    }); 
</script>

How to load external html into a div?

2 Answers2

Linked