jquery obtenga elemento recien agregado por ajax

[doylelives]

Hola a todos:
Mediante ajax agrego un elemento (tr) a una tabla, pero mi selector de jquery

Código PHP:

  $("#tabla1 tr:last").after(response.html); 
   

no reconoce el ultimo tr que agregué por ajax.
Como puedo lograrlo??
Gracias!

[mayid]

Que funcion de ajax utilizas? Jquery propone varias. Y creo que todas de alguna manera tienen espacio para un "callback", es decir para ejecutar codigo tras haber traido html nuevo.

Podes publicar todo tu js?

[doylelives]

Código PHP:

  $.ajax({
    url: pageUrl,
    data: queryString,
    type: "post",
    dataType: "json",
    async: false,
    success: function(data){
       response = data.response[0];
       if(response.status == 'true') {
          $("#lspAjaxPanel-periodList tr:last").after(response.html); 
   

La propiedad response.html posee el codigo html de un tr y su respectivo contenido, cada vez que llamo a toda esta función agrega ese tr al final de la tabla.
Pero luego el selector no reconoce al ultimo tr agregado

[mayid]

Ese es ya un problema clasico. Yo a veces lo he solucionado haciendo un setTimeout("foo",300); Es decir, dandole 0.3 segundo de tiempo al script para que efectivamente el DOM se renueve antes de querer manipularlo.

Me gustaría publicaras también "el selector que no reconoce al ultimo tr agregado". Toda la secuencia de la acción.

[doylelives]

Gracias por las molestias.
Al clickear un boton llamo a la 1° función (confirmDuplicatePeriod)

Código PHP:

       confirmDuplicatePeriod: function(){
        setup.currentIdClassroom = $(this).attr("idperiod");
        $("#periodDialog-duplicate").dialog({
          modal: true,
          buttons: {
             Duplicate: function(){
                $(this).dialog("close"); 
                 //este botón llama a la funcion de abajo (duplicatePeriod)
                setup.duplicatePeriod();
             },
             Cancel: function(){
                $(this).dialog('close');
             }
          },
          width: 500
          
        });
        $("#periodDialog-duplicate").dialog('open');
      },
      
      
      duplicatePeriod: function(){
          var idClassroom = setup.currentIdClassroom;
          var periodStartDate = $("#copyPeriodStartDate").val();
          var periodEndDate = $("#copyPeriodEndDate").val();
          var url = LSP_C_BASE_URL + LSP_C_CONTROLLER + "/ajaxDuplicatePeriod";
          var result= 'false';
          var queryString = "idPeriod=" + idClassroom;
          queryString += "&periodStartDate="+periodStartDate; 
          queryString += "&periodEndDate="+periodEndDate;
          queryString += "&periodName="+$("#duplicatePeriodName").val();
          $.ajax({
             url: url,
             data: queryString,
             type: "post",
             dataType: "json",
             async: false,
             success: function(data){
                response = data.response[0];
                if(response.status == 'true') {
                    $("#lspAjaxPanel-periodList tr:last").after(response.html);
                    setup.bindEvents();
                   setup.message(response.message);
                }
                setup.message(response.message);
                result = response.status;
             }
          });
          return result;
      }, 
   

[Dany_s]

tras un click queres insertar otro tr luego del último en la tabla #lspAjaxPanel-periodList ? la primera vez funciona la segunda ya no?

[sublime_style]

Fijate primero que la llamada devuelva relamente el codigo html deseado,.

dataType: "json", en realidad no deberias declarar los datos como json puede que te de problemas por eso.

agregate el error del $.ajax para tener seguridad de que entra al sucess y no da error

error : funtion(e){alert(e)}

[doylelives]

Tras un click debo insertar un nuevo tr luego del ultimo en la tabla.
Me olvidé aclarar lo siguiente: siempre me agrega los tr nuevos, o sea que siempre actúa SUCCESS, pero va agregandolos al final del tr que apuntaba al principio.
Ej:

Código PHP:

  tr A
tr B
tr C //<-- ultimo tr de la tabla
//por ajax inserto nuevo tr
tr nuevo 1 // se inserta luego de tr C 
   

Pero el selector apunta siempre al tr C, como ultimo tr de la tabla, entonces al siguiente click

Código PHP:

  //por ajax inserto nuevo tr
//lo inserta luego de tr C pero antes de tr nuevo 1
tr A
tr B
tr C
tr nuevo 2 
tr nuevo 1 
   

El selector no reconocio a tr nuevo 1 como ultimo tr de la tabla, yo quiero que tr nuevo 2 valla despues de tr nuevo 1.

[mayid]

Bueno, yo no estoy habituado a programar como objetos. Lo que si, creo que no publicastes todas las funciones entonces es dificil seguir el flujo de tus llamadas.

Igual, proba cambiar esto: setup.bindEvents();

Por esto: setTimeout("setup.bindEvents();",300);

Y si funciona se confirma mi teoría: tu llamada se anticipa a la actualización del DOM. Suele pasar.

[doylelives]

Intenté el setTimeout pero sigue sin funcionar, para mi el problema está en el selector que no reconoce el nuevo tr agregado por ajax,

Código PHP:

  $("#lspAjaxPanel-periodList tr:last").after(response.html);
setup.bindEvents();//es un metodo que bindea metodos a elementos
setup.message(response.message);//solo muestra un mensaje en otro div 
   

[doylelives]

ok solucionado, le saque el ; al 1° argumento
setTimeout("setup.bindEvents()",300);
Ahora funciona, pero resulta que he actualizado mi archivo js del proyecto, con mejoras sustanciales (hechas por otros)y me ha afectado otros metodos, si esto anduvo no lo toco mas!!
Ahora me queda la duda si se solucionó por el settimeout o por actualizar el js
Gracias por su ayuda!!!

[mayid]

Fijate. Igual, desconociendo tu script, propongo que evalues usar live() en vez de esto: setup.bindEvents();//es un metodo que bindea metodos a elementos

Así, cada elemento nuevo tendrá las funcionalidades asignadas. Creo. Vos dirás.

[Dany_s]

como es la estructura de tu json? podes postear la salida como texto asi vemos que es lo que estas recibiendo

[doylelives]

setup.bindEvents() no lo puedo tocar,
copio el response completo

Código PHP:

  {
  "response": [
                {
                    status: 'true',
                    message: '  <div class="lspEvent-message msgBox">      <p class="success">        The semester has been duplicated successfully.    </p>    </div>',
                    html: '<tr><td width="22%">nuevo periodo</td><td width="8%">03/01/10</td><td width="8%">03/31/10</td><td width="5%"><span class="added pad5 bold">Open</span></td><td width="25%">  <a href="javascript://" class="lspEvent-editPeriod ui-state-default ui-corner-all fg-button fg-button-icon-left" idPeriod ="13"><span class="ui-icon ui-icon-pencil"></span>Edit</a>  <a href="javascript://" class="lspEvent-managePeriod ui-state-default ui-corner-all fg-button fg-button-icon-left" idPeriod="13"><span class="ui-icon ui-icon-gear"></span>Manage</a>  <a href="javascript://" class="lspEvent-duplicatePeriod ui-state-default ui-corner-all fg-button fg-button-icon-left" idPeriod="13"><span class="ui-icon ui-icon-gear"></span>Duplicate</a></td></tr>',
                    idInserted: '',
                    statusCode: '7028'
 
                }
              ]
} 
   

[Dany_s]

esta mal tu json, los pares de clave/valos debenentre comillas y los valores de tus atributos html con comillas simples asi no da error con las comillas de inicio

Código HTML:

{
  "response": [
                {
                    "status": "true",
                    "message": "<div class='lspEvent-message msgBox'><p class='success'>The semester has been duplicated successfully.</p></div>",
                    "html": "<tr><td width='22%'>......................",
                    "idInserted": "",
                    "statusCode": "7028"
                }
              ]
}

yo hice un ejemplo solo para leer la clave "html" y funciona bien mira,

json

Código HTML:

{
  "response": [
                {
                "html": "<tr><td><% out.print(request.getParameter("para")); %></td><td>nada</td></tr>",
                }
              ]
}

la parte de <% out.print(request.getParameter("para")); %> es porque es un jsp en php ponele un echo $_GET['para'] y modifica la url

el html y jquery

Código HTML:

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
    $(function (){
        var i = 2;
        $('a').click(function(){
             $.ajax({
                url: "uno.jsp?para="+(i++),
                dataType: "json",
                success: function(data){
                    response = data.response[0];
                    $("table tr:last").after( response.html );
                },
                error: function(){alert("error")}
             });
        });
    });
  </script>
<style>
    tr {background-color:red}
    td{width:100px}
</style>
</head>
<body>
    <a href="#">Insertar</a>
    <table>
        <tr><td>1</td><td>1</td></tr>
    </table>
</body>
</html> 

la variable para envia un valor al json asi vemos que se inserta el resultado despues de la ultima fila

también se puede usar $("#latabla").append( response.html );

[marcarronnis]

Hola doylelives!
Has conseguido solucionar el problema? Te lo pregunto porque yo tengo justa y exactamente el mismo problema que tu (aunque yo no uso AJAX).

En un plugin que me estoy montando hay el siguiente código:

Código Javascript:

$List.children().last().click(function() {          
    var nextValue = Number($(this).html())+1;
    if(nextValue<=params.maxValue) {
        $List.append(params.insTag).children().last().html(nextValue);
        $List.children().first().remove();
    }  
});
 

El código realiza como un sencillo slideshow de 3 numeros. Deberia insertar una fila al final de la lista al hacer click en la última fila de ésta, mientras elimina la primera. Y funciona bien... la primera vez. Pero luego ya no funciona más. De hecho funciona al hacer click a la penúltima fila, y luego a la antepenultima. Es decir, el problema supongo está en:

Código Javascript:

$List.children().last().click(function() {...
 

Como bien dices, parece que no detecta los elementos creados recientemente.

También he probado con:

Código Javascript:

$List.children().last().live('click', function() {...
 

pero aún peor, ya que no funciona ni la primera vez.

Espero que si has encontrado la solución me puedas hechar una mano. Muchas gracias!

[Noranterry]

El problema está en la funcion live() usa delegate()

Saludos.