Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

195
Views
¿Cómo hacer que DataTables funcione con Turbolinks 5?

Estoy trabajando en algo en Ruby (2.7.3) en Rails (6.1.3). Tengo una tarea para configurar jQuery Datatable. No hay problema allí:

 <script> $(document).ready( function () { $('#stakingTable').DataTable(); } ); </script>

Tengo mis importaciones de jQuery en la parte superior del archivo html.erb como tal:

 <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <link rel="stylesheet" href="//cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"> <script src="//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

En esta ruta, app/javascript/packs/application.js, tengo las siguientes importaciones:

 import Rails from "@rails/ujs" import Turbolinks from "turbolinks" Rails.start() Turbolinks.start()

Ahora, cuando me dieron esta tarea para implementar DataTable, noté que necesito actualizar mi página, una vez, antes de que cargue DataTable. Revisé mi consola, antes de recargar, y obtuve el siguiente error:

 Uncaught ReferenceError: $ is not defined at <anonymous>:3:1 at o.assignNewBody (turbolinks.js:604:1) at o.replaceBody (turbolinks.js:542:1) at turbolinks.js:535:1 at oerenderView (turbolinks.js:495:1) at o.render (turbolinks.js:533:1) at Function.e.render (turbolinks.js:493:1) at t.renderSnapshot (turbolinks.js:690:1) at t.render (turbolinks.js:686:1) at r.render (turbolinks.js:940:1)

La respuesta que me dio mi mentor tenía algo que ver con Turbolinks, y cómo carga la página demasiado rápido para que se aplique jQuery. Así que eché un vistazo y vi que esta parecía ser una solución común:

 <script> $(document).on(;'turbolinks:load' function () { $('#stakingTable').DataTable(); } ); </script>

Sin embargo, esto no hace nada para mí. Sigue siendo el mismo error en la consola, como se mencionó anteriormente. Revisé parte de la documentación de Turbolinks aquí: https://github.com/turbolinks/turbolinks , y probé jugar con diferentes turbolinks:before-cache y otras funciones, y aún así, nada funciona.

¿Hay algo que este olvidando? Si alguien pudiera ayudar, estaría muy agradecido.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!