Why, when you press an image that shows a popOver Bootstrap, this it only unfolds when the image that invokes it is pressed a second time, whenever you click again on the image I must press twice to show the popOver.
Image tag that redirects to a function in javascript:
<img src=... alt=... id="popoverUser1" name="1" onclick="consultaPerfil(this.name)" >
Ajax function to execute request to the controller in java:
function consultaPerfil(id_author){
$.ajax({
url: "consultarDatosPerfilAuthor.html",
type: "GET",
dataType: "html",
data:"id_author="+id_author,
cache: false,
contentType: false,
processData: false,
success : function(response) {
PrintPerfil(response);
},
error : function(e) {
console.log("ERROR: ", e);
display(e);
},
done : function(e) {
console.log("DONE");
}
});
Function in the controller to perform necessary information queries:
@RequestMapping(value = "/consultarDatosPerfilAuthor", method = { RequestMethod.GET, RequestMethod.POST })
public @ResponseBody String consultarDatosPerfilAuthor(HttpServletRequest request) {
int author = Integer.parseInt(request.getParameter("id_author"));
String jsonCompleto = hibernateTransations.consultarDatosProfile(author);
return jsonCompleto;
}
Function that consults the necessary information to show in the popOver and return a string / json:
public static String consultarDatosProfile(int IdAccount) {
Session session = HibernateUtil.getSessionFactory().openSession();
Object [] datos;
String sentenciaSQL = "Select a.name,a.last_name,a.email,a.birth_date,a.number_phone,p.reputation,p.photo FROM Account a,Profile p Where p.profile_account = a.id_account and a.id_account = ?";
try{
session.beginTransaction();
Query query = session.createQuery(sentenciaSQL);
query.setParameter(0,IdAccount);
List<Object[]> results = query.getResultList();
datos=results.get(0);
String datosProfile = "[{\"nombre_author\":\""+ datos[0] + " " + datos[1] + "\"}]";
return datosProfile;
}catch (Exception e) {
System.out.println("Error en el metodo consultarProfile - " + e.getMessage());
return null;
}finally {
session.disconnect();
}
}
JavaScript function that receives the information to be displayed in popOver # popoverUser1:
function PrintPerfil(data){
dato=JSON.parse(data);
dst='<p align="center">' +dato[0].nombre_author+'</p>'+
'<span class="glyphicon glyphicon-star" style="color:blue"></span>';
$('#popoverUser1').popover({
title:dst,
content : "<strom>Tel: </strom><p>"+dato[0].nombre_author+"</p>",
html: true
});
}