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, Feb 18 '17 at 00: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, Feb 18 '17 at 00:48

score 1 · Answer 1 · edited May 23 '17 at 11:53

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 '17 at 11:53

Community

1
1

answered Feb 17 '17 at 23:39

vladwoguer

951
1
14
28

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. – tanaan Feb 18 '17 at 00:39
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. – vladwoguer Feb 20 '17 at 19:59
1

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. – tanaan Feb 20 '17 at 20:03
In this example, [link](http://stackoverflow.com/questions/11023051/how-to-get-the-html-of-a-div-from-a-different-page-with-ajax) 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); – vladwoguer Feb 20 '17 at 20:04

score 0 · Answer 2 · answered Feb 17 '17 at 23:57

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 '17 at 23:57

John Hiner

11
4

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. – tanaan Feb 18 '17 at 00:42

score 0 · Answer 3 · answered Feb 18 '17 at 01:45

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.

load HTML content with jquery

3 Answers3