When I try to insert plain text as HTML using AJAX (jQuery) into a div, the text ends up rewriting itself.
I'm not sure if sharing all my code would be helpful, but maybe someone has encountered this issue before and can offer some guidance.
My setup involves Symfony2 and jQuery (with an AJAX request to an action).
Here is the AJAX request and callback function:
$('.tile').click(function(e){
e.preventDefault();
var thisTileImg = e.target
var x = thisTileImg.x;
var y = thisTileImg.y;
var tileID = thisTileImg.id;
// Perform an AJAX request to turnAction with parameters for x and y coordinates 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) {
// Handle errors here
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 here's the corresponding 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;
}