Javascript hữu ích

JavaScript là một ngôn ngữ lập trình của HTML và WEB. Nó là nhẹ và được sử dụng phổ biến nhất như là một phần của các trang web, mà sự thi hành của chúng cho phép Client-Side script tương tác với người sử dụng và tạo các trang web động. Nó là một ngôn ngữ chương trình thông dịch với các khả năng hướng đối tượng.

Continue reading Javascript hữu ích

Remove Duplicates from JavaScript Array

Khi làm việc với mảng, chúng ta thường hay gặp vấn đề trùng dữ liệu, và không muốn chúng hiển thị ra bên ngoài. Khi đó phát sinh nhu cầu làm sao lọc lại dữ liệu đó, bỏ qua những dữ liệu bị trùng. Hướng dẫn sau đây sẽ giúp chúng ta thực hiện việc đó dễ dàng
Continue reading Remove Duplicates from JavaScript Array

Javascript Popup Window to return value to Parent Window

Chào các bạn.
Khi lập trình, hay thiết kế web chúng ta có nhu cầu lấy dữ liệu từ một trang thứ 2 mà không muốn load lại trang chính. Chúng ta có thể dùng popup windows. Ví dụ như chọn một sản phẩm từ danh sách sản phẩm, chọn một nhân viên từ danh sách…. Tất nhiên cũng ta vẫn còn có nhiều cách khác nhau.

Javascript Popup Window to return value to parent window
Javascript Popup Window to return value to parent window

Hướng dẫn sau cho phép bạn tạo một trang popup và lấy dữ liệu đưa vào form của chúng ta. Đây chỉ là code HTML và Javascript, vậy nên bạn có thể áp dụng bất cứ chỗ nào bạn muốn (PHP, ASP.NET, MVC….).

Chúng ta cần 2 file. 1 file chứa form (parent) và 1 file chứa dữ liệu chúng ta muốn lấy (child).

Code trang parent.html

<body>
    <div class="container">
        <h3>Javascript Popup Window to return value to parent Window</h3>
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    Họ tên:&nbsp;
                </td>

                <td>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Chọn nhân viên..." id="txtName">
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="button" onclick="SelectName()">Chọn...</button>
                        </span>
                    </div><!-- /input-group -->
                </td>
            </tr>
        </table>
        <br />
        <p>            
            <a href="http://tuanitpro.comjavascript-popup-window-to-return-value-to-parent-window">Hướng dẫn lấy dữ liệu từ Popup Javascript.</a>
        </p>
        <script type="text/javascript">
            var popup;
            function SelectName() {
                popup = window.open("/Home/Popup", "Popup", "width=400,height=300"); // Thay dường dẫn file bạn muốn mở
                popup.focus();
            }
        </script>
    </div>

Code file child.html

<body>
    <div>
        <h3>Danh sách nhân viên</h3>
        Click vào tên nhân viên để chọn
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td><a href="#" onclick="return SetName('Ngọc Trinh');">Ngọc Trinh</a></td>
                    <td>Otto</td>
                    <td>mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td><a href="#" onclick="return SetName('Phương Trinh');">Phương Trinh</a></td>
                    <td>Thornton</td>
                    <td>fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td><a href="#" onclick="return SetName('Lệ Rơi');">Lệ Rơi</a></td>
                    <td>the Bird</td>
                    <td>twitter</td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td><a href="#" onclick="return SetName('Bà Tưng');">Bà Tưng</a></td>
                    <td>the Bird</td>
                    <td>twitter</td>
                </tr>
                <tr>
                    <th scope="row">5</th>
                    <td><a href="#" onclick="return SetName('Kenny Sang');">Kenny Sang</a></td>
                    <td>the Bird</td>
                    <td>twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script type="text/javascript">
        function SetName(value) {
            if (window.opener != null && !window.opener.closed) {
                var txtName = window.opener.document.getElementById("txtName"); // ID này là của parent form
                txtName.value = value;
            }
            window.close();
        }
    </script>
</body>

Chúc các bạn thành công.