After pasting some plain text as html via ajax (jQuery) into a div, the text overwrites itself.
I don't know if it's helpful to post all my code, but maybe someone had faced the same problem before and can give me a hint.
I'm using Symfony2 and jQuery (ajax request to action).
here is the ajax request and callback:
$('.tile').click(function(e){
e.preventDefault();
var thisTileImg = e.target
var x = thisTileImg.x;
var y = thisTileImg.y;
var tileID = thisTileImg.id;
// execute ajax-request to turnAction and give parameters for x and y of the tile
var request = $.ajax({
url: pathTurnAction,
type: "POST",
data: {'x':x, 'y':y, 'tileID':tileID},
dataType: "html"
});
request.done(function(msg) {
var obj = jQuery.parseJSON(msg);
switch(obj.result){
case -1:
showPopup(obj.text, obj.button);
break;
case 0:
thisTileImg.src = pathTileImg0;
break;
case 1:
thisTileImg.src = pathTileImg1;
break;
}
$('#attempts_left').html(obj.attempts);
});
request.fail(function(jqXHR, textStatus) {
// TODO: do something with the error
// ...
alert( "Request failed: " + textStatus );
});
});
function showPopup(text, button){
$('#overlay_popup_text').html(text);
$('#overlay_popup_button').html(button);
$('#overlay_bg').show();
$('#overlay_popup').show().center();
}
and the html/css
<div id="overlay_bg"></div>
<div id="overlay_popup">
<div id="overlay_popup_text"></div>
<div id="overlay_popup_button"></div>
</div>
#overlay_bg {
width: 100%;
height: 1900px;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
display: none;
background: rgba(0, 0, 0, 0.75);
-moz-transition: opacity 1.5s;
-o-transition: opacity 1.5s;
-webkit-transition: opacity 1.5s;
z-index: 10000;
}
#overlay_popup {
width: 200px;
height: 200px;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
display: none;
padding: 15px;
background-color: #fff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
z-index: 10001;
}
#overlay_popup_text {
height: 80px;
}
#overlay_popup_buttons {
height: 80px;
}
