danibg danibg - 2 months ago 7
PHP Question

.find() does not work on certain id's

In my website the clients can update their personal data. After the update is done on the database, I want the page updates itself and show the data as it is at that time. For doing this, I do an ajax call to an external php file to update the mysql database. After that, I do a get of the client data page (location.href) and I update some div info to show up the new data.

This is the AJAX call from my JS file:

$.ajax({
type: "POST",
url: "factupdate.php",
data: {
datos: stringDatos,
token: $("#token").val(),
isAjax: 1
},
success: function (codi) {
$.get(location.href, function (datos) {
($(datos)).find("#eltoken").html());
var eltoken = $(datos).find("#eltoken");
var result = $(datos).find("#cuenta_menu_fac");
console.log($(eltoken).html());
console.log($(result).html());
$(result).find(".facturacion").hide();
$(result).find("#fac_" + num).show();
$(result).find(".afac").removeClass("aliselected");
$(result).find("#menu_fac_" + num).addClass("aliselected");
$(result).find("#acc_fac").append('<span class="goodvalid">Datos de facturación actualizados</span>');
$("#cuenta_menu_fac").html($(result).html());
$("#eltoken").html($(datos).find("#eltoken").html());
$("#cargandoacc").hide();
});
},
error: function (e) {
$("#cargandoacc").hide();
alert('Ha habido un error: ' + e);
}
});


The problem is that I can see the result data but not the eltoken's, the console prints undefined.

Moreover, when I try to do a
console.log($(datos).html());
it also shows up as undefined. On the other hand, if I do a
console.log($(datos).text());
it does return the correct data of the website.

This is some of datos info:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
...
</head>
<body>
<!-- Some layout divs -->



<div id="cuenta_menu_fac" class="c-menu-content">
<div class="content" id="acc_fac">

<!-- Some label and input for updating data divs -->

</div>
</div>




<!-- /Some layout divs -->
<div id="eltoken">
<input type="hidden" id="token" value="2d5951d1e3b31dfb7fd2dcc172df17fd">
</div>
</body></html>


I do not understand what is wrong in my code. Any possible solution to this?

Answer

Datos is not a parent for eltoken. Just add eg. a common div for it.

$.get(location.href, function (datos) {
    datos = $('<div></div>').append(datos);
    ($(datos)).find("#eltoken").html());
    ...

See my similar example https://jsfiddle.net/011g253w/1/

Comments