Trying to use a jQuery UI dialog to present the variations once a product is clicked on instead of directing to the product page.
Using a simple script to do this. Works but is very slow. There are 37 products on the page.
http://rubys.monkeyfish.co.nz/whats-on/mr-popper-s-penguins/saturday-3rd-september-2011/9-00am-2/
Been developing this with Firefox and haven't even started on layout or browser compatibility so please excuse the mess :)
Script is as follows:
(function($) {
$(document).ready(function() {
$('#Products a').each(function() {
var $link = $(this);
var $dialog = $('<div>Loading...</div>')
.load($link.attr('href') + ' #Product')
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 400,
height: 400,
modal: true
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
})(jQuery);
Any ideas on how to improve this? Also is jQuery going to be built in to the framework. Is there a correct way to implement it. I have just been copying css and images to the theme. JS in to the MySite Javascript folder and including the script and css in the mysite controller scripts.