All geek questions in one place

Twitter Bootstrap and selected jQuery plugin not working

I am using Twitter Bootstrap + Chosen.

I call Chosen to select, but it doesn’t work (for example, it uses Twitter’s Bootstrap download style) until you click on the link on the page that grabs another page (order form) via Ajax and displays it through Fancybox; this page also uses the selected one. After clicking the "Select" button is applied to the correct selection.

The chapters of the page sections look the same; JQuery starts first, other plugins for jQuery (user interface for sliders) work fine. The path to the Chosen One is correct. Removing Bootstrap for verification did not help (it just showed that it was not committed until the order page was grabbed.

+4
source share
2 answers

I use Twitter Bootstrap and Chosen beautiful drop down from long time. I never run into such problems. You could insert the selected CSS before loading the CSS or missing / overwrite the styles. Here is the full working code ...

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

And here is the image of the attachment / screenshot (as is)

Twitter Bootstrap + Chosen jQuery Plugin

Hope this helps. Thanks!!

+7
source

Did you call $('select').Chosen() when the document is ready?

 $(document).ready(function,{ $('select').Chosen(); });
0
source

Source: https://habr.com/ru/post/1435622/

More articles:


All Articles