ลองใช้ Bootstrap มีปัญหากับ Javascript ครับ

เริ่มโดย ความว่างเปล่า, 29 มีนาคม 2014, 15:33:30

หัวข้อก่อนหน้า - หัวข้อถัดไป

0 สมาชิก และ 1 ผู้มาเยือน กำลังดูหัวข้อนี้

พิมพ์
ลง หน้า1
การกระทำของผู้ใช้

ความว่างเปล่า

29 มีนาคม 2014, 15:33:30
กำลังงมกับ bootstrap แต่เกิดปัญหาคือผมลองโค้ดที่เว็บให้มา
คือ

อ้างถึงhttp://getbootstrap.com/javascript/#buttons

โค้ด เลือก
<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
  Loading state
</button>
<script>
  $('#loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
    $.ajax(...).always(function () {
      btn.button('reset')
    });
  });
</script>

ผมลองเรียกจาวาแล้วด้วยครับ แต่ไม่รู้ทำไมมันไม่ขึ้นตามตัวอย่าง คือกดไปก็ไม่เกิดอะไร
หรือต้องเพิ่มส่วนไหนเข้าไปครับ อันนี้ที่เขียนรันๆดู

:-X

โค้ด เลือก
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<head>
<title>demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/jquery-1.11.0.min.js"></script>
</head>
  <body>
   <button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
  Loading state
</button>
<script>
  $('#loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
    $.ajax(...).always(function () {
      btn.button('reset')
    });
  });
</script>
      <footer>
        <p>&copy; Company 2014</p>
      </footer>
    </div>

  </body>
</html>

ขอบคุณครับ  :wanwan017:
ขายเว็บไซต์ อินดี้ไทย.com PM ครับ
- รับดูแลเว็บไซต์,แฟนเพจ
- รับทำภาพคำคมต่างๆ
- รีวิว App Android

max30012540

#1
29 มีนาคม 2014, 16:10:19 แก้ไขล่าสุด: 29 มีนาคม 2014, 16:11:22 โดย max30012540
อ้างถึงผมลองเรียกจาวาแล้วด้วยครับ แต่ไม่รู้ทำไมมันไม่ขึ้นตามตัวอย่าง คือกดไปก็ไม่เกิดอะไร
หรือต้องเพิ่มส่วนไหนเข้าไปครับ อันนี้ที่เขียนรันๆดู
จาวา -> จาวาสคริป
จาวา และจาวาสคริป คนละภาษากันเลยครับ
ถ้าใช้โครม กด F12 ดีบัคโค้ดให้เป็นครับ อ่านไม่ยากครับ จะบอกบรรทัด และคำสั่ง รายละเอียดที่ Error ครับ
อีกอย่างคือไม่มีความจำเป็นที่จะนำ tag <script> ไปไว้ที่อื่น แนะนำให้เอาไปไว้ส่วน tag <head> เท่านั้นครับ แล้วใช้
โค้ด เลือก

$(function(){
....
});
กรณีไม่ใช้ฟังก์ชั่น หรือใช้
โค้ด เลือก

$(document).ready(function(e) {
...
});

กรณีใช้ฟังก์ชั่น นำไปครอบโค้ดไว้ครับ หรือกรณีไม่ใช้ jQuery ให้ใช้
โค้ด เลือก

(function(){
....
});

ครับ

ส่วนปัญหาของคุณเกิดจากการเอาไฟล์ bootstrap.min.js ไปไว้ก่อนไฟล์ jquery-1.11.0.min.js ครับ เนื่องจากไฟล์ bootstrap.min.js เป็นปลักอินของ jQuery ต้องอ้างอิงฟังก์ชั่นใน jquery-1.11.0.min.js ด้วย เมื่อนำไปไว้ก่อนหน้า ทำให้มันหาฟังก์ชั่นไม่เจอ แล้วคลาย Error ออกมาครับ
โค้ด เลือก

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<head>
<title>demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/jquery-1.11.0.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(e) {
  $('#loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
    //$.ajax(...).always(function () {
      setTimeout(function(){ btn.button('reset'); }, 2000);
    //});
  });
});
</script>
</head>
  <body>
   <button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
  Loading state
</button>
      <footer>
        <p>&copy; Company 2014</p>
      </footer>
    </div>

  </body>
</html>

Synchronize

#2
29 มีนาคม 2014, 16:23:56 แก้ไขล่าสุด: 29 มีนาคม 2014, 16:24:15 โดย Synchronize
จริงๆ พวก script ต่างๆ เอาไว้ ท้าย สุด ก่อนปิด body จะดีกว่านะครับ

จัดโค้ดแบบนี้แทน

โค้ด เลือก
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<head>
<title>demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
 <body>
  <button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
 Loading state
</button>
     <footer>
       <p>&copy; Company 2014</p>
     </footer>
   </div>

