jQuery - Aplicar estilo css al elemento de entrada

Estoy tratando de verificar todos los enlaces y cambiar el color de fondo del campo de enlaces rotos. Aquí está mi función

function CheckLinks(){
$('#new_post_links_table tbody>tr').find("input").each(function() {
    UrlExists($(this).val(), function(status){
    if(status === 404){
       $(this).css('background-color','#FC0');
    }
}); });}

Los campos de entrada se ven así:

<table id="new_post_links_table">
...
<td><input type="text" name="mp3_link[]"/></td>
<td><input type="text" name="mp4_link[]"/></td>
</tr>
</tbody>
</table>

Por alguna razón, el css no se está aplicando.

Nota: mi función CheckLinks funciona, excepto el $(this).css... parte. (FireBug'ed)

Nota: Las filas se agregan dinámicamente

EDITAR: Aquí está la función:

function UrlExists(url, cb){
    jQuery.ajax({
        url:      url,
        dataType: 'text',
        type:     'GET',
        complete:  function(xhr){
            if(typeof cb === 'function')
               cb.apply(this, [xhr.status]);
        }
    });
}

preguntado el 02 de mayo de 12 a las 19:05

No, el primer parámetro de su UrlExists() la función tiene $(this).val, cuando debería haber $(this).val(). -

Entonces es un problema de referencia. tu mas interior this no está asignado al elemento que se está probando actualmente. -

3 Respuestas

Un par de cosas mal. No incluyeste el () en la llamada a $(this).val, Y su this la referencia dentro de la devolución de llamada no se refiere al elemento previsto.

function CheckLinks(){
  $('#new_post_links_table tbody > tr')
    .find("input")
    .each(function(index, element) {
      UrlExists($(this).val(), function(status){
        if(status === 404) $(element).css('background-color','#FC0');
      }); 
    });
}

Tenga en cuenta que al hacer esto puede encontrarse con algunos inconvenientes con Access-Control-Allow-Origin.

Es posible que desee modificar su UrlExists función para ejecutar un script de proxy en su servidor. Podrías hacer algo como lo siguiente:

$.getJSON('checklink.php', { location: url }, function ( data ) {
  callback.apply( null, data.status );
});

En su backend, pruebe la URL y envíe la respuesta a través de JSON:

$response = array( 
  'location' => $location, 
  'status' => $status 
);
echo json_encode( $response );

De esta manera, su JavaScript se comunica con su back-end y no tiene problemas con el control de origen.

contestado el 02 de mayo de 12 a las 20:05

Ok, el color de fondo de los campos cambió. pero la url no estaba rota. Editar: Ok, voy a verificar si eso está habilitado en mi servidor. - xperador

@xperator No puede simplemente acceder a URL aleatorias con JavaScript. ¿Qué URL estás tratando de probar? - Sampson

Están en el mismo servidor. se ven así http://www.dl.mysite.com/momeni/momeni-09.mp3 Yo uso nginx + ISPConfig. www.dl.mysite se trata como un sitio diferente en ISPConfig y el script que estoy probando está en mysite.com/at-admin - xperador

Así que efectivamente están en dos dominios diferentes. El navegador no puede saber que están "físicamente" en el mismo dispositivo - devnull69

Lo marqué como respuesta aceptada por el momento. Porque el problema de Css está resuelto. Ahora el problema de la URL está relacionado con el back-end. Necesito algo de tiempo para cavar esto. Muchas gracias, estás dando demasiada información sobre esto :-) - xperador

Mi sensación es que esto ya no se refiere a la entrada. Debe agregar una variable para almacenar la entrada para que pueda acceder a ella dentro del cierre

var input = $(this);
UrlExists($(this).val(), function(status){
  if(status === 404){
     input.css('background-color','#FC0');
  }
});

contestado el 02 de mayo de 12 a las 19:05

Um... Ingresé un enlace válido y uno roto. La URL válida comienza a descargarse y la rota no cambia el color de fondo. - xperador

Entonces finalmente deberías exponernos la función UrlExists() :-) - devnull69

Es posible que desee publicar algo para que podamos comprobarlo entonces! :) - Pete Lada

@devnull69 Expuesto ^_^ perdón por llegar tarde - xperador

Todavía me parece un problema de referencia. - Pete Lada

¿Esa función sabe que hay filas agregadas dinámicamente? Hace un tiempo tuve un problema similar. El problema era que jQuery no sabía que se agregaron nuevas filas con algo de contenido. Pruebe consolar lo que está debajo de $(this) en la función y díganos qué resultado obtuvo.

contestado el 02 de mayo de 12 a las 19:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.