$('#scoreBar').append no funciona

adryan310 · #1 (**permalink**) 10/12/2013, 11:51

Hola gente, tengo la siguiente funcion ajax en jquery:

Código Javascript:

Ver original$(document).ready(function() {
    var idLea = 'NBA';
    $.ajax({
       url: "../livescore.php",
       type: "GET",
       data: {"idLeague":idLea},
       success: function(response) {
        $('#scoreBar').empty();
        $('#scoreBar').append(response);
          console.log(response);
       }
    });
});

La respuesta ajax me llega bien desde el php, esto es lo que se ve en la consola al dar el console.log:

Cita:

<div class="scoreWrapper">
<div class="menu">
<a><span class="mainSports">Sport </span><span class="moreSports">MORE SPORTS <img src="img/arrowMoreSports.png" alt="more sports"></span><span class="mainSportsMobile">SPORT</span></a>
<div class="moreSportsMenu">
<ul>
<li><a id="NBA">NBA</a></li><li><a id="NCAABasketball">NCAA Basketball</a></li><li><a id="NHL">NHL</a></li><li><a id="Golf">Golf</a></li><li><a id="Soccer">Soccer</a></li> </ul>
</div>
</div>
<div class="arrowLeft"><a class="prev"><img src="img/arrow-left.png" alt="left score"></a></div>
<div class="scores">
<div id="owl" class="owl-carousel owl-theme">
<table class="item sporTitle NBA"><tr><td>NBA</td></tr></table><table class="item empty NBA" title="Indiana at Miami"><tr><td>IND @ MIA</td></tr><tr><td>TUE, 04:05 PM PST</td></tr></table><table class="item empty NBA" title="Cleveland at New York"><tr><td>CLE @ NY</td></tr><tr><td>TUE, 04:05 PM PST</td></tr></table><table class="item empty NBA" title="Toronto at San Antonio"><tr><td>TOR @ SA</td></tr><tr><td>TUE, 04:05 PM PST</td></tr></table><table class="item empty NBA" title="Detroit at Minnesota"><tr><td>DET @ MIN</td></tr><tr><td>TUE, 04:35 PM PST</td></tr></table><table class="item empty NBA" title="Brooklyn at Boston"><tr><td>BRK @ BOS</td></tr><tr><td>TUE, 04:35 PM PST</td></tr></table><table class="item empty NBA" title="Atlanta at Oklahoma City"><tr><td>ATL @ OKC</td></tr><tr><td>TUE, 04:35 PM PST</td></tr></table><table class="item empty NBA" title="Chicago at Milwaukee"><tr><td>CHI @ MIL</td></tr><tr><td>TUE, 05:05 PM PST</td></tr></table><table class="item empty NBA" title="LA Lakers at Phoenix"><tr><td>LAL @ PHO</td></tr><tr><td>TUE, 07:35 PM PST</td></tr></table>
</div>
</div>
<div class="arrowRight"><a class="next" ><img src="img/arrow-right.png" alt="left score"></a></div>
<div class="fullScores"><a href="sportbook.php"><span class="fullLink">Full Scoreboard</span><span class="fullScoresMobile">All</span></a></div>
</div>

Entonces al hacer el append deberia cargarme en el div correspondiente los datos devueltos osea html pero no lo esta haciendo. Alguna ayuda al respecto ??

Dalam · #2 (**permalink**) 10/12/2013, 12:57

y la etiqueta scoreBar donde la tienes en el html?

adryan310 · #3 (**permalink**) 10/12/2013, 13:50

Lo tengo aca:

Código HTML:

<div class="scoreBar clear" id="scoreBar">
	<?php include 'livescore.php'; ?>
</div>

En ese include es donde esta la pagina que recibe y devuelve el ajax. todo funciona bien y en consola sale correctamente, pero no se ve nada cuando hago el .append alguna ayuda please ?

Dalam · #4 (**permalink**) 10/12/2013, 14:06

y lo que haces es borrar el div antes de agregarle el nuevo valor

Dalam · #5 (**permalink**) 10/12/2013, 14:22

Cita:

$(document).ready(function() {
var idLea = 'NBA';
$.ajax({
url: "../livescore.php",
type: "GET",
data: "idLeague=idLea",
dataType: "html",
success: function(response) {
$('#scoreBar').empty();
$('#scoreBar').append(response);
console.log(response);
}
});
});

adryan310 · #6 (**permalink**) 10/12/2013, 14:24

No lo que hago es vaciar el contenido del div y despues lo lleno, pero igual si tienes en mente otra idea pues mejor, recuerda que la respuesta del server es html entonces como hago para que en jquery ese codigo html se inserte en el div scoreBar ?

Dalam · #7 (**permalink**) 10/12/2013, 14:28

Pues si cambia esto

Cita:

success: function(response) {
$('#scoreBar').empty();
$('#scoreBar').append(response);
console.log(response);
}

por esto

Cita:

success: function(response) {
$('#scoreBar').html(response);
console.log(response);
}

Y dime si te funciona

adryan310 · #8 (**permalink**) 10/12/2013, 14:36

Amigo no me funciono lo puse tal y como me dices tu:

Código Javascript:

Ver originalsuccess: function(response) {
   $('#scoreBar').html(response);
   console.log(response);
}

Dalam · #9 (**permalink**) 10/12/2013, 14:40

dime la url del sitio para poder chequearlo yo

adryan310 · #10 (**permalink**) 10/12/2013, 15:02

estoy practicando en mi localhost amigo, pero de igual forma subire mi archivo:

livescore.js: aqui
livescore.php: aqui
scoreClass.php: aqui

