Twitter Bootstrap и плагин Chosen jQuery не работают

Я использую Twitter Bootstrap + Chosen.

Я вызываю Chosen для выбора, но он не работает (например, он использует стиль Twitter Bootstrap), пока вы не нажмете ссылку на странице, которая захватывает другую страницу (форму заказа) через Ajax и отображает ее через Фэнсибокс; эта страница также использует Chosen. После щелчка по нему Chosen правильно применяется к выбору.

Заголовки страниц выглядят одинаково; Сначала вызывается jQuery, другие плагины для jQuery (UI для слайдеров) работают нормально. Путь к Избранному правильный. Удаление Bootstrap для тестирования не помогло (он просто показывался без стиля, пока не была захвачена страница заказа.


forms jquery twitter-bootstrap jquery-chosen
person pikelet    schedule 22.09.2012    source источник
comment
Это только стиль, или он не работает? Вы включили css?   -  person Sherbrow    schedule 22.09.2012

Ответы (2)


arrow_upward
7
arrow_downward

Я использую Twitter Bootstrap и выбрал красивое выпадающее меню за долгое время. Я никогда не сталкиваюсь с такими проблемами. Вы можете вставить выбранный CSS перед загрузкой CSS или отсутствующими/перезаписываемыми стилями. Вот полный рабочий код...

<!DOCTYPE html>
<html lang="en">
    <head>

        <meta charset="utf-8" />

        <!-- scale the devices -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- include bootstrap css files -->
        <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.css" />
        <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap-responsive.css" />

        <title>Twitter Bootstrap + Choosen</title>

        <!--[if lt IE 9]>
            <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->        

        <!-- includ jquery and bootstrap script -->
        <script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="/bootstrap/js/bootstrap.js"></script>

        <!-- choosen -->
        <link rel="stylesheet" type="text/css" href="/chosen/chosen.css" />
        <script type="text/javascript" src="/chosen/chosen.jquery.min.js"></script>

        <script type="text/javascript">
        $(document).ready( function() { 
            // chosen select
            $("form select").chosen({no_results_text: "No results matched"});
        });
        </script>
    </head>

    <body>
        <!-- container -->
        <div class="container">

            <!-- content -->
            <div class="row">
                <div class="span12">
                    <!-- user form -->
                    <form method="post" action="" class="form-horizontal">
                        <div class="control-group">
                            <label for="group_id" class="control-label">User Group : </label>
                            <div class="controls">
                                <select name="group_id" id="group_id" class="input-xlarge">
                                    <option value="">select...</option>
                                    <option value="1">Administrator</option>
                                    <option value="3"selected="selected">Users</option>
                                    <option value="4">Random</option>
                                    <option value="5">Super New</option>
                                    <option value="6">Famous</option>
                                </select>
                            </div>
                        </div>
                    </form>
                    <!-- // end form -->
                </div>
            </div>
            <!-- // end content -->

        </div>
        <!-- // end container -->
    </body>
</html>

А вот и прикрепленное изображение/скриншот (как есть)

Twitter Bootstrap + выбранный плагин jQuery

Надеюсь это поможет. Спасибо!!

person Madan Sapkota    schedule 20.02.2013

arrow_upward
0
arrow_downward

Вы позвонили $('select').Chosen(), когда документ был готов?

$(document).ready(function,{

     $('select').Chosen();

});
person CR41G14    schedule 22.09.2012