-1

What is the javascript equivalent to PHP's include(file.html) specifically without needing to place it in a div like $("#div").load("file.html");? I'd like to get away from using PHP and find out how to do this in Javascript without using a div placeholder and just loading it into webcode to use with things like bootstrap modals or buttons.

john
  • 775
  • 3
  • 15
  • 31
  • 2
    You're already using jQuery's `load()` http://api.jquery.com/load/ so what's the problem you're having? – Funk Forty Niner Jan 18 '16 at 23:50
  • If you just need to append content to the body it's fine otherwise you need a target element (division or anything else) to tell the ajax callback where to put the content in. – Orden Jan 18 '16 at 23:50
  • possible duplicate of [How to include an HTML file with jQuery?](http://stackoverflow.com/questions/15320801/how-to-include-an-html-file-with-jquery) – Funk Forty Niner Jan 18 '16 at 23:50
  • 1
    got to placed be in the DOM somewhere –  Jan 18 '16 at 23:51
  • 1
    Possible duplicate: https://stackoverflow.com/questions/950087/include-a-javascript-file-in-another-javascript-file?rq=1 – Hatchet Jan 18 '16 at 23:51
  • If you're looking to get away from PHP, another possible solution would be SSI `.shtml` or treat `.html` files as SSI. – Funk Forty Niner Jan 18 '16 at 23:52
  • take it up with the person who's given you an answer below if you're not going to comment or tell us otherwise that those 2 links we've included aren't duplicates. – Funk Forty Niner Jan 19 '16 at 00:03
  • hey Fred, can you expand on treating the `.html` files as SSI? I read something about that awhile back but can't quite pull it out of my memory... – john Jan 19 '16 at 00:05
  • you'd need to do that through `.htaccess` if your system supports it. You running on Apache? however, can't you just rename your ext. to `.shtml`? be easier. Most systems are already setup to SSI with `.shtml`. – Funk Forty Niner Jan 19 '16 at 00:11
  • content included by js\jquery will not be indexed(google) like that included via php, if that matters –  Jan 19 '16 at 00:12
  • Ok I'll give those both a shot Fred, and thank you Dagon. – john Jan 19 '16 at 00:14

2 Answers2

1

in this case, php acts as a preprocessor - it sees that include line, fetches the html and then drops the contents of the file in-place. Javascript can't really do that in the same way because it only lives on the browser.

You have some options

  1. Do you an http request to a resource that will return the html, and then render that html string to a location (html id tag of some sort)

  2. Use a different preprocessor. There's loads and it depends on what runtime you're on. NodeJS? Ruby? Go? Java? Python? All of them use something different - but they'll give you a one-to-one alternative for the directives you want to use inside your html files. Here's a great article that gives an overview of a number of different options: https://css-tricks.com/the-simplest-ways-to-handle-html-includes/

Mr Chow
  • 365
  • 6
  • 10
Antiokus
  • 534
  • 3
  • 8
  • his example is `file.html` i would net expect any php processing to be required. And as the request is made through the server, even if it was full of php, that would be server passed –  Jan 19 '16 at 00:01
  • I'd like to stick with javascript/jquery for this as my logic will also be done using them. – john Jan 19 '16 at 00:04
  • @Dagon true. I guess I was thinking that since OP wanted a directive replacement, it would make sense to just use a different preprocessor to achieve that. OP If that's the case then the only way is to load and attach it to a container, because if not - where is the html supposed to go? – Antiokus Jan 19 '16 at 00:17
  • It's a rubbish question, i wouldn't bother with it myself usually. –  Jan 19 '16 at 00:19
0

naturally, when you want to load a resource from js (when it is possible and do not try to access a resource that triggers a cross domain origin problem) you use AJAX

a simple implementation using jQuery:

$.get('file.html', function(file) {
  console.dir(file);
});
ymz
  • 6,602
  • 1
  • 20
  • 39