Archive image

Posts Tagged ‘jquery’

AJAX beginner’s tutorial

AJAX stands for Asynchronous JavaScript and XML and is used for allowing the client side of an application to communicate with the server side of an application.

This might be necessary in order to update the contents of a drop down menu, or to check the availability of a user name, all without reloading the whole page.

Using AJAX isn’t very hard and in this tutorial I’ll show you how to get up and running.

Read more…

How to validate that two time ranges don’t overlap in JavaScript

I was working on a form for a timekeeping app, where a user is able to enter their time worked, as well as breaks taken.

There is no limit on the amount of breaks that may be taken, but one of the validation requirements is that no two breaks may overlap.

Here’s how I implemented this validation check.

Read more…

How to create a custom filter selector with jQuery

A little jQuery trick I learned recently, was how to create a reusable, custom filter to target specific elements based on their characteristics.

I was kind of surprised that I hadn’t heard of this before, so thought I’d jot it down here, in case it is of use to anyone else.

Read more…

Display UI-blocking overlay on page load

A client asked me to add an announcement to their website, informing visitors that their business would be shut during the holidays.

“Uh, ok”, I said, thinking that I could place an announcement in the sidebar, but the client wanted more. They wanted it visible, like really, really visible.

The solution we ended up with was to have the announcement displayed in an interface-blocking overlay when the site loaded. This would be shown to the user only once.

Although not overly user-friendly, some people might find this useful, so here’s how I coded it.

Read more…

How to persist checkbox checked state after page reload

This quick tip describes how to have your browser remember the state of checkboxes once a page has been refreshed or a user navigates away from your site to come back at a later date.

It might be useful to Persist Checkbox Checked State if, for example, you use checkboxes to allow your users to set site-specific preferences, such as opening external links in a new window or hiding certain page elements.

Read more…

Use AJAX to filter MySQL results set

I recently helped someone with a project where they had to select a bunch of records from a database, then on the client side use AJAX to filter those records according to certain criteria.

This was a fun thing to work on and a good opportunity to demonstrate the power of AJAX, so I thought I’d write it all up in the form of a quick tutorial.

For the impatient among you, here’s a demo of what we’ll end up with.

Read more…

Making a jQuery plugin – 101

The other day my colleague mentioned that she’d like a simple calendar on the front page of her website. This didn’t sound too difficult, so being a nice chap I said I’d take a look.

Unfortunately, it turned out that my colleague works with this rather rigid content management system and beyond a few pre-defined widgets, she didn’t have the ability to alter much on the page.

On closer inspection however, I found that one of these widgets allowed us to create arbitrary HTML elements, as well as to include script tags. This sounded like a perfect case for a jQuery plugin … Read more…

Tampermonkey Tutorial (2)

At work, I’m currently working on a rather large form. And when I say large, I mean seriously large – I just counted, it has 136 fields.

Now when a user submits the form, the input is validated. If everything is correct the user’s data is saved to a data base, otherwise the form re-renders, displaying appropriate error messages.

I have written unit tests to test the form’s logic, but nonetheless I still want to test the form manually, just to be 100% sure that things are displaying as expected.

But there’s no way that I’m going to manually fill out 136 fields over and over again. No Sir! A much better solution would be to use Tampermonkey to do it for me.

Read more…

DOM Selection without jQuery

One of the main reasons behind jQuery’s meteoric rise to popularity was its use of the CSS selector syntax to select DOM elements and the ease with which it could then traverse these and modify their content.

In this post I’d like to focus on how jQuery handles DOM selection under the hood and what native JavaScript functions we can use in its place.

Read more…

Programmatically triggering events in jQuery

Recently, I made a tab-based menu system which loaded various content via AJAX whenever a user clicked on any of the tabs.

The only problem with this was, that when my page loaded the widget remained empty until the user had actually clicked something.

This left me wondering how best to simulate user interaction and initialize the widget programmatically.
Read more…

Older Entries Arrow pointing to the right