jquery assigning click function from a plugin -


it's old project i'm updating not th prettiest of coding.

i trying adapt plugin specific needs, plugin in question simple colapsible panel plugin.

i want able style each panel different color depending on rel assigned div.

its php code generates css , code div, call jquery apply collapsible panel plugin.

it styles ok click function not work, pointers helpfull: thinking need apply .delegate() somewhere not sure how to.

the url: http://www.reelfilmlocations.co.uk/new%20search/fullsearch_rework.php test results: click [choose all] above select borough selector , click search button.

the code creates panel:

//all wrapped in php loop: <style type="text/css">             .c_<?php echo $mycurrentborough ?>_color{                color:<?php echo $row_rs_myboroughs['color']; ?>;                font-family: arial, helvetica, sans-serif;                font-size:12px;                letter-spacing:1px;                text-transform:uppercase;                 font-weight: bold;                }             .collapsiblecontainer<?php echo $mycurrentborough ?>{                      border: solid 0px <?php echo $row_rs_myboroughs['color']; ?>;                 }                  .collapsiblecontainertitle<?php echo $mycurrentborough ?>{                      cursor:pointer;                      color:#000000;                      background-color:<?php echo $row_rs_myboroughs['color']; ?>                 }                  .collapsiblecontainertitle div<?php echo $mycurrentborough ?>{                      padding-top:5px;                      padding-left:10px;                      background-color:<?php echo $row_rs_myboroughs['color']; ?>;                      color:#607882;                 }                  .collapsiblecontainercontent<?php echo $mycurrentborough ?>{                      padding: 10px;                      background-color:<?php echo $row_rs_myboroughs['color']; ?>;                 }           </style>         <?php if($boroughcounter > 0){?>               <div class="collapsiblecontainer<?php echo $mycurrentborough; ?>" tabindex="<?php echo $mycurrentborough; ?>" title="locations found in <?php echo $row_rs_myboroughs['borough_name']; ?>" rel="<?php echo $mycurrentborough; ?>">             div content goes here                </div>                <script type="text/javascript">                         $(document).ready(function() {                             $(".collapsiblecontainer<?php echo $mycurrentborough; ?>").collapsiblepanel();                         });                     </script>                     <?php } //end check see if locations exist in borough?> 

the jquery plugin:

    (function($) {     $.fn.extend({         collapsiblepanel: function() {             // call configurecollapsiblepanel function selected element             return $(this).each(configurecollapsiblepanel);         }     });  })(jquery);  function configurecollapsiblepanel() {     $(this).addclass("ui-widget");     // wrap contents of container within new div.     $(this).children().wrapall("<div class='collapsiblecontainercontent"+$(this).attr("rel")+" ui-widget-content' rel='"+$(this).attr("rel")+"'></div>");      // create new div first item within container.  put title of panel in here.     $("<div class='collapsiblecontainertitle"+$(this).attr("rel")+" ui-widget-header'><div>" + $(this).attr("title") + "</div></div>").prependto($(this));      // assign call collapsiblecontainertitleonclick click event of new title div.     $(".collapsiblecontainertitle"+$(this).attr("rel")+"", this).click(collapsiblecontainertitleonclick()); }  function collapsiblecontainertitleonclick(myid) {     // item clicked title div... parent (the overall container) , toggle content within it.     $(".collapsiblecontainercontent"+$(this).attr("rel")+"", $(this).parent()).slidetoggle(); } 

the click method invoking function, instead of passing reference function. remove () , event trigger.

current code: $(".collapsiblecontainertitle"+$(this).attr("rel")+"", this).click(collapsiblecontainertitleonclick());

fixed code: $(".collapsiblecontainertitle"+$(this).attr("rel")+"", this).click(collapsiblecontainertitleonclick);


Comments

Popular posts from this blog

android - Spacing between the stars of a rating bar? -

html - Instapaper-like algorithm -

c# - How to execute a particular part of code asynchronously in a class -