Question

127

Bootstrap Form Helpers - State Picker - Select Class

rated 0 times [ 130] [ 3] / answers: 1 / hits: 7196 / 11 Years ago, thu, december 5, 2013, 12:00:00

I'm trying to integrate the Forum Helpers into my Bootstrap application but am having some problems getting anything with the <select></select> to work. I've included all of the .js files, and the date picker / slider work perfectly but they are just <div></div> layers.

Here is a link to their documentation:
Bootstrap Form Helpers

Do I need to include the individual -states, -countries, etc.. .js files in order for this to work? All I'm trying to use is...

<select class=form-control bfh-states data-country=US data-state=CA></select>

... to call in the select but nothing is being populated in it.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jocelynkarsynr

Add To Favorites

Follow

Total Points: 472

Total Questions: 98

Total Answers: 96

Location: Macau

Member since Mon, Nov 16, 2020

4 Years ago

jocelynkarsynr questions

1 file upload using axios in react

Tue, Feb 8, 22, 00:00, 2 Years ago

1 Unable to write data (addRow) into Excel file in Nodejs

Sat, Jul 11, 20, 00:00, 4 Years ago

1 How can I export * as namespace in Babel?

Sun, May 10, 20, 00:00, 4 Years ago

1 React Routing to Same Component with Different URL

Sat, Jan 18, 20, 00:00, 4 Years ago

1 How do I persist user authentication using the Firebase refresh token?

Tue, Aug 20, 19, 00:00, 5 Years ago

View All

answered 11 Years ago adrienkeithr · Accepted Answer

I looked into the issue and it turns out not only do you need to include some form of Bootstrap's JS (your bootstrap.js is fine), you also need to include bootstrap-formhelpers.js along with bootstrap-formhelpers-states.js. There is also some CSS included, as well.

I have it all working in a fiddle below :
http://jsfiddle.net/k7Zjd/4/

You'll notice example 1 is different, however - it seems that formhelpers was made in mind for 2.3.0; without manually starting it up with .bfhstates({country:'US',state:'CA'}); it never loaded for me - it also seems like formhelpers forces every instance of .bfhstates to be null if you attempt, for example, $('.bfhstates');

HTML - bfh-select-fix is just a class I used to target the select element - bfh-states will return null and we don't want to trigger every form-control. (.form-control.bfh-states also returns null, etc.)

<select class=form-control bfh-select-fix bfh-states></select>

JS - Initializes the state selector the manual way.

$('.bfh-select-fix').bfhstates({country:'US', blank:false});

Edit - I don't mean to assume you're using Bootstrap 3 - my fiddle is, however, it shouldn't make a difference. I could look into it further as to why example 1 doesn't appear to work, though.