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.

Form Questions /

Search form breaks my javascript picture gallery


Reply


4 Posts   1765 Views

Avatar
Lucyjamm

Community Member, 6 Posts

5 January 2010 at 1:36am

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

Avatar
TheServant

Community Member, 2 Posts

26 January 2010 at 9:06pm

Edited: 26/01/2010 9:57pm

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!

Avatar
TheServant

Community Member, 2 Posts

26 January 2010 at 9:32pm

Edited: 26/01/2010 9:44pm

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

Avatar
Borgopio

Community Member, 14 Posts

22 February 2012 at 3:53am

Edited: 22/02/2012 3:54am

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