Twitter Bootstrap an Custom Java Script and questions.

S

SBSP

Senior Member
Joined
Sep 7, 2007
Messages
667
Reaction score
16
Hi I want to do something basic but i cant seem to figure it out. :mad:

I want to be able to select multiple options from a
HTML: 
<select> <option> </option> </select>
box.

For example sake, the page is called index.php
I have bootstrap installed in folders js, css and less in / of the web server.
all of the bootstrap css and java scripts are correctly loaded and is working just fine when calling the classes with in html tags.

Now i want to follow this tutorial
http://silviomoreto.github.io/bootstrap-select/

I downloaded the CSS and Java js files an placed them into the folders mentioned earlier on js and css which is in the root.

I have also made sure i mentioned
PHP: 
<script src="js/bootstrap-select.js"></script>
above the
PHP: 
</body>
tag
and
PHP: 
	<link href="css/bootstrap-select.css" rel="stylesheet">
	<link href="css/bootstrap-select.min.css" rel="stylesheet">
in-between the
PHP: 
<head> ... </head>
tags.

The following then semi works.
PHP: 
     <select class="selectpicker" multiple>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
    </select>

however even though it gets formatted with the usual bootstrap "css theme" when i click it, it wont give a dropdown.

I often struggle to get the custom stuff to work cus i dont know how to implement certain things

I.E The tutorial is saying, Enable Bootstrap-Select via JavaScript:
PHP: 
  $('.selectpicker').selectpicker();

Options can be passed via data attributes or JavaScript.
PHP: 
     $('.selectpicker').selectpicker({
    style: 'btn-info',
    size: 4
    });

But where do i put this piece of code ? in-between
PHP: 
<script> </script>
??? Is all of this stuff not included in the bootstrap-select.js file that i'm linking to above the </body> tag???
 
inside a jquery ready?

PHP: 
$( document ).ready(function() {
    $('.selectpicker').selectpicker();  
});
 
It's good that you've noted to include the javascript before the closing body tag and not before closing the head tag.

One thing that i can think of here is that you have not mentioned including jQuery. You must include this for bootstrap to work.

Before the closing body tag you should have:

PHP: 
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.js"></script>
<script>
$( document ).ready(function() {
    $('.selectpicker').selectpicker();  
});
</script>
</body>

Or simply:

PHP: 
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.js"></script>
<script src="js/website-js.js"></script>
</body>

Then inside of website-js.js ensure that you have:

PHP: 
$( document ).ready(function() {
    $('.selectpicker').selectpicker();  
});

I would also load the page source and click on the js files that you are including to ensure that there is no 404.
 
Last edited:
Thanks Compulutions it was because of the Jquery , I never loaded it :-)

Thanks for the help!

Is it not "Bad" practice to load .js files from an online source?, What if the owner one day decides to delete the files, then everything basically crashes ?
 
It's more of a bad practice to version control 3rd party libraries.

Bower/npm/maven > cdn > committed local library
 
SBSP said:
Is it not "Bad" practice to load .js files from an online source?
Click to expand...

If it is considered bad practice then maybe this applies to certain instances. There are also certain instances where making use of them would actually be advantageous in comparison to a local library.

It really just boils down to common sense and what is going to best suit you and your specific requirements. I think that it would be best to avoid using a CDN for not so popular libraries as you would indeed run into issues with long term support.

I would also suggest you look at the options that Kabal has provided as he is indeed correct. There are instances however where you might not want to use npm, or even a cdn and then opt to host it locally.

It really just depends on your requirements and then on various other technicalities, for instance: what technologies are you using (simple php toy / stacked node beast?), what you are doing with the site (is it a bank?), how much traffic do you get (millions of users?), where the traffic is coming from (all over the world?), where you are hosted at (various locations across the globe?), etc.
 
Last edited:
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X