Importing another html file into a row within my index.html page

1

Hello,

I am creating my portfolio site and I have 2 separate html files of different content I would like to load at different times in the same row depending on the click of a button. I’ve seen that this can work with Angular, but before I get into that, I wanted to ask if there was a way with just HTML and/or JS that could give me this result. I understand now that calling files requires me to set up a local server so I am using Node.js for this.

I’m not incorporating the button right now. I simply want to see if I CAN call a separate html file and display its content within a row in my portfolio. Essentially, the rest of the index.html page should not have to reload since the content will just be changing within that one row. I’m not really sure what I can provide for you in this post since none of my tries have worked. The console does not give me any errors, it simply says “content” whenever I try loading html through or xhttp request or even jQuery’s .load() function.

This is what my site currently looks like.

I want the content of this file to show in an already made div row between the languages and contact row.

Summary 
<template id="completed-projects"  type="text/x-handlebars-template">			
	<div class="row">
		<div class="text-center">
			<span class="section-header">Completed Projects</span>
		</div>
		<div class="projects-summary text-center">
			These projects are functional. There is always a chance that I will go back and improve the code with better techniques but for now, they serve their purpose. 
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12 text-center">
			<button class="btn" id="view-in-progress">
				<span class="project-section">View Ongoing Projects</span>
			</button>
		</div>
	</div>
	<div class="row text-center project-row">					   
		<div class="col-md-6 project">
			<span class="name">Weather App</span><br>
			<img class="project-image image-responsive" src="images/weather.PNG" data-toggle="modal" data-target="#weather-modal">
		</div>
		<div class="col-md-6 project">
			<span class="name">Weather App</span><br>
			<img class="image-responsive project-image" src="images/weather.PNG">
		</div>
		<div class="col-md-6 project">
			<span class="name">Weather App</span><br>
			<img class="image-responsive project-image" src="images/weather.PNG">
		</div>
	</div>
</template>

The duplicate information in the code above are just used as fillers right now, in case anyone was wondering.

Thanks!

2

Hey, I was looking at the JS script and the only thing that seemed wrong was the fact that the line

$('#modal-place').load('completed_projects_modals.html');

was outside of the $(document).ready(function(){. It needs to be inside 'cause the DOM has to be ready. By having the load method inside the ready function, the span “#modal-place” fills up with your html document correctly.

3

Thanks, but that didn’t work. :slightly_frowning_face:

4

That’s strange, works for me if I try and modify your script through Chrome source files. Even in this fiddle is working fine.

Edit: Of course you won’t need the template tag if you are loading them like this (content won’t show up if wrapped in it), unless you are planning on extrapolating content from the template itself. So, if you just need to load that content in a div, remove the <template> wrapping from your html file and it’ll show up.

1 Like
5

I’ll try it. I realized that before my css page had the id of the html I’m trying to load into the row as ‘display: none’ :rofl: I removed that but it didn’t seem to affect it so I’ll give this a go!

6

It’s working! The <template> was the issue. Thank you!

1 Like