Ajax variables in Atlassian Bonfire for JIRA to access session state

If you didn’t know already, you can insert variables into your issues with Bonfire. It comes with four default variables: cookies, useragent, title, url. You insert them into your issue summary like so {useragent}, and Bonfire will replace it with something like this:

*Mozilla/5.0 (Windows NT 6.1; WOW64)….*

Or for the pictorially inclined:

You can read more about it [here](http://confluence.atlassian.com/display/BONFIRE/Templates+and+Variables). What I’m more interested in is creating custom variables. These vanilla variables are fine indeed, but often you need more debugging information before you can proceed to fix the issue. After the break I will show you how to create your own Ajax requests *in Bonfire* to get more complex information about your users (in particular **session** variables!)

Continue reading

jColourStrip: A jQuery Gradient Colour Bar

Here’s a fun little plugin I wrote. I wanted some really neat syntax to display little coloured bars that go from 0% to 100% width and as they grow they change colour from say red to green.

It’s very tiny, and easy to use.

* [Demo](http://mikemurko.com/demos/jColourStrip/demo.html)
* [Download .js](http://mikemurko.com/demos/jColourStrip/jColourStrip.js)
* [Download .zip](http://mikemurko.com/demos/jColourStrip/jColourStrip.zip)

Here’s all the syntax you need on your page to make it work (Note **0.2** is the percentage of the bar that is complete):

$('.default').jColourStrip();
<div class="default" title="0.2"></div>

jQuery Keycode Cheatsheet

These are just Javascript keycodes, but when I searched originally I typed in “jQuery keycodes” and didn’t get much. This should be of help to someone in any case. Cheat away!

It’s useful for when you’re using the keydown, keypress, and keyup functions in jQuery. You’d use them in a way like this:

$('#textbox').keyup(function (e) {
if (e.keyCode == 13) {
alert('Enter key pressed!');
}
});

Continue reading

jQuery UI Autocomplete Dynamic Delay

As part of a project I’ve been working on recently I chose to implement a jQuery UI autocomplete bar. Now, due to the application I have heavily customized it. One of these customizations is something that I call ‘dynamic delay’. So what is it? Basically the delay time varies depending on how many characters have been typed into the input box. As the user’s query becomes more specific, the delay dies off. So if you enter in “a”, it will wait a second until it returns any results. If you type in “as” it will have a 0.5s delay. I think it makes for a nicer user experience (than simply having a minimum character input). Also, from the ajax I only return the Top 25 rows, that way the load is never too high on the database. Click below for a demo, or read after the break to see how I do it. For best effect type “harry” slowly into the textbox in the demo … you’ll see the shortening delay.

Continue reading

jQuery UI Datepicker Form Submission onSelect

I was faced with the problem of submitting a form when selecting a date with the jQuery UI Datepicker. The solution is rather simple, but I think that explicitly stating it will be helpful to someone. In my case the form submitted to a .asp file that did something with the date and then came back. I know this can be done with AJAX, but this particular application changes a lot of the content on the main page … and to be honest I haven’t gotten to applying AJAX to the app. So! A form it is.

In the head section of your document link up your jQuery + UI + style sheet using a content delivery network (CDN) from Google. You could also host these files locally, but I prefer this way.

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/south-street/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"</script>

Also in the head put the jQuery code below.

<script type="text/javascript">
	$(function() {
		$('#date').datepicker({
			showOn: 'both',
			buttonImage: "cal.png",
			buttonImageOnly: true,
			autoSize: true,
			onSelect: function (dateText, inst) {
				$(this).parent('form').submit();
			}
		});
	});
</script>

The important line is the onSelect command. Basically it submits the form in which the datepicker is contained. If you want to reference the form by name, you can instead use the line below. But I think the previous case is more general.

$('#frmDate').submit();

Next, throw in some CSS to format everything nicely.

<style>
	#ui-datepicker-div {
		font-size: 70%; /* Without this the datepicker looks huge! */
	}
	.ui-datepicker-trigger {
		vertical-align: middle;
	}
</style>

In the body of the document place this code. Change the action to be your code-behind page that does work with your form inputs.

<form id="frmDate" action="demo.html" method="post">
	<input id="date" name="date" type="text" />
</form>

That’s it! Hope this was of help to someone.

Cheers,
Mike