Jump to:

1999 Posts in 1408 Topics by 613 members

Form Questions

SilverStripe Forums » Form Questions » Search form breaks my javascript picture gallery

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

Page: 1
Go to End
Author Topic: 1719 Views
  • Lucyjamm
    Avatar
    Community Member
    6 Posts

    Search form breaks my javascript picture gallery Link to this post

    Helloall,

    I have run in to a (hopefully) small problem whilst adding a search box in to my page.ss file.

    I have a little javascript gallery that flicks through 5 or six images. It works fine in both ff and ie, but when I just added the bit of code '$SearchForm' to the page, it renders the javascript gallery useless.

    Does anyone know off the top of their heads whats going on? I assume they are conflicting in some way but my coding knowledge doesnt go this far unfortunately.

    Thanks a lot in advance for anyones help.

    Lucy

  • TheServant
    Avatar
    Community Member
    2 Posts

    Re: Search form breaks my javascript picture gallery Link to this post

    I am having a similar problem and I have spent ages trying to fit out. [Break on this error]

    $("ul.subnav").parent().append("<span...dds empty span tag after ul.subnav*)

    . Here is my javascript code for my menu:

    $(document).ready(function(){
       $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

       $("ul.topnav li span").click(function() { //When trigger is clicked...

          //Following events are applied to the subnav itself (moving subnav up and down)
          $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

          $(this).parent().hover(function() {
          }, function(){
             $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
          });

          //Following events are applied to the trigger (Hover events for the trigger)
          }).hover(function() {
             $(this).addClass("subhover"); //On hover over, add class "subhover"
          }, function(){   //On Hover Out
             $(this).removeClass("subhover"); //On hover out, remove class "subhover"
       });
    });

    When I use $SearchForm it doesn't work, and works perfectly without it. If I include the html that is outputted by $SearchForm, it works, so it must be something in the calling of the search for the search form which breaks the javascript.

    Any help would be greatly appreciated, as this is a little urgent if I can't use javascript with a search!

  • TheServant
    Avatar
    Community Member
    2 Posts

    Re: Search form breaks my javascript picture gallery Link to this post

    I have worked out that it's prototype.js which is breaking the js code...

    If I remove the following from prototype.js it works:

    Ajax.PeriodicalUpdater = Class.create();
    Ajax.PeriodicalUpdater.prototype = Object.extend(new Ajax.Base(), {
    initialize: function(container, url, options) {
    this.setOptions(options);
    this.onComplete = this.options.onComplete;

    this.frequency = (this.options.frequency || 2);
    this.decay = (this.options.decay || 1);

    this.updater = {};
    this.container = container;
    this.url = url;

    this.start();
    },

    start: function() {
    this.options.onComplete = this.updateComplete.bind(this);
    this.onTimerEvent();
    },

    stop: function() {
    this.updater.onComplete = undefined;
    clearTimeout(this.timer);
    (this.onComplete || Prototype.emptyFunction).apply(this, arguments);
    },

    updateComplete: function(request) {
    if (this.options.decay) {
    this.decay = (request.responseText == this.lastText ?
    this.decay * this.options.decay : 1);

    this.lastText = request.responseText;
    }
    this.timer = setTimeout(this.onTimerEvent.bind(this),
    this.decay * this.frequency * 1000);
    },

    onTimerEvent: function() {
    this.updater = new Ajax.Updater(this.container, this.url, this.options);
    }
    });

  • Borgopio
    Avatar
    Community Member
    14 Posts

    Re: Search form breaks my javascript picture gallery Link to this post

    Hi!

    Had a similar problem trying to implement Bootstrap Tooltips. Every page with a Silverstripe generated form break my javascript.

    Also for me the problem was prototype.js, so I must tell to my javascript to speak jQuery, with something like:

    <script type="text/javascript">
    (function($) {
    $("a").tooltip({
    placement: "bottom"
    });
    })(jQuery);
    </script>

    Now everything works. Hope that helps ;)

    1719 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.