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> 

Solution 1

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>

Solution 2

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

Comments

[user2660811]

Thanks, but it still doesn't work. Here's what JS Console gives me: Origin null is not allowed by Access-Control-Allow-Origin.

[Fouad Fodail]

@user2660811 Probably you are executing your script by double-clicking it. try to call it via a web server using localhost or something similar.