Trong quá trình làm việc với Jquery dialog có lần mình đã gặp trường hợp khi hiển thị dialog box thì thiếu mất icon close
jquery-dialog-box-error

Sau khi debug thì mình thấy code của mình sau khi generated bởi jquery khác với demo trên trang chủ

Code của mình

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><spanid="ui-id-2" class="ui-dialog-title">Title
<button class="ui-dialog-titlebar-close"></button></div>

Code trên trang chủ jquery

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-id-1" class="ui-dialog-title">Basic dialog</span>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" title="close">

<span class="ui-button-text">close</span>
</button></div>

Lỗi này là do bạn đã sử dụng thư viện jquery-ui trước thư viện boostrap
Nguyên văn “The reason this is happening, is because you are calling bootstrap in, after you are calling jquery-ui in”

Biết được nguyên nhân rồi thì xử lý thật dễ dàng đúng không?

Bạn có thể khắc phục lỗi này (và đỡ tốn thời gian stackoverflow giống mình) bằng cách:

Từ đoạn code

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>

Bạn chuyển thành

<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Kết quả
jquery-dialog-box-ok

Happy coding.

1. Ví dụ về Object (đối tượng) trong javascript
var info = {
   full_name: "thao trinh minh",
   links: [
      {blog: "http://www.thaotrinh.info"},
      {websites: "sachdidong.com"}
   ]
};

Như vậy:
– Đối tượng trong javascript bắt đầu bằng cặp {}
– 1 đối tượng là “động”

2. Gọi hàm như 1 phương thức của đối tượng

Xét ví dụ với đoạn mã sau

var calc = {
   status: 'Xin chào',
   plus: function (a,b) {
      return (
         console.log(this),
         console.log(a+b),
         console.log(arguments),
         console.log(this.status)
      )
   }
};

Trong đó object calc chứa
– 1 thuộc tính là status có giá trị là xin chào
– 1 hàm plus với 2 tham số (a, b)

Gọi hàm plus bằng cách thêm đoạn mã

var calc = {
   status: 'Xin chào',
   plus: function (a,b) {
      return (
         console.log(this),
         console.log(a+b),
         console.log(arguments),
         console.log(this.status)
      )
   }
};
calc.plus(2,2);

Trong ví dụ trên ta gọi hàm plus như gọi một phương thức của 1 object.

Kết quả thu được khi chạy ví dụ

funciton_as_object

Các bạn có thể tải ví dụ mẫu tại đây