Stuff I'm Up To

Technical Ramblings

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.

Slick.js – another carousel — November 29, 2016
Owl Carousel v2 —
DataTables JQuery Plugin — November 11, 2016
PushState, PJAX — November 8, 2016
Bootstrap — September 18, 2016
Laravel CSRF & $.ajax() — September 8, 2016

Laravel CSRF & $.ajax()

Laravel has a nice built in feature to prevent Cross Site Request Forgeries. In each form you simply drop in a {{ csrf_field() }} and you end up with an _token field that Laravel sniffs out on each submission. If it doesn’t match the sent token the submission fails.

I was trying to use JQuery and retrieve data and faced the problem that my token never matches as my $.ajax() command was not sending it.

There’s more than one way to skin a cat. You need to get the _token parameter into the $.ajax() request. You can either use blade to write it into your JavaScript, fetch it using a JQuery selector or probably the easiest way make it part of the $.ajax() call by default.

Continue reading

JQuery Selectors — September 6, 2016

JQuery Selectors

JQuery certainly saves a lot of hassle when it comes to writing JavaScript.

On a recent project I’ve been struggling to get my head around some selectors to try and grab the elements I need. Along the way I found there’s a lot of power in the selector and I managed to get just what I needed.

I have a lot of form elements all with very common id’s I didn’t want to put id after id into the selector and found you could use a regular expression type of selector. I wanted to select all text inputs with an id beginning with ‘am’ or ‘pm’.

My solution:

$('input[type="text"][id^=am],input[type="text"][id^=pm]')...

The important bits are ^= and the comma. [id^=X] fetches where the id begins with X and [id$=X] would fetch those ending in X. The comma was the all important OR part for me. So one selector selects the matching expressions as an OR.