How can I load an external html with jQuery

Question

I want to load an external .html into a div with jQuery.

here is the code:

$(document).ready(function() {

    $('#wrap').load('elements/main.html', function() {
        alert('Loaded!');
    });
});

It alerts me to Loaded but the content of my html doesn't appear. Sometimes it works in firefox but not in any other browsers.

The html:

    <html>
<head>
    <title>Mypage</title>
    <script type='text/javascript' src='http://code.jquery.com/jquery-2.1.4.min.js'></script>
    <script type='text/javascript' src='js/script.js'></script>
    <link href='css/css.css' type='text/css' rel='stylesheet' media='screen'>
</head>
<body>
    <div id='background'>        
        <div id='header'>
        </div>
        <div id='navbar'>
            <ul id='list'>
                <li><a href='main'>FŐOLDAL</a></li>
                <li><a href='about'>MAGAMRÓL</a></li>
                <li><a href='idea'>GONDOLATOK</a></li>
                <li><a href='ref'>REFERENCIÁK</a></li>
                <li><a href='contacts'>ELÉRHETŐSÉGEK</a></li>
            </ul>
        </div>
        <div id='wrap'></div>
    </div>
</body>
</html>

And the CSS:

* {margin: 0; padding: 0;}

#background {
    position: fixed;
    height: 100%;
    width: 100%;
    /*background-image: url(../images/background/bg_main.jpg);
    background-size: cover;*/
    overflow-y: scroll;
}
#header {
    position: fixed;
    width: 100%;
    height: 20%;
    border-bottom: gold solid 2px;
    overflow: hidden;
    z-index: 10;
}
#navbar {
    background-color: rgb(232,230,158);
    background-size: cover;
    position: fixed;
    width: 750px;
    height: 40px;
    top: 20%;
    margin: 0 auto;
    left: 0;
    right: 0;
    z-index: 7;
    border-image: url(../images/borders/shadow.png);
    border-image-slice: 0 0 100% 0;
    border-image-width: 0px 0px 64px 0px;
    border-image-outset: 0px 0px 60px 0px;
    border-image-repeat: stretch stretch;
}
#list {
    margin: auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: -o-fit-content;
    width: fit-content;
}
    #list li {
        font-size: 15px;
        list-style-type: none;
        text-decoration: none;
        position: relative;
        float: left;
        padding: 0 10px;
        top: 20px;
        transform: -webkit-translateY(-50%);
        transform: -moz-translateY(-50%);
        transform: -o-translateY(-50%);
        transform: translateY(-50%);
        font-family: 'Lora', serif;
    }
    #list li a {
        color:#36393D;
        text-decoration: none;
    }
    #list li a:hover {
        color: #AC7315;
    }
    #list li a:active {
        color: #AC7315;
    }
#wrap {
    position: fixed;
    width: 950px;
    height: 80%;
    top: 20%;
    background-image: url(../images/background/content.png);
    background-repeat: repeat-y;
    background-size: contain;
    z-index: 3;
    margin: 0 auto;
    left: 0;
    right: 0;
}

Thanks a lot for any help!

Have you checked this: http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file — babon, Jul 03 '15 at 10:23
I guess you are not getting your `HTML` from `elements/main.html`. — PHP Worm..., Jul 03 '15 at 10:30

score 1 · Accepted Answer · answered Jul 03 '15 at 10:28

1

This code:

  $('#wrap').load('elements/main.html', function() {
            alert('Loaded!');
        });

Will always alert('Loaded!')

Check status of load() like this:

$(document).ready(function() {

    $('#wrap').load('elements/main.html', function(responseText, textStatus, XMLHttpRequest){
     if (textStatus == "success") {
     alert(1);
         console.log(responseText);
    }
    if (textStatus == "error") {
    alert(0);
         console.log(responseText);
    }
    });
});

answered Jul 03 '15 at 10:28

PHP Worm...

4,109
1
25
48

Thanks! It shows me that the it cant load the requested content in my div. – Dénes Kovács Jul 03 '15 at 11:24
But still dont know what the problem is in Opera and Chrome... :( – Dénes Kovács Jul 03 '15 at 11:25
@DénesKovács if you're directly opening the file in chrome like this `file:///C:/Users/123/Desktop/t.html` it will not work in Chrome, and you'll see errors (or nothing ). You need to setup a web-server, like xampp, and then run it from localhost instead – PHP Worm... Jul 03 '15 at 12:03

How can I load an external html with jQuery

1 Answers1