2

we are not sure if what we are looking for is posible to be done this way. We generating a HTML structure with JS and we would like to load external HTML files inside one of the div we generate. We have this code so far https://jsfiddle.net/tanaan/feouj1rq/1/ but we get undefined

We also have tried with

var htmlFile1 = file_get_html( 'file1.html');

We cannot make it work and we are not sure if it is posible this way tbh, that's why we'd like to ask the huge community here. The idea basically is to load and external HTML file inside the idv with class .content that we generate with JS.

Any suggestion is welcome.

Thanks a mil

CharlieMood
  • 21
  • 1
  • 1
  • 2
  • If you have an id for the div you could try this. http://stackoverflow.com/questions/17636528/how-do-i-load-an-html-page-in-a-div-using-javascript – RhythmicSkye Feb 18 '17 at 22:04
  • you can use jqueries ajax function for that. Be aware though that if you mean "from another website" by "externally", that might not work at all, since javascript is kinda restricted. – John Smith Feb 18 '17 at 22:04
  • @RhythmicSkye Apparently this code will do the trick `function load_home() { document.getElementById("content").innerHTML=''; }` however what I got is, and must be, a class not an id. I have tried with `getElementsByClassName` and placing the function after generating the HTML estructure, otherwise that class wouldn't exist. It returns 'undefined` probably because I removed `content` from the first element in the `main`variable. In addition not sure if this will work cuz I going to have several html files, one per div.item. Cheers – CharlieMood Feb 18 '17 at 22:33
  • @John I mean HTML files from another folder. They all are "our". The goal here is to generate the repetitive HTML structure with JS and then have different HTML with the content for each item and load them into the .content div. Is that ajax funtion the one you mentioned in the answer below? Thanks mate – CharlieMood Feb 18 '17 at 22:38

3 Answers3

2

To load an external file inside a div you can use:

$( "#idofyourdiv" ).load( "some/html/on/your/server.html" );

But only if that file actually is on your server and not another domain.

To load it into a variable use:

$.get( "some/html/on/your/server.html", function( data ) {
    // the contents is now in the variable data
    alert( data );
});
John Smith
  • 2,282
  • 1
  • 14
  • 22
  • Thanks John, we are working locally so far. We have tried first option but it returns `[object Object]` https://jsfiddle.net/tanaan/feouj1rq/2/ We haven't tried your second suggestion, where are we storing the HTML file, we need a variable to be used later on. Cheers – CharlieMood Feb 18 '17 at 22:18
  • the first option should actually directly put it inside the div (and give you some result object to tell you it happened, or any error related). There was propably an error loading the file. – John Smith Feb 18 '17 at 22:20
  • We have just one HTML file with the CSS and JS in it for testing and the file1.html is placed in the same directory. we have try something like this https://jsfiddle.net/tanaan/feouj1rq/2/ but it is not working. We need to assign that HTML to a variable and use it inside the HTML code we generate. Sorry, is difficult to explain but I hope easier to understand – CharlieMood Feb 18 '17 at 22:50
0

Try 

$('.content').load('file1.html')

You're doing $('.content').get('file1.html') which is wrong because jQuery's .get() is actually an AJAX method and will need a second argument as a callback function. Use $(selector).load() instead to load a local file

EDIT I just read throu your code more thoroughly and you're trying to read local file content into a variable; you cannot do that from a browser. .load() is actually a helper function for an AJAX call, therefore you can do something like this:

$.get("file.html", function(data) {
    expandables[0].content = data;
})

The reason for doing expandables[0].content is because the call is AJAX, as such you might not have the content ready by the time you assign it to another variable. Doing it this way will ensure expandables gets the content even after its initial assignment.

mavili
  • 3,385
  • 4
  • 30
  • 46
  • Thanks mavili. We didn't but we have tried now and it returns `[object Object]` https://jsfiddle.net/tanaan/feouj1rq/2/ Could be probably because div.content doesn't exist when we load the external HTML file? Cheers – CharlieMood Feb 18 '17 at 22:15
  • well I hope you're not looking at the fiddle and conclude that it doesn't work, because you know jsfiddle would have no idea of your local file :) – mavili Feb 19 '17 at 19:08
0

In contrast to my other answer using the $.ajax function you get more options and better error handling (there is propably some error loading the file):

$.ajax({url: "some/html/on/your/server.html", success: function(result){
    $("#idofyourdiv").html(result);
}, error: function (xhr, ajaxOptions, thrownError) {
    alert(xhr.status);
    alert(thrownError);
});

In your code it would be at this point:

...
var item = $('<div />', {
    class: 'item',
    html: '<div><h2>' + e.title + '</h2></div>' +
        // you do not set the content yet:
        '<div class="content"><p></p></div></div>'
    })
//here
$.ajax({url: "some/html/on/your/server.html", success: function(result){
    item.find('.content:first > *').html(result);
}, error: function (xhr, ajaxOptions, thrownError) {
    alert(xhr.status);
    alert(thrownError);
});

// the load function would also work instead:
// item.find('.content:first > *').load('file1.html')
...
John Smith
  • 2,282
  • 1
  • 14
  • 22
  • This Ajax function should be placed before or after the `each()`where we generate the HTML estrutre dinamically? keep in mind we need to load it into a class, not an id. Many items are going to have the same class and each of them will have a different content from a different HTML file. – CharlieMood Feb 18 '17 at 22:52
  • it does not matter, you could create the html in the success function or create it before. in any way, you iterate over whatever it is for which you generate the elements, and when iterating over that you either directly run ajax or you create the elements using js, you have them in some `variable`. At this point you can use the ajax function and then simply do `$(variable).html(result)`. The #idofyourdiv is just an example, you can use any jquery container you like, you neither need class nor id. You have everything in your code. – John Smith Feb 18 '17 at 22:59
  • would something like this posible `$.ajax({url: "some/html/on/your/server.html", success: function(result){ html(result); }, error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); });` we don't need to specify the class of my id at this point. And then do `$(htmlFile1).html(result)`to use it for content? Second issue would be... does this way work for many HTML? we going to have more than one as you can see in the fiddle. – CharlieMood Feb 18 '17 at 23:06