ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
ThaiSEOBoard.comพัฒนาเว็บไซต์CMS & Free Scriptลองใช้ Bootstrap มีปัญหากับ Javascript ครับ
« หน้าที่แล้ว ต่อไป »
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: ลองใช้ Bootstrap มีปัญหากับ Javascript ครับ  (อ่าน 2437 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
ความว่างเปล่า
ก๊วนเสียว
*

พลังน้ำใจ: 29
ออฟไลน์ ออฟไลน์

กระทู้: 440



ดูรายละเอียด เว็บไซต์
« เมื่อ: 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>

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

 Lips Sealed

โค๊ด:
<!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
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 196
ออฟไลน์ ออฟไลน์

กระทู้: 1,307



ดูรายละเอียด
« ตอบ #1 เมื่อ: 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>
« แก้ไขครั้งสุดท้าย: 29 มีนาคม 2014, 16:11:22 โดย max30012540 » บันทึกการเข้า
Synchronize
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 83
ออฟไลน์ ออฟไลน์

กระทู้: 1,231



ดูรายละเอียด
« ตอบ #2 เมื่อ: 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
« แก้ไขครั้งสุดท้าย: 29 มีนาคม 2014, 16:24:15 โดย Synchronize » บันทึกการเข้า
เนื้อหาความรู้น่าสนใจ ใหม่ๆ
เทคนิคการแก้ไขปัญหาจากการ float ซ้อน float แล้ว clear

ทำเว็บได้ด้วยตัวเองฟรี ด้วยระบบเว็บสำเร็จรูป unbbz , เว็บธรรมดา , เว็บบอร์ด , เว็บขายของ ทำได้หมดเลย
ความว่างเปล่า
ก๊วนเสียว
*

พลังน้ำใจ: 29
ออฟไลน์ ออฟไลน์

กระทู้: 440



ดูรายละเอียด เว็บไซต์
« ตอบ #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]   ขึ้นบน
พิมพ์
« หน้าที่แล้ว ต่อไป »
กระโดดไป: