ลำดับการเรียกใช้งาน Script
Uncaught TypeError: $(…).collapse is not a function(…)
นี่เป็น Error ตัวอย่างจากโปรเจ็คที่เคยผ่านมือมา เกิดอะไรขึ้น!? ทำไมแค่ คำสั่งง่ายๆ อย่าง .collapse() ถึงไม่ทำงาน
ขั้นแรก เรามานั่งคิดดูว่า เราใช้งาน Bootstrap ร่วมกับ JavaScript ดังนั้นอาจจะต้องมีอะไรผิดพลาดหรือเปล่า เราลืมดึง script ของ JavaScript หรือเปล่า? เราลืมดึง Bootstrap มาใช้หรือเปล่า? คำตอบคือ “ไม่” อ้าว… ถ้างั้นเป็นเพราะอะไรล่ะ เราจึงได้นั่งเช็คโค้ดที่เราใช้ดึง script มา ปรากฏว่า! script ของ Bootstrap ถูกโหลดมาก่อน jquery.min.js นี่แหละ ตัวปัญหาของเรา
จากที่ลองไล่ดูตัวโค้ดของเรานั้น เรามีการโหลด script ของ jquery.js ตามเวอร์ชั่นที่จะใช้ ตามด้วยตัว script ของ bootstrap และ jquery.min.js การเรียงลำดับของ script แบบนี้ทำให้เกิดโค้ด error ขึ้น
โดยปกติแล้วโค้ดจะรันจากด้านบนลงล่าง เมื่อผ่านการโหลด script ของ bootstrap แล้ว จึงโหลด jquery.min.js ซึ่งอาจจะมีโค้ดบางส่วนทับกันหรือทำงานไม่ถูกต้อง ทำให้ไม่สามารถเรียกใช้ฟังก์ชันได้วิธีแก้คือแค่ย้าย jquery.min.js ไปไว้ข้างบนเพื่อให้โหลดก่อน เท่านี้ก็จะใช้งานฟังก์ชันที่ต้องการได้แล้ว
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>หวังว่าบทความนี้จะเป็นประโยชน์กับทุกๆคนไม่มากก็น้อย แล้วเจอกันใหม่ในบทความหน้าจ้า :)