En la consola me sale bien los divs y las tablas que se crean dinamicamente en el livescore.php, es solo darles formato o pasarlos con jquery al div que te puse antes

Código HTML:

<div class="scoreBar clear" id="scoreBar">
	<?php include 'livescore.php'; ?>
</div>

Dalam · #11 (**permalink**) 10/12/2013, 15:15

leete esto y intenta adaptarlo a tus necesidades.
Si tienes dudas postea aqui y te ire ayudando a resolver
http://www.calbertts.com/blog/articu...query-php-json

adryan310 · #12 (**permalink**) 10/12/2013, 15:20

Gracias amigo por la ayuda

adryan310 · #13 (**permalink**) 10/12/2013, 16:02

Amigo por lo poco que entendi tengo que crear los divs y las tablas desde jquery ? cierto ?

Dalam · #14 (**permalink**) 10/12/2013, 18:50

no hace falta. mirate el codigo de abajo de la pagina que te dije y analizalo. yo me voy a dormir ya. Mañana si eso miro las preguntas que hallas dejado aqui.
Tambien seria bueno que miraras la pagina oficial de jquery y que busques informacion del objeto XMLHttpRequest

adryan310 · #15 (**permalink**) 10/12/2013, 19:07

Esta bien amigo gracias hasta mañana

adryan310 · #16 (**permalink**) 11/12/2013, 09:19

Amigo te comento que estuve analizando lo que me recomendaste y no entendi

adryan310 · #17 (**permalink**) 11/12/2013, 09:53

Tengo este codigo que tome de lo que tu me recomendaste, creo que a eso te referias mira:

JS:

Código Javascript:

Ver originalfunction siRespuesta(r){
        console.log(r);
        $('#scoreBar').html(r);   // Mostrar la respuesta del servidor en el div con el id "respuesta"
    }
 
    function siError(e){
        alert('Ocurrió un error al realizar la petición: '+e.statusText);
    }
    
    // Obtener valores de los campos de texto
        var parametros = {
            idLeague: "NBA"
        };
 
        // Realizar la petición
    var post = $.post(
                       "../livescore.php",    // Script que se ejecuta en el servidor
                       parametros,                             
                       siRespuesta,    // Función que se ejecuta cuando el servidor responde
                       'html'          // Tipo de respuesta del servidor
                      );
 
        /* Registrar evento de la petición (hay mas)
           (no es obligatorio implementarlo, pero es muy recomendable para detectar errores) */
 
        post.error(siError);         // Si ocurrió un error al ejecutar la petición se ejecuta "siError"

PHP:

Código PHP:

  include_once('prueba/scoreClass.php');

 
 $callClass = new returnIdLeague();

 $callClass->obtenerId($_POST["idLeague"]);

 $id = $callClass->returnId();

 
 $games = groupArray($data,'league');

 

   echo '<div class="scoreWrapper">';

   echo '<div class="menu">';

   echo '<a><span class="mainSports">Sport </span><span class="moreSports">MORE SPORTS <img src="img/arrowMoreSports.png" alt="more sports"></span><span class="mainSportsMobile">SPORT</span></a>';

   echo '<div class="moreSportsMenu">';

   echo '<ul>';

             

              foreach ($games as $group) {

                  echo '<li><a id="'.str_replace(' ', '', $group['league']).'">'.$group['league'].'</a></li>';

              }

             

   echo '</ul>';

   echo '</div>';

   echo '</div>';

   echo '<div class="arrowLeft"><a class="prev"><img src="img/arrow-left.png" alt="left score"></a></div>';

   echo '<div class="scores">';

   echo '<div id="owl" class="owl-carousel owl-theme">';

 

      foreach ($games as $group) {

          

         if($group['league'] == $id){

               echo '<table class="item sporTitle '.str_replace(' ', '', $group['league']).'">';

             echo "<tr><td>".$group['league']."</td></tr>";

             echo "</table>";

 
               foreach ($group['groupeddata'] as $gameDetails) {

 
                   if(trim($gameDetails['status']) == ""){

                       echo '<table class="item empty '.str_replace(' ', '', $group['league']).'" title="'.$gameDetails['homeName'].' at '.$gameDetails['awayName'].'">';

                       echo "<tr><td>".$gameDetails['home']." @ ".$gameDetails['away']."</td></tr>";

                     echo "<tr><td>".$gameDetails['time']."</td></tr>";

                     echo "</table>";

                    }else{

                           

                           echo '<table class="item full '.str_replace(' ', '', $group['league']).'" title="'.$gameDetails['homeName'].' at '.$gameDetails['awayName'].'">';

                             echo "<tr><td class=\"team , teamHome\">".$gameDetails['home'].'</td>';

                                 echo "<td class=\"point pointHome\">".$gameDetails['hScores']."</td>";

                                 echo "<td class=\"status\" rowspan=\"2\">".$gameDetails['status'].'</td>';

                                 echo "</tr>";

                             echo "<tr><td class=\"team\">".$gameDetails['away'].'</td>';

                                 echo "<td class=\"point\">".$gameDetails['aScores'].'</td>'; 

                             echo "</tr>";

                           echo '</table>';

 
                        }

               }

           } 

     }

  

 
    echo '</div>';

    echo '</div>';

    echo '<div class="arrowRight"><a class="next" ><img src="img/arrow-right.png" alt="left score"></a></div>';

    echo '<div class="fullScores"><a href="sportbook.php"><span class="fullLink">Full Scoreboard</span><span class="fullScoresMobile">All</span></a></div>';

    echo '</div>';

Respuesta en la consola: Imagen
Pero no me construye la tabla que esta dentro de los divs que en la consola se ve. Sabes a que se debe esto ?