Echo not printing anything (It was before) - php

Question

I am having a bit of a headache with a echo on my php code, the problem is that it isn't printing anything on screen, even though it was before, granted I added a function but when I used firebug to debug it it showed that it was getting the information out of a database correctly, just not printing it on-screen.
Where a list should be displayed there is nothing but empty space, staring into my soul.
I would appreciated if someone could point me out if I am missing something, as well why it is happening so I many not have to bother anyone anymore and if needed share my newly acquired knowledge.
PHP
function displayInfoLabs(){
if(isset($_POST['pId'])){
$id = $_POST['pId'];
$info = getSpecificLabs($id);
while($row = mysql_fetch_assoc($info)){
echo '<ul>' .
'<li>Laboratorio # ' . $row['codigolab'] . '</li>' .
'<li>Capacidad: ' . $row['capacidad'] . '</li>' .
'<li>Carrera: ' . $row['carrera'] . '</li>' .
'<li>Ubicación: ' . $row['ubicacion'] . '</li>' .
'</ul>';
}
}
}
function getSpecificLabs($pId){
$query = "SELECT bk.idlab , bk.codigolab , bk.capacidad, bk.carrera, bk.ubicacion FROM labs as bk WHERE bk.idlab = $pId";
$result = do_query($query);
return $result;
}
For reference I am also including the html and JS code of this function.
JS
$("#lnkInfo").click(function() {
var id = $('#txtId').val();
var request = $.ajax({
url: "includes/functionsLabs.php",
type: "post",
data: {
'call': 'displayInfoLabs',
'pId':id},
dataType: 'json',
success: function(response){
alert('exito')
}
});
});
HTML created via PHP, mind the lnkInfo which calls the JS that in turn calls the PHP
function displayList(){
$lista = getLabs();
while($row = mysql_fetch_assoc($lista)){
echo
'<div class="box" id="lab'.$row['idlab'].'">
<p id="labName">Lab #'.$row['codigolab'] . '</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
<input type="hidden" name="txtId" id="txtId" value="'.$row['idlab'].'">
</div>';
}
}
Thanks a lot in advance.
EDIT:
Changing the success function made the list appear but it overrode the div's style including the buttons it had and all. This is the div's code.
div class="popUp1 hide" id="popUpCorrecto1">
<div class="estiloPopUp">
<span>Información de laboratorio</span>
<span value="Cerrar" id="btnCerrar">x</span>
</div>
<input type = "button" value = "Eliminar" id = "btnEliminar" onclick="eliminar()" />
<input type = "button" value = "Modificar" id = "btnModificar" onclick="window.location='modificarLab.html';" />
</div>

Answer 1

As you said in the comments, your data is being captured, but you aren't appending it to the document. you are simply doing:
alert('exito');
What you want to do is append the response to an element that is present in your page.
For examples sake, we can put a <div> with the id of mydata like so:
<div id="mydata"></div>
Now in your jQuery.ajax function, you could do something like the following:
$("#lnkInfo").click(function() {
var id = $('#txtId').val();
var request = $.ajax({
url: "includes/functionsLabs.php",
type: "post",
data: {
'call': 'displayInfoLabs',
'pId':id},
dataType: 'text/html',
success: function(response){
$('#mydata').html(response);
}
});
});
As you can see in the above, we modified your success function to include
$('#mydata').html(response);
provided all your data is printed and supplied correctly, it should display on the page.
EDIT:
it seems in your PHP query
$query = "SELECT bk.idlab , bk.codigolab , bk.capacidad, bk.carrera, bk.ubicacion FROM labs as bk WHERE bk.idlab = $pId";
You are selecting the columns prefixed with bk.* yet trying to print out the values without the prefix as seen below:
echo '<ul>' .
'<li>Laboratorio # ' . $row['codigolab'] . '</li>' .
'<li>Capacidad: ' . $row['capacidad'] . '</li>' .
'<li>Carrera: ' . $row['carrera'] . '</li>' .
'<li>Ubicación: ' . $row['ubicacion'] . '</li>' .
'</ul>';
Try changing the above to something like:
echo '<ul>' .
'<li>Laboratorio # ' . $row['bk.codigolab'] . '</li>' .
'<li>Capacidad: ' . $row['bk.capacidad'] . '</li>' .
'<li>Carrera: ' . $row['bk.carrera'] . '</li>' .
'<li>Ubicación: ' . $row['bk.ubicacion'] . '</li>' .
'</ul>';
If i understood it correctly.
Edit: ignore above php examples.
Change the success function from:
$('#mydata').html(response);
to
$('#mydata').append(response);
As .html() replaces all content within the specified element with the supplied content.
EDIT #2:
From the comments, you're ajax request is run every time that #LnkInfo is triggered which seems like it happens a lot as it loads the PopUp?
What you want to do is add in some logic, either in your jQuery function that checks if you've already appended the list to the popup and to stop it appending.
That could be done simply by adding a boolean variable somewhere in there.
Alternatively, you could just add a little div on that popup that you append it to.
Example:
This is your popup:
div class="popUp1 hide" id="popUpCorrecto1">
<div class="estiloPopUp">
<span>Información de laboratorio</span>
<span value="Cerrar" id="btnCerrar">x</span>
</div>
<!-- ADDED A NEW DIV HERE FOR LIST CONTENT -->
<div id="mylistcontent"></div>
<input type = "button" value = "Eliminar" id = "btnEliminar" onclick="eliminar()" />
<input type = "button" value = "Modificar" id = "btnModificar" onclick="window.location='modificarLab.html';" />
</div>
As you can see above, I've added the following:
<!-- ADDED A NEW DIV HERE FOR LIST CONTENT -->
<div id="mylistcontent"></div>
Now in your jQuery success function, you could append to that #mylistcontent div instead of the popup div :)