Trying to theme attributes with jQuery [#1990300]

So my boss wants a more interactive looking web store and I am currently trying to use jquery plugins to restyle form elements to make them look better. I'm trying this with a plugin I found named Switchy which turns select statements into a simple looking switch.

So far I've tested this plugin on a "Basic Page" and it works perfectly.

My setup right now: I am using display suite to manage my page content. My layout is a panel I created to house each part of the store pages. I did this because it was the easiest way I could find to assign css classes to specific regions. The select I want to change is in a region with class "section_4".

I have the js file and stylesheet for the plugin installed correctly and confirmed it is present on the store page. I added a "code region" using Display Suite and in that region is:

<script type="text/javascript">

jQuery('.section_4 select').switchy();


</script>

I have placed the code region so it appears directly under the select I'm trying to change.

Now here's where the issue pops up. When I reload the page I can see the select change into the switchy layout for a split second and then quickly turn back into the default ubercart select statement. I was hoping that anyone with experience could let me know why this is happening or if there is a better way to go about this.

If what I am describing is confusing in any way please say so and i'll try to elaborate.

Thanks.

Comments

Comment #1

longwave

he/him

English

commented 15 May 2013 at 16:47

Category:	task	» support
Status:	Active	» Fixed

There is nothing particularly special about the Ubercart attribute form, but you should wrap your code as a "behaviour" to ensure that it is run at the correct time, especially if there is a chance that some other JavaScript might update parts of the page at some point. Try something like:

<script type="text/javascript">

Drupal.behaviors.switchy = {
  attach: function(context, settings) {
    jQuery('.section_4 select', context).switchy();
  }
}

</script>

See http://drupal.org/node/756722#behaviors for more information.