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

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

$(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!

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

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