I have ajax function:
In the html file I have something like:
<div id="datos98" style="display:none;">
</div>
<div id="datos99" style="display:none;">
</div>
<div id="usuario">
<table id="rowed2"></table>
<div id="prowed2"></div>
</div>
<script src="rowedex2.js" type="text/javascript"> </script>
In some point of my js file I have a ajax function like this:
$.ajax({
type: 'POST',
url : 'server2.php',
data: &ciudadh=juan&corporacionh=&radicado=&ultima=&anotaciones=&oper=addf&id='+allRows+'',
beforeSend: function(){
$('#mensaje5').show().html('<br><br><h2>Por favor espere....<br><img src="c.gif" width="100" height="100" alt="cargando" border="0">');
},
success: function (data){
$('#datos99').html(data);
},
complete: function(){
$('#datos99').show();
}
});
The function is fine, but when this function have success the data is loaded on this
<div id="datos99" style="display:none;">
</div>
But the data is too long so I need that this div displace the others divs at the bottom (below of the datos99
div). so can read all the information (Data ajax loaded and the data that it was stay here before).
Thanks in advance for your help.
change your code with this
$.ajax({
type: 'POST',
url : 'server2.php',
data: 'ciudadh=juan&corporacionh=&radicado=&ultima=&anotaciones=&oper=addf&id='+allRows,
beforeSend: function(){
$('#mensaje5').show().html('<br><br><h2>Por favor espere....<br><img src="c.gif" width="100" height="100" alt="cargando" border="0">');
},
success: function (data){
$('#datos99').html(data);
}
}).complete(function(){
$('#datos99').show();
});
or to this:
$.ajax({
type: 'POST',
url : 'server2.php',
data: 'ciudadh=juan&corporacionh=&radicado=&ultima=&anotaciones=&oper=addf&id='+allRows,
beforeSend: function(){
$('#mensaje5').show().html('<br><br><h2>Por favor espere....<br><img src="c.gif" width="100" height="100" alt="cargando" border="0">');
},
success: function (data){
$('#datos99').html(data);
$('#datos99').show();
},
});
Your question isn't that clear, but I'll take a stab at it. If I'm understanding your problem, I think your issue has to do with the fact that you're assigning <div id="datos99">
with a fixed height of 900px. Therefore, when it's populated with the data returned from the ajax call, it is messesing up your layout. This happens because the data returned is too big to fit in the div.
You can solve this by adding overflow: auto
to your CSS for <div id="datos99">
. This will allow your ajax data to fit nicely in the div and provide a scroll bar if the data is larger than your div's height
CSS:
#datos99 {
position: absolute;
top: 320px;
left: 25px;
width: 674px;
padding: 50px;
height: 900px;
overflow: auto;
}
P.S You should edit your question and provide more information. It will help us answer your question better. I would also adjust your question and state your problem more clearly.