Raghav Patnecha Raghav Patnecha - 2 months ago 23
jQuery Question

Load data in div from external page

Info.html

var Element = function ( id, w, h, position, rotation ) {
var html = [
'<div class="wrapper" width="' + w + '" height="' + h + '" >',
'<ul class="stage clearfix">',
'<li class="scene" id="' + id + '">',
'<div class="movie i1" id="attacker" >'
'<div class="poster">',
'</div>',
'<div class="info" url-data="' + id + '">',
'</div>',
'</div>',
'</li>',
'</ul>',
'</div>'
].join('\n');
var div = document.createElement('div');
$(div).html(html);
}

function init() {
var group = new THREE.Group();
var str = {"0":'http://localhost/liberate/threeee/PAGES/Information/content.html'

}

for ( var i = 0; i < totalSpheres; i ++ ) {
var xp = centerX + Math.sin(startRadians) * circleRadius;
var zp = centerZ + Math.cos(startRadians) * circleRadius;
group.add( new Element( str[i], 1000, 1000, new THREE.Vector3(xp, 0, zp), new THREE.Vector3(0, i*incrementAngle * (Math.PI/180.0), 0) ) );
startRadians += incrementRadians;
particles.push(group);

}
scene.add(group);


});


I want to load data dynamically to this div with class info from a file content.html So I tried using url-data attribute but the problem is neither the console shows any error nor it shows the data. I know that I can directly put the data in div but the problem is that the data keeps on changing as the id change.
Here is my content.html from which I am trying to load the data into class div.
Content.html

<header>
<h1>It's a Wonderful Life</h1>
<span class="year">1946</span>
<span class="rating">PG</span>
<span class="duration">130 minutes</span>
</header>
<p>
In Bedford Falls, New York on Christmas Eve, George Bailey is deeply troubled. Prayers for his well-being from friends and family reach Heaven.
Clarence Odbody, Angel Second Class, is assigned to visit Earth to save
George, thereby earning his wings. Franklin and Joseph, the head angels,
review George's life with Clarence.
</p>


I want to put the data in content.html directly into class info.

Answer Source

Just change var str to:

var str = {
                "attacker":$.ajax({
    dataType: "text",
    url: "http://localhost/liberate/threeee/PAGES/Information/content.html",
    success: function (data) {      
                console.log(data);
        $("#attacker").append(data)
   }}),
                "defender":$.ajax({
    dataType: "text",
    url: "http://localhost/liberate/threeee/PAGES/Information/defender.html",
    success: function (data) {      
                console.log(data);
        $("#defender").append(data)
  }}),

                "goalkeeper" : $.ajax({
    dataType: "text",
    url: "http://localhost/liberate/threeee/PAGES/Information/content.html",
    success: function (data) {      
                console.log(data);
        $("#goalkeeper").append(data)
   }}),
                  "midfielder":$.ajax({
    dataType: "text",
    url: "http://localhost/liberate/threeee/PAGES/Information/midfielder.html",
    success: function (data) {      
                console.log(data);
        $("#midfielder").append(data)
  }})


             }

        var allKeys = Object.keys(str);   // obtain keys

pass both keys and value to he element function:

group.add( new Element( allKeys[i], str[i], new THREE.Vector3(xp, 0, zp), new THREE.Vector3(0, i*incrementAngle * (Math.PI/180.0), 0) ) );