Bootstrap validation and Bootstrap select - javascript

Two really good bits of UI for Bootstrap 3.
Firstly, to validate field forms, the validation found here - http://bootstrapvalidator.com/
Secondly, the default style of the select element isn't great, I've used various methods in the past to style the select, however, usually come across browser render issues - this plugin works great with bootstrap - http://silviomoreto.github.io/bootstrap-select/
So I was quite happy with the above... until I tried using them together. The validation won't work (green tick fails to appear) when using the selectpicker to style the select.
Can these work in sync, if so, how!?

Have you had a look at the documentation for the Bootstrap validator? It mentions the Bootstrap Select plugin:
http://formvalidation.io/examples/bootstrap-select/
It seems to suggest they work together. If you're still having problems, it might be worth posting your code or a Bootply.
Edit: Sorry, I've just realised how old this post is (I found it on the newest questions bit, so didn't check), so I imagine it wasn't in the documentation then! I'll leave my answer anyway, just in case anyone stumbles across it asking the same question.

Related

Range-slider control

There is a good kind of a range-slider control http://makescreen.ru/i/50c4af7ae3a9058a7f551d398ccecf.jpg
I'd like to use something similar for my project. But I didn't find anything. It would be better if this control exists for twitter bootstrap. If it doesn't, anything similar would be ok.
Your ideas?
I know this question is a couple of months old and already has an accepted answer, but I just came across this as well:
http://www.eyecon.ro/bootstrap-slider/
and it seems relevant to the discussion.
I recommend using jQuery UI (linked version specifically for twitter bootstrap) - they have everything you could ever need for javascript UI elements.

Custom jQuery UI

I wanted to use some functionality in jQuery-UI. So, I downloaded a custom version of the same from jQuery website, including only those things in my download that were needed by me. This was supposed to trim down the total size of my page, but to my surprise, the page size remained almost the same even after following the procedure provided at jQuery website.
Did I do something wrong? Or is this the expected behaviour?
You should have a look at JQuery UI Packager, it lets you pick what functionality you want.
It bundles it up with both a custom and a minified JQuery.
When I tried it, I removed everything but core functionality, and it ended up 15kb uncompressed.
Then I tried it without removing anything, it ended up 206kb uncompressed.
If you're that concerned you should think about gzipping.
Look at this chart of filesizes and how they improve with the different methods.
Here's a post about a guy asking a similar question, and the answer explains what you should focus on.
Here's a discussion about gzip and minify.

Cant get Bootstrap modal.js to work

EDIT: Keep in mind this answer was asked before Bootstrap 2 came out and therefore is relative to the first release
I am trying to dynamically add and show Bootstrap modal windows with AJAX content, but after looking at the documentation for a good hour and a half I dont understand what classes or attributes I need to add to my modal div so they work with the modal API.
Right now I have something like this:
var $modalWindow = $('<div />', {
class: 'modal fade static',
style: "display: none;",
text: "Test"
});
$('body').append($modalWindow);
$modalWindow.modal('show');
And it doesnt work... Maybe I am being dense, but I cannot find any info on the docs about how to setup my modal window before calling the show method.
Edit: Fixed it, apparently bootstrap-modal.js requires bootstrap-tipsy.js and bootstrap-popover.js, although it is not mentioned anywhere in the documentation. Seriously, Bootstrap has the worst documentation, specially considering how popular it is.
Fixed it, apparently bootstrap-modal.js requires bootstrap-tipsy.js and bootstrap-popover.js, although it is not mentioned anywhere in the documentation. Seriously, Bootstrap has the worst documentation, specially considering how popular it is.
EDIT: Before downvoting this answer, consider this was before bootstrap 2, and as another commenter said he had the exact same issue and also solved it by adding tipsy and popover.
Boostrap 2 is way better than its first incarnation, BTW

Drupal dynamic field type toggle

I have a form field in Drupal which I need some help with.
The requirement is to have the field show up as a simple input field, but to have a toggle button against it which would convert it into a multi-line text box for users who wish to enter more data.
In traditional PHP/HTML/Javascript this would be dead easy -- two fields; one styled with visibility:hidden; and a short js function on a button to toggle the visibility style of the two fields.
But I can't see how to translate this concept into the Drupal forms API. Can anyone help?
I'm experienced with PHP but an absolute beginner with Drupal, by the way. I'm still feeling my way around it, so please bear with me if I've asked something really obvious.
I solved this one myself. Now that I know Drupal a bit better, it's actually pretty simple (I can see why no-one bothered to answer). In the end I was able to use a pretty similar technique to the traditional methods I mentioned in the question.

How does StackOverflow's 'tags' textbox autocomplete work?

I know they're using a jQuery plugin, but I can't seem to find which one they used. In particular, what I'm looking for is autocomplete with exactly the same functionality as SO's autocomplete, where it will perform an AJAX command with each new word typed in and allow you to select one from a dropdown.
Note that the tag editor has been completely re-written now, and no longer resembles the original, simple text box w/ suggestion drop-down that adorned the site for nearly three years.
If you're interested in the new form, see this Meta question: https://meta.stackexchange.com/questions/102510/can-i-use-the-tag-textbox-script
Autocomplete is the plugin used originally, albeit with various tweaks and customizations made to it over the years.
You might also like this one:
http://code.google.com/p/jquery-autocomplete/
Read the history here: http://code.google.com/p/jquery-autocomplete/wiki/History
Have a look at SO_Tag, a tagging system based on StackOverflows tagging system.
And Github.

Categories