mysqldump: Couldn’t execute ‘SELECT @@GTID_MODE’: Unknown system variable ‘GTID_MODE’ (1193)

Posted on Mar. 04 in MySQL with 2 comments

If you are using the MySQL 5.6 version of mysqldump on an older MySQL database, you might get the error message.

mysqldump: Couldn't execute 'SELECT @@GTID_MODE': Unknown system variable 'GTID_MODE' (1193)

This error is in part due to the introduction of Global Transaction Identifiers (GTIDs) in MySQL 5.6. GTIDs make it simple to track and compare replication across a master-slave topology.

mysqldump tries to query this system variable, which doesn’t exist in earlier versions, and then fails. The solution is to add –set-gtid-purged=OFF in the mysqldump command. It should look something like

mysqldump -h dbHost -u dbuser dbName --set-gtid-purged=OFF

MySQL 5.6 – Specified key was too long; max key length is 767 bytes

Posted on Mar. 01 in MySQL with no comments

We recently upgraded to MySQL 5.6, and one of our web applications started failing our automated tests. We have a test that drops all our tables and recreates them again, all done using Maven and Liquibase. The error we were getting was something like this.

SEVERE 1/1/13 12:00 PM:liquibase: Change Set /liquibase/tableName.sql::6::teamextension failed. Error:
Error executing SQL alter table tableName 
    add index indexName (columnName): Specified key was too long; max key length is 767 bytes

After we few Google searches, the found the issue to be described in the
Upgrading from Previous to Current Unicode Support page on the MySQL website. This boils down to the Unicode changes in MySQL 5.6.

So what’s the fix? We basically were indexing a very long column, and earlier MySQL versions were not complaining. The quickest fix is to tell MySQL to index only the first parts of the column.

    add index indexName (query(255));

But we have another problem. We were using Liquibase, with formatted SQL changelogs, and we cannot just change old changelogs. That will give errors when Liquibase runs. We started looking around the Liquibase documentation and saw the validCheckSum element, which could allow us to update old changelogs. Unfortunately, this only works with the XML changelogs. A little more digging and we came across the runOnChange attribute. Now we changed our changelog to:

--changeset teamextension:6 runOnChange
	alter table tableName
		add index indexName (columName(255));

Now things work again! If anyone has a better solution, please let us know. Thanks.

Quick jQuery Mobile Tutorial by Comparison

Posted on Mar. 01 in Mobile with no comments

Here’s a quick tutorial on jQuery Mobile. We’ll start with a standard HTML file, then add the jQuery elements in. Code and comparisons are provided. Just like the official jQuery documentation, we will be using div instead of the newer HTML5 semantic elements like header and footer. You can use the HTML5 elements, but remember to use HTML5 shiv if you want to support older browsers.

We start with a standard HTML with a header, menu, list, form and footer. It looks like this.

standard-HTMLThe HTML code is

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<div id="page">
		<div id="header">
			<h1>Header</h1>

			<div id="navbar">
				<ul>
					<li><a href="#">Menu 1</a></li>
					<li><a href="#">Menu 2</a></li>
				</ul>
			</div>
		</div>

		<div id="content">
			<p>Paragraph...</p>

			<ul id="listview">
				<li id="list-divider">List Divider</li>
				<li><a href="#">List Item 1</a></li>
				<li><a href="#">List Item 2</a></li>
				<li><a href="#">List Item 3</a></li>
			</ul>

			<form>
				<fieldset>
					<legend>Form Legend</legend>

					<div>
						<label for="input1">Input 1</label>
						<input id="input1" />
					</div>

					<div>
						<label for="input2">Input 2</label>
						<input id="input2" />
					</div>

					<div>
						<label for="toggle">Toggle</label>
						<select id="toggle">
							<option value="off">Off</option>
							<option value="on">On</option>
						</select>
					</div>

					<div>
						<input id="checkbox" type="checkbox" />
						<label for="checkbox">Checkbox</label>
					</div>

					<div>
						<input type="submit" value="Submit" />
					</div>
				</fieldset>
			</form>
		</div>

		<div id="footer">
			<h4>
				Footer
			</h4>
		</div>
	</div>
