Beutelevision

by Thomas Beutel

Category: Programming

Adding special options to select using Vue.js

I get some interesting requests from my clients and some of them are head-scratchers. The beauty of Vue.js is that you can implement almost any behavior and do it fairly simply. In this case, the client wanted to swap in a different Act-On form via an iframe if a certain option was selected. Since the […]

Prevent default in Vue.js after checking value

Here is what I did to prevent a form submit based on a value. In this case, I’m checking to make sure a value is not blank. <form id=”myform” method=”post” v-on:submit=”onSubmit” action=”/path/to/form-handler”> methods: { onSubmit: function(e) { if(this.some_value == ”){ e.preventDefault(); return false; } return true; } },

Multiple Open Graph Images in Act-On Landing Page

A client asked me today if there is any way to have multiple Open Graph (og:image) images in an Act-On landing page, as Act-On only specifies one image in their SEO section. I searched around a bit, but then I realized that it’s actually quite straightforward. Simply add the additional meta tags in the Javascript […]

Getting Vue.js to react on iframe load

I recently needed to pull in a third party form into a page where I was using Vue.js. The form is displayed in an iframe and the adjacent content needed to react to submitting of the form, in this case a header needed to disappear. Here is what I came up with: data: { load_count: […]

Muse Plushies

I have three plush toys that sit behind my keyboard, Prickles the hedgehog, Spike the stingray, and Scarlet the octopus. They are muses of sorts and help me as I work. Prickles represents persistence and helps me to stay focused even when the work gets difficult. Prickles has a very earnest face. It is the […]

I’m really liking Vue.js, especially for existing projects

Vue.js promotes itself as a progressive framework, meaning that you can start small and use as little or as much as you need. I’ve been working on Vue.js projects at both ends, some full fledged projects using vuex, components, and vue-cli, and some projects which are just a single component in an existing web page. […]

vue.js – ERROR in bundle.js from UglifyJs – SyntaxError: Unexpected token punc «(», expected punc «:»

I started playing with vue.js and used vue-cli to scaffold a new project. It all worked well until I tried npm run build. Then I got the following error: ERROR in build.js from UglifyJs SyntaxError: Unexpected token punc «(», expected punc «:» [build.js:8643,6] It took me a while to find the answer, but I found […]

WordPress Visual Composer, EventsPlus plugin and a.poplight[href^=#] syntax err

Today I came across a weird bug on a client’s wordpress site that broke Visual Composer. The Javascript console was reporting a a.poplight[href^=#] syntax err which seemed to indicate that popups were not working. Indeed, there was a section of the page with tabs that showed no content under the tabs. After a bit of googling, […]

Leap Second on 6/30/2015 Caused mysqld Process To Consume CPU

This morning I got a notification that mysqld was consuming on average 35% of the CPU on one my servers. This was strange because this particular server doesn’t even use MySQL regularly. It’s there only to serve a rarely used legacy table. A quick look with “show processlist” confirmed that there were no queries running. […]

Datatables in a Colorbox iframe with Selected Row Returned to Parent Window

I recently created a form where one of the questions was asking for a specific code (specifically, a NAICS code). The problem was that there are almost 20,000 codes to choose from, so it was not practical to use a pulldown. I hit upon the idea of using the wonderful Datatables table plugin for jQuery. […]