<script src="bootstrap/js/jquery-1.11.0.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(e) {
 $('#loading-example-btn').click(function () {
   var btn = $(this)
   btn.button('loading')
   //$.ajax(...).always(function () {
     setTimeout(function(){ btn.button('reset'); }, 2000);
   //});
 });
});
</script>

 </body>
</html>

:wanwan017:
เนื้อหาความรู้น่าสนใจ ใหม่ๆ
[direct=https://develop.un-no.com/w3/docs/clear-float-in-div]เทคนิคการแก้ไขปัญหาจากการ float ซ้อน float แล้ว clear[/direct]

[direct=https://service.un-no.com/unbbz]ทำเว็บได้ด้วยตัวเองฟรี ด้วยระบบเว็บสำเร็จรูป unbbz , เว็บธรรมดา , เว็บบอร์ด , เว็บขายของ ทำได้หมดเลย[/direct]

ความว่างเปล่า

#3
29 มีนาคม 2014, 16:51:27
อ้างถึงจาก: max30012540 ใน 29 มีนาคม 2014, 16:10:19
อ้างถึงผมลองเรียกจาวาแล้วด้วยครับ แต่ไม่รู้ทำไมมันไม่ขึ้นตามตัวอย่าง คือกดไปก็ไม่เกิดอะไร
หรือต้องเพิ่มส่วนไหนเข้าไปครับ อันนี้ที่เขียนรันๆดู
จาวา -> จาวาสคริป
จาวา และจาวาสคริป คนละภาษากันเลยครับ
ถ้าใช้โครม กด F12 ดีบัคโค้ดให้เป็นครับ อ่านไม่ยากครับ จะบอกบรรทัด และคำสั่ง รายละเอียดที่ Error ครับ
อีกอย่างคือไม่มีความจำเป็นที่จะนำ tag <script> ไปไว้ที่อื่น แนะนำให้เอาไปไว้ส่วน tag <head> เท่านั้นครับ แล้วใช้
โค้ด เลือก

$(function(){
....
});
กรณีไม่ใช้ฟังก์ชั่น หรือใช้
โค้ด เลือก

$(document).ready(function(e) {
...
});

กรณีใช้ฟังก์ชั่น นำไปครอบโค้ดไว้ครับ หรือกรณีไม่ใช้ jQuery ให้ใช้
โค้ด เลือก

(function(){
....
});

ครับ

ส่วนปัญหาของคุณเกิดจากการเอาไฟล์ bootstrap.min.js ไปไว้ก่อนไฟล์ jquery-1.11.0.min.js ครับ เนื่องจากไฟล์ bootstrap.min.js เป็นปลักอินของ jQuery ต้องอ้างอิงฟังก์ชั่นใน jquery-1.11.0.min.js ด้วย เมื่อนำไปไว้ก่อนหน้า ทำให้มันหาฟังก์ชั่นไม่เจอ แล้วคลาย Error ออกมาครับ
โค้ด เลือก

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<head>
<title>demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/jquery-1.11.0.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(e) {
  $('#loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
    //$.ajax(...).always(function () {
      setTimeout(function(){ btn.button('reset'); }, 2000);
    //});
  });
});
</script>
</head>
  <body>
   <button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
  Loading state
</button>
      <footer>
        <p>&copy; Company 2014</p>
      </footer>
    </div>

  </body>
</html>


พิมพ์ตกไปหน่อย จาวาสคริปครับ  :wanwan004:

แต่ว่าผมสงสัยคือโค้ดของ bootstrap ที่เอามาให้อยู่แล้วคือต้องนำไปแก้ไขอีกทีใช่รึเปล่าครับ
เพราะดูจากโค้ดของท่านแล้วเหมือนต้องแก้เขียนเองใหม่

:wanwan017:

อ้างถึงจาก: Synchronize ใน 29 มีนาคม 2014, 16:23:56
จริงๆ พวก script ต่างๆ เอาไว้ ท้าย สุด ก่อนปิด body จะดีกว่านะครับ

จัดโค้ดแบบนี้แทน

โค้ด เลือก
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<head>
<title>demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
  <body>
   <button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
  Loading state
</button>
      <footer>
        <p>&copy; Company 2014</p>
      </footer>
    </div>

<script src="bootstrap/js/jquery-1.11.0.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(e) {
  $('#loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
    //$.ajax(...).always(function () {
      setTimeout(function(){ btn.button('reset'); }, 2000);
    //});
  });
});
</script>

  </body>
</html>

:wanwan017:

ขอบคุณมากครับ  :wanwan017:
ขายเว็บไซต์ อินดี้ไทย.com PM ครับ
- รับดูแลเว็บไซต์,แฟนเพจ
- รับทำภาพคำคมต่างๆ
- รีวิว App Android
พิมพ์
ขึ้น หน้า1
การกระทำของผู้ใช้