2011-06-03 13 views
5

tiene a nadie usa el plugin toChecklist jQuery, estoy tratando de usarlo y seguido las instrucciones, pero no pasa nada en absoluto, aquí está mi código:no puede utilizar la toChecklist Plugin


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<html> 
<head> 
<script type="text/javascript" src="jquery-1.6.1.min.js"></script> 
<script type="text/javascript" src="jquery.toChecklist.min.js"></script> 

<!-- Stylesheet --> 
<link type="text/css" rel="stylesheet" media="screen" href="jquery.toChecklist.min.css" /> 

<!-- Code to run toChecklist --> 
<script type="text/javascript"> 
    $(function() { 
     $('mySelectBox').toChecklist(); 
    }); 
</script> 

</head> 
<body> 

<select id="mySelectBox" multiple="multiple"> 
    <option>Value 1</option> 
    <option>Value 2</option> 
    <option>Value 3</option> 
</select> 

</body> 
</html> 

Respuesta

0

Bueno , el problema es que tiene dos <html> tags:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<html> 

Esto evitará que su página de validación, y posiblemente causar alguna otra emi es también Quite la segunda etiqueta <html> si planea quedarse con XHTML (que supongo que es).

+0

Esto, aunque es un problema indeseable, no tiene ninguna relación con el problema en cuestión. – Crollster

-1

correcto, el problema que estamos enfrentando se puede fijar con bastante facilidad, y existe aquí:

<script type="text/javascript"> 
    $(function() { 
     $('mySelectBox').toChecklist(); 
    }); 
</script> 

creo que esto está causando un problema ya que el navegador no puede haber cargado totalmente el DOM antes de ejecutar el código, así jQuery no puede realizar acciones en algo que no existe en el DOM.

Cambio a la siguiente y todo funciona bien:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#mySelectBox').toChecklist(); 
    }); 
</script> 

El método ready() espera a que el DOM de la carga totalmente antes de ejecutar. Además, debe agregar un prefijo al prefijo ("#") para indicar a jQuery que son Id. Y no otro tipo de identificador (como clases, etc.).

Me doy cuenta de que han pasado unos días desde que hizo la pregunta, pero espero que esto proporcione un poco de ayuda.

+0

Eso debería hacer exactamente lo mismo: http://api.jquery.com/jQuery/#jQuery3 – mc10

+0

Podría ser lo que dice la documentación, pero no funcionó cuando pegué el código del OP en un archivo HTML. ;-) La única otra diferencia es la adición de un hash a la identificación, de hecho lo intenté en un archivo HTML, pero no generó una lista de verificación. Sin embargo, cuando utilicé explícitamente .ready(), funcionó. – Crollster

+0

La adición del método .ready() hizo que el complemento funcionara perfectamente ... muchas gracias – Mike

7

toChecklist plugin utiliza dos formas antiguas y obsoletas acceder a innerHTML, por ejemplos:

var labelText = $(this).attr('innerHTML'); 
checkboxValue = this.innerHTML; 

que no está disponible en jQuery 1.6 +

Así que tienes 2 opciones para hacer que funcione para usted .

  1. Degrade su jquery a la versión 1.5 o inferior.
  2. cambiar esas líneas (y otras líneas de este tipo) en toChecklist.js a algo como estos

    var labelText = $(this).html(); 
    checkboxValue = this.html(); 
    

favor ver http://forum.jquery.com/topic/jquery-change-innerhtml para más detalles.

+1

Me alegro de que hayas encontrado la solución. Envié un correo electrónico al autor del complemento al respecto. Por cierto, probablemente quiso decir 'checkboxValue = $ (this) .html();' – yitwail

Cuestiones relacionadas