After an extensive search on both the site and the internet, I have not had any luck so far.
I am dealing with a series of dynamically-generated divs using JQuery, cloned from the original HTML source. While I can manipulate the positioning properties of the original divs, the cloned ones are unresponsive (not reacting to height and width properties) even though I can select them without issues.
Here is the initial HTML:
<div style="width: 504px; height: 252px; left: 333px; top: 135px;" id="mainHolder">
<div style="width: 504px; height: 252px;" id="holder">
<div style="width: 126px; height: 63px;" id="idTile_5369" class="tile"></div>
<div style="width: 126px; height: 63px;" id="idTile_5373" class="tile"></div>
<div style="width: 126px; height: 63px;" id="idTile_5377" class="tile"></div>
<div style="width: 126px; height: 63px;" id="idTile_5381" class="tile"></div>
</div>
<div id="holderHandler"></div>
</div>
The following CSS rules are applied:
#mainHolder{
position: relative;
}
#holder, #holderHandler, .tile, .tileHandler{
position: absolute;
}
Below is the corresponding JS code:
getDataJsonServer('tiles.php', (function(data){ //getDataJsonServer --> custom function to obtain json data from the server through the JQuery getJson method
var mainHolder=$('#mainHolder');
var tilesHandler=$('#holder .tile', this.mainHolder).clone();
tilesHandler.addClass('tileHandler');
tilesHandler.removeClass('tile');
tilesHandler.attr('id', function(i, idTileHandler){ return 'idTileHandler_'+extractId(idTileHandler); }); //extractId --> custom function that extracts the id
$('#holderHandler', this.mainHolder).append(tilesHandler);
for(var tile in data){
$('#idTile_'+data[tile].idTile, this.mainHolder).css({left: data[tile].position.left, top: data[tile].position.top});
$('#idTileHandler_'+data[tile].idTile, this.mainHolder).css({left: data[tile].positionHandler.left, top: data[tile].positionHandler.top});
}
}
Lastly, the returned Json data by tiles.php is as follows:
"data": [{
"idTile": 5369,
"position": {
"left": -62,
"top": 0
},
"positionHandler": {
"left": -62,
"top": 0
}
},
"idTile": 5373,
"position": {
"left": -62,
"top": 0
},
"positionHandler": {
"left": -62,
"top": 0
}
},
"idTile": 5377,
"position": {
"left": -62,
"top": 0
},
"positionHandler": {
"left": -62,
"top": 0
}
},
"idTile": 5381,
"position": {
"left": -62,
"top": 0
},
"positionHandler": {
"left": -62,
"top": 0
}
}]
Although the final line inside the for/in loop functions correctly, the other line fails to set the left and top properties, without displaying any error messages.
Why is this occurring? Could it be because the second batch of divs are dynamically generated, as I suspect? How can this issue be resolved?
Edit:
- Included the Json object returned by
tiles.php - Corrected
this.tilesHandlertothis.mainHolderin thefor/inblock (typo).