Question

I have a table with a dynamic number of sliders, for which I’d need to execute some javascript code for each cell of the table, when the page is loaded. Each slider needs a separate $(window).load(function(){... call.

Problem is: I only know the id and parameters at the time the slider is printed to the html, so I cannot add them all in the headers. This ends me up with stuff like

<td>
 <script type="text/javascript">
  $(window).load(function(){$("#my_id").PPSlider({ARGUMENTS});};
 </script>
 <input type="hidden" id="my_id"/>
</td>

Is there a way to replace this with an onload attribute of input? I have tried a dozen ways and they all don’t seem to work. If not, how should this be done properly, given that I cannot incorporate them in the header?

EDIT: clarification: the arguments are different for each slider, they represent text to be shown when the slider is in certain positions.

Answer 1

Give them classes instead – those don’t have to be unique, and this is what they’re made for! Also, you should handle ready instead.

<input type="hidden" id="my_id" class="slider" />

$(document).ready(function() {
    $('.slider').PPSlider({ARGUMENTS});
});

Of course, if each slider actually needs its own for some reason (different arguments for each that absolutely can’t be determined using attributes? Unlikely, but…) then you can just put the <script> after the slider element, and then you don’t even have to wait for onload.