Jump to:

22983 Posts in 11719 Topics by 2827 members

General Questions

SilverStripe Forums » General Questions » jquery ui dialog and variations

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

Page: 1
Go to End
Author Topic: 737 Views
  • MonkeyFish
    Avatar
    Community Member
    12 Posts

    jquery ui dialog and variations Link to this post

    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.

  • MonkeyFish
    Avatar
    Community Member
    12 Posts

    Re: jquery ui dialog and variations Link to this post

    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);

    737 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.