พิมพ์หน้านี้ - ลองใช้ Bootstrap มีปัญหากับ Javascript ครับ

หัวข้อ: ลองใช้ Bootstrap มีปัญหากับ Javascript ครับ
เริ่มหัวข้อโดย: ความว่างเปล่า ที่ 29 มีนาคม 2014, 15:33:30

กำลังงมกับ bootstrap แต่เกิดปัญหาคือผมลองโค้ดที่เว็บให้มา
คือ

อ้างถึง

[url]http://getbootstrap.com/javascript/#buttons[/url]

โค๊ด:

<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:

หัวข้อ: Re: ลองใช้ Bootstrap มีปัญหากับ Javascript ครับ
เริ่มหัวข้อโดย: 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>

หัวข้อ: Re: ลองใช้ Bootstrap มีปัญหากับ Javascript ครับ
เริ่มหัวข้อโดย: 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:

หัวข้อ: Re: ลองใช้ Bootstrap มีปัญหากับ Javascript ครับ
เริ่มหัวข้อโดย: ความว่างเปล่า ที่ 29 มีนาคม 2014, 16:51:27

อ้างจาก: max30012540 ที่ 29 มีนาคม 2014, 16:10:19

อ้างถึง

โค๊ด:

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

กรณีไม่ใช้ฟังก์ชั่น หรือใช้

โค๊ด:

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

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

โค๊ด:

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

โค๊ด:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url] ">
<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

โค๊ด:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url] ">
<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:

SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com

ThaiSEOBoard.com

พัฒนาเว็บไซต์ => CMS & Free Script => ข้อความที่เริ่มโดย: ความว่างเปล่า ที่ 29 มีนาคม 2014, 15:33:30