load HTML content with jquery

Question

wondering if it is posible to load HTML content this way:

I have this piece of code in JS

var main = [{
  title:'Title',
  imageProject: 'images/t1.jpg',
  content: 'page1.html'
},{
  title:'Title2',
  imageProject: 'images/t2.jpg',
  content: 'page2.html'
},{
  title:'Title3',
  imageProject: 'images/t3.jpg',
  content: 'page3.html'
}]

container = $('<div />', {class:'container'});

$.each(main, function(i, e){
  var item = $('<div />', {
    class:'item',
    html:'<div><img src="' + e.imageProject + '" class="img-responsive" alt="' + e.title + '"><h2>' + e.title + '</h2></div>' +
    '<div class="content"><p>' + e.content + '</p></div></div>'
  })
  container.append(item);
});
container.appendTo($('main'));

The goal is to assign a HTML file to the variable content to be used inside the function where I generate the HTML structure. Is this posible?

Many thanks in advance.

You want to do dynamic includes and do the including client-side? Sure, this is possible. Also note that what you're doing now opens up wide up to injection and invalid HTML. Don't concatenate arbitrary data into an HTML context. Any time you take data and use it in a different context, it must be escaped. The best thing for you to do here is create the elements and set their attributes. — Brad
– Brad, Commented Feb 18, 2017 at 0:40
Thanks Brad. Just wanted to know if is posible to load a HTML file the same way I do with the other objects inside the variable main. I mean, it is easy to load simple text with e.title for example but I don't know if I can load a HTML file with e.content. Many thanks. — tanaan
– tanaan, Commented Feb 18, 2017 at 0:48

Community · Accepted Answer · 2017-05-23 11:53:20Z

1

You could use an ajax request to get your html content Take a look if this helps Loading DIV content via ajax as HTML

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Feb 17, 2017 at 23:39

vladwoguer

9781 gold badge15 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

tanaan Over a year ago

Thanks for the answer vladwoguer. I've read that post but not sure if that could do the job, sorry if I haven't understand it properly. As you see, I'm generating a div with the class container, then few more divs, depending on the number of objects inside the variable main. Each of this divs will have the class item and they will have some other html code that will be filled up with the content inside of each object. The problem is that I'd like to add a HTML file to the e.content. I haven't seen the way in the post you said. Again, sorry if I misunderstood something.

vladwoguer Over a year ago

Hi tanaan, with ajax you can request the html file and you can load it on your e.content. Let me see if I can find a better example.

tanaan Over a year ago

Thanks vladwoguer, this has been sorted out. I will try reply myself later on. Giving an id to each .content I just need to use load();. For some reason it just works on the server, but it does. Although that id will help if I need to interact with each element in future. Thanks again for caring.

vladwoguer Over a year ago

In this example, link he gets a html file and loads it on a div, you can do the same but instead of loading it on a div you can do e.content = html(data);

John Hiner · Accepted Answer · 2017-02-17 23:57:34Z

0

As vladwoguer says above, an Ajax request is the way to retrieve the content of your html pages, but you'll need something to serve the content you request.

A simple PHP script on the server side can open the requested file and echo the contents as a string, which will be interpreted by Jquery the same way a string constant is.

answered Feb 17, 2017 at 23:57

John Hiner

114 bronze badges

1 Comment

tanaan Over a year ago

Thanks John, I know there are many ways to load a HTML file using JS or PHP (this option can't be used I'm afraid). I just want to assign a HTML file to e.content to be load inside the HTML I generating as I do with the rest of objects. Many thanks.

John Hiner · Accepted Answer · 2017-02-18 01:45:42Z

0

How about making e.content an iframe tag that has the desired html page as its source?

You could even add "border: none" to the style of the iframe so that it blends into the page better. You'll have to jump through some hoops to modify the page inside the iframe (if that's even necessary), but it is do-able.

answered Feb 18, 2017 at 1:45

John Hiner

114 bronze badges

Collectives™ on Stack Overflow

load HTML content with jquery

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related