Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

jquery ui dialog and variations


Reply


2 Posts   915 Views

Avatar
MonkeyFish

Community Member, 12 Posts

26 September 2011 at 12:15pm

Edited: 07/11/2011 12:20am

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.

Avatar
MonkeyFish

Community Member, 12 Posts

27 September 2011 at 9:58am

Edited: 07/11/2011 12:20am

Solved. :)

Slept on issue and had another look this morning. So simple. Instead of loading all pages on document ready, load page on click instead.

(function($) {
   $(document).ready(function() {
      $('.popup').each(function() {
         var $link = $(this);
         var $dialog = $('<div>Loading...</div>')
            .dialog({
               autoOpen: false,
               title: $link.attr('title'),
               width: 400,
               height: 400,
               modal: true
            });

         $link.click(function() {
            $dialog.load($link.attr('href') + ' #Product');
            $dialog.dialog('open');

            return false;
         });
      });
   });
})(jQuery);