</body>
</html>

Nothing special here so far. Now we add jQuery Mobile in. First we add the jQuery Mobile JavaScript and CSS in the head. The viewport meta tag is needed so mobile browsers don’t display the page zoomed out.

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>

Next we add the HTML5 data attributes in. These attributes are used by jQuery Mobile for markup-based initialization and configuration of widgets. We add it in the page, header, navbar, content, list, form, and footer. Here are the difference between the original HTML and the HTML with jQuery.

origin-HTML-and-html-with-jquery Our page now looks like this. new-page The code is now.

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
	<div data-role="page">
		<div data-role="header">
			<h1>Header</h1>

			<div data-role="navbar">
				<ul>
					<li><a href="#">Menu 1</a></li>
					<li><a href="#">Menu 2</a></li>
				</ul>
			</div>
		</div>

		<div data-role="content">
			<p>Paragraph...</p>

			<ul data-role="listview">
				<li data-role="list-divider">List Divider</li>
				<li><a href="#">List Item 1</a></li>
				<li><a href="#">List Item 2</a></li>
				<li><a href="#">List Item 3</a></li>
			</ul>

			<form>
				<fieldset>
					<legend>Form Legend</legend>

					<div data-role="fieldcontain">
						<label for="input1">Input 1</label>
						<input id="input1" />
					</div>

					<div data-role="fieldcontain">
						<label for="input2">Input 2</label>
						<input id="input2" />
					</div>

					<div data-role="fieldcontain">
						<label for="toggle">Toggle</label>
						<select id="toggle" data-role="slider">
							<option value="off">Off</option>
							<option value="on">On</option>
						</select>
					</div>

					<div data-role="fieldcontain">
						<input id="checkbox" type="checkbox" />
						<label for="checkbox">Checkbox</label>
					</div>

					<div>
						<input type="submit" value="Submit" />
					</div>
				</fieldset>
			</form>
		</div>

		<div data-role="footer">
			<h4>
				Footer
			</h4>
		</div>
	</div>
</body>
</html>

Nice, just the addition of a few data attributes and we have a nicely formatted mobile page. Now let’s add a few more data attributes, to make our page a little fancier before we wrap up. Let’s add some data-transition, data-inset, data-icon, and data-position attributes. The differences are difference The page now looks like: page-now-2 And the final code looks like:

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
	<div data-role="page">
		<div data-role="header">
			<h1>Header</h1>

			<div data-role="navbar">
				<ul>
					<li><a href="#" data-transition="slide" data-icon="home">Menu 1</a></li>
					<li><a href="#" data-transition="slide" data-icon="gear">Menu 2</a></li>
				</ul>
			</div>
		</div>

		<div data-role="content">
			<p>Paragraph...</p>

			<ul data-role="listview" data-inset="true">
				<li data-role="list-divider">List Divider</li>
				<li><a href="#" data-transition="slide">List Item 1</a></li>
				<li><a href="#" data-transition="slide">List Item 2</a></li>
				<li><a href="#" data-transition="slide">List Item 3</a></li>
			</ul>

			<form>
				<fieldset>
					<legend>Form Legend</legend>

					<div data-role="fieldcontain">
						<label for="input1">Input 1</label>
						<input id="input1" />
					</div>

					<div data-role="fieldcontain">
						<label for="input2">Input 2</label>
						<input id="input2" />
					</div>

					<div data-role="fieldcontain">
						<label for="toggle">Toggle</label>
						<select id="toggle" data-role="slider">
							<option value="off">Off</option>
							<option value="on">On</option>
						</select>
					</div>

					<div data-role="fieldcontain">
						<input id="checkbox" type="checkbox" />
						<label for="checkbox">Checkbox</label>
					</div>

					<div>
						<input type="submit" value="Submit" data-icon="check" data-theme="b" />
					</div>
				</fieldset>
			</form>
		</div>

		<div data-role="footer" data-position="fixed">
			<h4>
				Footer
			</h4>
		</div>
	</div>
</body>
</html>

For more information, read the jQuery Mobile demos & documentation and play around with Codiqa, a prototyping and interface-building tool for jQuery Mobile.