1

objective

I need a function that simply takes all the code from another file and pastes the code in the calling file.

possible solution

a function that works like the include() function in PHP.

reason

When I had hosting, I used the php function include("filename.html") to include things like headers and footers, in all the files on the website. This made life a lot easier!

Now I don't have hosting, because I am working on another site, and I am using Github Pages and thus, I can't use PHP. I need to use only HTML, JS and jQuery etc. So, I need a function that simply takes all the code from another file and pastes the code in the calling file.

Already tried

  1. load() in jQuery.

    <pre><script>    
$(document).ready(function(){
    $("#topbar").load("menubar.html");
});    
</script></pre>

  2. This question. I tried the accepted answer, but that didn't work for me.

Kindly help me with this issue.

Community
  • 1
  • 1
IcyFlame
  • 5,059
  • 21
  • 50
  • 74
  • 14
    Are you sure you meant `$("topbar")` and not `$("#topbar")`? As the former would indicate you have a `` element – CodingIntrigue Apr 09 '14 at 12:11
  • Sorry. I will edit the question immediately. – IcyFlame Apr 09 '14 at 12:49
  • Use a preprocessor and do your includes before you upload the files. That gets around the problem of not being able to do it server side, and all the problems of trying to do it client side. – Quentin Apr 09 '14 at 12:56
  • Well, @Quentin this is good solution. But still, Don't you think that JavaScript or jQuery would have some function for this? I want to do it dynamically. Not statically. Because if I do it statically, then even small changes in any of the files would require me to run the preprocessor again and again. – IcyFlame Apr 09 '14 at 12:59
  • Doing it client side is fragile and breaks for search engines. You're using Github Pages, so your data is stored in a git repository. Set up a commit hook to run the preprocessor automatically when you make a change. – Quentin Apr 09 '14 at 13:01
  • Well yes of course! That I can always do. But I just want to be totally sure that there is no way to do this dynamically at all, before going there. I appreciate your solution, but I would be happy if someone would come up with something. And I am waiting on it. But what is the issue with `jQuery.load()`. Haven't I used it properly? I just can't get around the fact that a function in jQuery is not working. I just can't. – IcyFlame Apr 09 '14 at 13:04

3 Answers3

2

You should consider setting up a build environment where you can compile your content locally before publishing it. This way, you can organize your code in different files (like in your case, with a header/footer that will always be included with different content files), compile locally to have the files automatically combined into a publish directory, and upload that instead.

This way, instead of e.g. sending 3 requests for a header, content and footer file, the header and footer are pre-compiled into the content file which can then be served with 1 request.

Personally I use Grunt as a build tool for purely static sites, together with a concatenation task (such as grunt-contrib-concat). There are several tutorials on the Grunt website, but you can see an example of how to configure a task for your specific problem here:

https://stackoverflow.com/a/12749861/351435

Community
  • 1
  • 1
Martin Wedvich
  • 2,158
  • 2
  • 21
  • 37
  • This seems to be a nice solution. But I have not yet tried it. I would have to read up on Grunt for this. So, I am going to that! Meanwhile, Thanks! I will accept the answer once I am satisfied with the solution. – IcyFlame Apr 09 '14 at 13:17
  • This is one of the sexiest solutions around! And it does so much more than solve my problem! Thanks for the solution! – IcyFlame Apr 10 '14 at 18:40
  • Is there a grunt plugin that would help me with inserting a particular file into a particular tagged div? (Like inserting code inside the `menubar.html` file into the `div` that has the tag `topbar`? – IcyFlame Apr 10 '14 at 18:59
0

I do something like that :

var template = {
    get: function (url, callback) {
        if (this[url]) return callback(null, this[url]);
        var self = this;
        $.ajax({
            "url": url,
            "type": "GET"
        })
        done(function (html) {
            self[url] = html;
            callback(null, html);
        })
        .fail(callback);
    }
};

after you just need to do that :

template.get("/menu.html", function (err, html, reason) {
    if (err) return alert('An error is append : '+reason);
    $("#topbar").html(html) // or append
});
queval_j
  • 188
  • 2
  • 10
  • Can you please elaborate a little more? – IcyFlame Apr 09 '14 at 12:59
  • I use this to get the template in my web applications. With this code you can load any html file and create a cache, the first time it will go load the file and the second time it will get the resource in the cache. The first parameter of callback is the error (if happen) and the second is the result (so the content of your html file) – queval_j Apr 09 '14 at 13:03
-1

I am assuming your scripts run in a browser. Try the $.getScript function in jQuery.

`$.getMyScript("script.js", function(){

alert("Script executed.");

});`

Depending on how complex you want your solution to get, you could also look at http://requirejs.org/ for incorporating files/scripts/modules.

I believe this question is answered in full on How do I include a JavaScript file in another JavaScript file?.

Community
  • 1
  • 1
Creatier
  • 9
  • 1
  • I want to include an HTML file. Not a javascript file. And if you are suggesting, that I put the html code inside a js file and then use the above solution, I don't want to do that. I have read this solution somewhere on the internet and it was heavily downvoted! So sorry! This is not what I am looking for. – IcyFlame Apr 09 '14 at 12:55