Stuff I'm Up To

Technical Ramblings

Bootstrap-Vue — March 15, 2018

Bootstrap-Vue

Using Vue.js and building Bootstrap style pages just got easier.

https://bootstrap-vue.js.org/

Advertisements
bootstrap-tagsinput — February 12, 2018

bootstrap-tagsinput

I’ve got a work project that fills in a database field with multiple comma separated values and thought using the bootstrap-tagsinput script would fit very well. Only I managed to misinterpret the instructions and made a bit of a hole to dig myself out of.

The big mistake I made was to add a data-role="tagsinput" attribute to my HTML. This was a bad mistake because I then tried to configure it using JavaScript – setting the tagClass and typeahead options. It worked, but nothing like I was expecting. I couldn’t reference it by it’s id selector using $('#selector') in the script and ended up using $('.boostrap-tagsinput > input') Which can’t be right.

Continue reading

Bootstrap Tags Input and Typeahead — February 8, 2018
jQuery in Node.js — November 30, 2016

jQuery in Node.js

Using jQuery in Node.js gave me something to think about. Especially as there seems to be so many ways to do it.

If you’re using it in a renderer you can pretty much use it like you would in a plain old html page and use a script src. A couple of things I tried cause bootstrap to start complaining about jQuery not being defined. I eventually decided on this approach to get things working together.

In your html head you’ll need to include the css. You could get creative with Gulp and sass if you really want, but I’m just going for out of the box.

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">    

Then in your script tags:

    <!-- Insert this line above script imports  -->

        if (typeof module === 'object') {
            window.module = module;
            module = undefined;
        }



        global.jQuery = require('jquery/dist/jquery.min.js');
        global.$ = jQuery;
        var jQueryUI = require('jqueryui');
        var jQueryMousewheel = require('jquery-mousewheel/jquery.mousewheel.js')($); // jQuery plugin handling
        var bootstrap = require('bootstrap');
        var tinysort = require('tinysort/dist/tinysort.js').tinysort;

    <!-- Insert this line after script imports -->

        if (window.module) module = window.module;

Notice the special handling ($) on the jQueryMousewheel plugin and the .tinysort to make these work as the should.

Bootstrap — September 18, 2016